/* PrintFi Cloud — o painel.
 *
 * Sem framework, sem build: o painel é uma página só, e ela é
 * servida pelo próprio app. As cores seguem a identidade do
 * PrintFi Edge (mesma paleta, mesma tipografia).
 */

/* As fichas (cor, fonte, espaço, raio, sombra) estão em
 * tokens.css, carregado antes deste arquivo. Os atalhos antigos
 * (--fundo, --primaria...) continuam valendo por lá. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------- a casca ---------------- */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---------------- topo ---------------- */

.topo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 56px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca { display: flex; align-items: baseline; gap: 6px; }
.logo { font-weight: 700; letter-spacing: -.2px; }
.produto { color: var(--texto-suave); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

.usuario {
  color: var(--texto-suave);
  font-size: 13px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------------- a lateral ---------------- */

.corpo {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
}

.lateral {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px 32px;
  border-right: 1px solid var(--borda);
  background: var(--superficie);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.aba {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.aba .icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aba:hover { background: var(--fundo); color: var(--texto); }

.aba.ativa {
  background: color-mix(in srgb, var(--primaria) 12%, transparent);
  color: var(--primaria);
  font-weight: 600;
}

/* ---------------- conteúdo ---------------- */

.conteudo {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 72px;
  min-width: 0;
}

.carregando { color: var(--texto-suave); }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 0 0 12px; }
p.sub { color: var(--texto-suave); margin: 0 0 20px; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}

.cartao .numero { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.cartao .rotulo { color: var(--texto-suave); font-size: 13px; }
.cartao.ok .numero { color: var(--ok); }
.cartao.aviso .numero { color: var(--aviso); }
.cartao.critico .numero { color: var(--critico); }

.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--sombra);
}

/* O painel do filtro: o período à esquerda, a exportação à direita.
 * Fica em uma linha só (e quebra no celular). */
.painel.filtro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.painel.filtro .campo { flex: 0 0 auto; min-width: 0; }

.filtro-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------- listas ---------------- */

.lista { display: flex; flex-direction: column; gap: 10px; }

/* Uma lista de recursos: sem marcador, sem recuo — é uma lista de
   frases, não de navegação. */
ul.lista { list-style: none; margin: 0; padding: 0; }

ul.lista .item { padding: 8px 12px; }

.item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
}

.item .topo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.item .nome { font-weight: 600; }
.item .detalhe { color: var(--texto-suave); font-size: 13px; margin-top: 4px; }

/* A ajuda de um campo: a frase que diz o que aquele campo faz
   (a medida da mesa, o número de colunas). */
.ajuda {
  margin: 4px 0 0;
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.45;
}

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
}

.etiqueta.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.etiqueta.aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.etiqueta.critico { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 40%, transparent); }

/* ---------------- barra de vida ---------------- */

.barra {
  height: 6px;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.barra > span { display: block; height: 100%; background: var(--ok); }
.barra.aviso > span { background: var(--aviso); }
.barra.critico > span { background: var(--critico); }

/* A barra de **volume** (quantos trabalhos no dia, quanto de receita)
 * é azul, não verde: o verde aqui lia "tudo pronto" e o dono achava
 * que o dia estava 100% concluído. */
.barra.barra-volume > span { background: var(--primaria-cheia); }

/* ---------------- roteiro dos primeiros passos ---------------- */

.lista.passos .passo .detalhe { margin-top: 6px; }

.item.passo.feito { opacity: .72; }
.item.passo.feito .nome { text-decoration: line-through; }

.item.passo button.acao { margin-top: 10px; }

/* ---------------- formulários ---------------- */

label { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; }

/* O `input` sem filtro pegava o checkbox também — e o checkbox
   virava um retângulo cinza do tamanho da tela. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

/* O texto de apoio do campo (o "placeholder") é parte da leitura: o
 * cinza padrão do navegador dava 3,5:1 no modo escuro. */
::placeholder { color: var(--texto-suave); opacity: 1; }

textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

input[type="checkbox"],
input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--primaria);
}

input[type="file"] {
  width: 100%;
  padding: 8px;
  background: var(--fundo);
  border: 1px dashed var(--borda);
  border-radius: 8px;
  font-size: 13px;
}

/* O foco do mouse é discreto; o do teclado é forte (veja abaixo).
   O `:where` tira a especificidade do tipo, para a regra do
   `:focus-visible` — que vem depois — mandar no teclado. */
:where(input, select, textarea):focus {
  outline: 2px solid color-mix(in srgb, var(--primaria) 40%, transparent);
}

/* Todo mundo focável mostra onde está — quem usa o teclado precisa
   saber onde está. */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

/* Um alternador: o quadradinho com o texto do lado. */
label.alternador {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--texto);
  line-height: 1.4;
  cursor: pointer;
}

.campo { margin-bottom: 14px; }

/* Um campo com a unidade do lado (cm, un). */
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.campo-medida { position: relative; }

.campo-medida .unidade {
  position: absolute;
  right: 9px;
  bottom: 9px;
  color: var(--texto-suave);
  font-size: 12px;
  pointer-events: none;
}

.campo-medida input { padding-right: 32px; }

/* O mockup: a arte na peça. */
.mockup {
  display: block;
  max-width: 320px;
  height: auto;
  margin: 12px 0;
  background: var(--fundo);
  border-radius: 10px;
}

.linha { display: flex; gap: 12px; flex-wrap: wrap; }
.linha > .campo { flex: 1; min-width: 180px; }

button.acao {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  background: var(--primaria-cheia);
  color: #fff;
  cursor: pointer;
}

button.acao:hover { background: var(--primaria-cheia-escura); }
button.acao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
button.acao:disabled { opacity: .5; cursor: not-allowed; }

/* O botão de baixar a planilha é um link (o navegador baixa o
   arquivo como arquivo) — mas ele tem que parecer com o botão do
   lado. */
a.acao {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  background: var(--primaria-cheia);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

a.acao:hover { background: var(--primaria-cheia-escura); }
a.acao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
a.acao.secundario:hover { background: var(--fundo); }

/* ---------------- avisos ---------------- */

/* A pilha de avisos fica no canto, acima do conteúdo, e cada aviso
   se fecha sozinho (botão). Erro fica até o cliente fechar. */
.avisos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--raio-2);
  background: var(--toast-fundo);
  color: var(--toast-texto);
  box-shadow: var(--elev-3);
  pointer-events: auto;
  animation: toast-entra 160ms ease;
}

.toast-texto { flex: 1; font-size: var(--fonte-tam-2); line-height: 1.45; }

.toast-fechar {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--raio-1);
  background: transparent;
  color: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}

.toast-fechar:hover { opacity: 1; background: rgba(255, 255, 255, .16); }

.toast.erro { background: var(--toast-erro-fundo); color: var(--toast-erro-texto); }
.toast.ok { background: var(--toast-ok-fundo); color: var(--toast-ok-texto); }

@keyframes toast-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- estados vazio e de erro ---------------- */

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--superficie);
}

.estado-titulo { margin: 0; font-weight: var(--fonte-pes-2); color: var(--texto); }
.estado-texto { margin: 0; max-width: 46ch; color: var(--texto-suave); font-size: var(--fonte-tam-2); }
.estado .acao { margin-top: 6px; }

/* O mesmo estado, em um canto da tela (dentro de um grupo do RIP):
 * não precisa do respiro de uma página inteira. */
.estado.compacto { padding: 14px 12px; gap: 6px; }
.estado.compacto .estado-texto { font-size: var(--fonte-tam-1); }

.erro-estado { border-color: color-mix(in srgb, var(--critico) 40%, transparent); background: var(--cor-critico-suave); }

/* ---------------- rota do RIP ---------------- */

.rota {
  border-left: 3px solid var(--primaria);
  padding: 10px 14px;
  background: var(--fundo);
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
}

.rota .linha-rota { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.rota .onde { color: var(--texto-suave); font-size: 13px; }

.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  letter-spacing: 6px;
  text-align: center;
  padding: 14px;
  background: var(--fundo);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  margin: 12px 0;
}

.vazio { color: var(--texto-suave); font-style: italic; }

/* A lista vazia com explicação: some o itálico preguiçoso. */
.vazio-estado { color: var(--texto); }

/* ---------------- Estúdio de Design ---------------- */

.grade.duas {
  grid-template-columns: minmax(220px, 300px) 1fr;
  align-items: start;
}

@media (max-width: 760px) {
  .grade.duas { grid-template-columns: 1fr; }
}

.item.ativo {
  border-color: var(--primaria);
}

.conversa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.balao {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}

.balao p { margin: 0; white-space: pre-wrap; }

.balao.usuario { background: var(--fundo); }

.balao.agente {
  border-color: color-mix(in srgb, var(--primaria) 40%, transparent);
}

.balao.ferramenta { background: var(--fundo); font-size: 13px; }

.balao.ferramenta .topo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ---------------- tela estreita ---------------- */

@media (max-width: 900px) {
  .corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A lateral vira uma tira que rola de lado: a aba continua
   * alcançável com o dedo, sem roubar a altura da tela. */
  .lateral {
    flex-direction: row;
    gap: 4px;
    height: auto;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }

  .aba {
    width: auto;
    white-space: nowrap;
  }

  .conteudo {
    padding: 16px 14px 64px;
  }
}

/* ---------------- o editor do RIP ---------------- */

/* O RIP é uma página inteira: o palco no meio, as ferramentas na
   direita, o status embaixo. */
.conteudo.rip-pagina {
  max-width: none;
  padding: 0;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* O RIP é um editor: **duas barras** em volta do palco.

   - à esquerda, "A arte" (compor, ajustar, preparar, trabalhos);
   - ao meio, o palco (a folha e as peças);
   - à direita, "A impressão" (onde, como, sair).

   As duas barras **colapsam**: recolhida, a barra vira uma tira
   estreita de botões — e o palco cresce, que é o que o dono quer
   quando está compondo. */
.rip {
  display: grid;
  grid-template-areas:
    "contexto contexto contexto"
    "esquerda palco direita"
    "status status status";
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

/* Recolhida, a barra fica só com a tira de botões. */
.rip.esquerda-fechada { grid-template-columns: 64px minmax(0, 1fr) 360px; }
.rip.direita-fechada { grid-template-columns: 320px minmax(0, 1fr) 64px; }
.rip.esquerda-fechada.direita-fechada { grid-template-columns: 64px minmax(0, 1fr) 64px; }

/* --------- a barra de contexto --------- */

.contexto {
  grid-area: contexto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 8px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

/* O lado esquerdo (o arquivo, os modos e as ferramentas) rola; o
 * lado direito (as ações) fica sempre à vista. Sem isso, o botão
 * "Colocar na fila de impressão" — a ação principal — saía da tela
 * em telas de 1440px e o dono tinha que rolar a barra para achá-lo.
 */
.contexto-rolagem {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* O divisório separa o que **é** (o que está no palco) do que
 * **faz** (as ferramentas). */
.contexto-divisor {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--borda);
}

.contexto-bloco { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }

.contexto-arquivo .icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arquivo-nome {
  font-weight: 600;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contexto-acoes { margin-left: auto; gap: 8px; flex: none; }

/* Os botões da barra não encolhem: encolhidos, o texto quebrava em
   duas linhas e a barra virava um degrau. */
.contexto .ferramenta,
.contexto .acao { flex: none; white-space: nowrap; }

/* As abas do palco: arte, folha, rolo. */
.abas-modo {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.aba-modo {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--texto-suave);
}

.aba-modo.ativa {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: var(--sombra);
}

.ferramenta {
  flex: none;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 32px;
}

.ferramenta:hover:not(:disabled) { color: var(--texto); border-color: var(--texto-suave); }
.ferramenta.ativa {
  color: var(--cor-primaria-viva);
  border-color: var(--primaria);
  background: var(--cor-primaria-suave);
}
.ferramenta:disabled { opacity: .4; cursor: not-allowed; }

.zoom { display: inline-flex; align-items: center; gap: 4px; }

.zoom-valor {
  font-size: 12px;
  color: var(--texto-suave);
  min-width: 40px;
  text-align: center;
}

/* --------- o palco --------- */

.palco {
  grid-area: palco;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #15181d;
}

.palco-tela { position: absolute; inset: 0; overflow: auto; }

.palco-canvas {
  display: block;
  touch-action: none;
  cursor: grab;
}

.palco-canvas:active { cursor: grabbing; }

/* A cinta do rolo: o rolo inteiro numa tira, com a janela que
   está na tela. */
.cinta {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  background: rgba(255, 255, 255, .07);
  border-left: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  touch-action: none;
  z-index: 2;
}

.cinta-marca {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(91, 155, 255, .55);
  border-top: 1px solid #5b9bff;
  border-bottom: 1px solid #5b9bff;
  pointer-events: none;
}

/* --------- as barras laterais --------- */

/* Uma barra tem duas faces: o **conteúdo** (quando está aberta) e o
   **trilho** (quando está fechada, com os botões de atalho). */
.painel {
  display: flex;
  min-height: 0;
  background: var(--superficie);
}

.painel-esquerda {
  grid-area: esquerda;
  border-right: 1px solid var(--borda);
}

.painel-direita {
  grid-area: direita;
  border-left: 1px solid var(--borda);
}

.painel-conteudo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 16px;
}

/* A barra de rolagem **aparece**.
 *
 * No macOS ela é escondida (some quando o dono não mexe no mouse),
 * e o conteúdo parecia cortado pela metade — sem nenhuma pista de
 * que dava para rolar até o fim.
 *
 * Só o `::-webkit-scrollbar`: o `scrollbar-width` (padrão novo) faz
 * o Chrome 121+ **ignorar** estas regras — e aí a barra continua
 * escondida. */
.painel-conteudo::-webkit-scrollbar { width: 11px; }

.painel-conteudo::-webkit-scrollbar-track { background: transparent; }

.painel-conteudo::-webkit-scrollbar-thumb {
  background: var(--cor-borda-forte);
  border: 3px solid var(--superficie);
  border-radius: 8px;
}

.painel-conteudo::-webkit-scrollbar-thumb:hover { background: var(--texto-suave); }

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}

.painel-titulo {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.painel-fechar {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.painel-fechar:hover { background: var(--fundo); }

/* O trilho: a barra recolhida, só com os botões. */
.painel-trilho {
  flex: 0 0 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.painel-trilho[hidden], .painel-conteudo[hidden] { display: none; }

.trilho-item {
  padding: 8px 4px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.trilho-item:hover { background: var(--fundo); }

/* --------- as peças (as camadas) --------- */

.camadas {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.camada {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
}

.camada.ativa {
  border-color: var(--primaria);
  box-shadow: inset 2px 0 0 var(--primaria);
}

.camada-nome {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camada-nome:hover { background: var(--superficie); }

.camada-tipo {
  flex: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
}

.camada-acoes {
  flex: none;
  display: flex;
  gap: 2px;
}

.camada-acao {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.camada-acao:hover { background: var(--superficie); color: var(--texto); }

/* Uma explicação curta (o que o botão faz, por que ele existe). */
.detalhe {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-suave);
}

/* --------- a área de soltar as fotos --------- */

.area-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 12px;
  margin-bottom: 10px;
  border: 1px dashed var(--borda-forte, #3a4048);
  border-radius: 12px;
  background: var(--fundo);
  color: var(--texto);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.area-solta:hover,
.area-solta.sobre {
  border-color: var(--primaria);
  background: var(--superficie);
}

.area-solta-icone { display: block; width: 26px; height: 26px; color: var(--texto-suave); }
.area-solta-icone svg { width: 100%; height: 100%; }
.area-solta-titulo { font-size: 13px; font-weight: 600; }
.area-solta-dica { font-size: 11px; color: var(--texto-suave); }

/* O campo de arquivo existe — mas quem clica é a área. */
.area-solta input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------- as ferramentas (texto, formas, linha) --------- */

.ferramentas-peca {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.ferramenta-peca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
  color: var(--texto);
  font-size: 11px;
  cursor: pointer;
}

.ferramenta-peca:hover { background: var(--superficie); }
.ferramenta-peca.ativo { border-color: var(--primaria); color: var(--primaria); }

.ferramenta-peca-icone { display: block; width: 20px; height: 20px; }
.ferramenta-peca-icone svg { width: 100%; height: 100%; }

/* A paleta de formas. */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
}

.paleta[hidden] { display: none; }

.paleta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 10px;
  cursor: pointer;
}

.paleta-item:hover { background: var(--superficie); color: var(--texto); border-color: var(--borda); }

.paleta-icone { display: block; width: 22px; height: 22px; }
.paleta-icone svg { width: 100%; height: 100%; }

/* --------- o menu de contexto (o botão direito) --------- */

.menu-contexto {
  position: absolute;
  z-index: 40;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.menu-contexto[hidden] { display: none; }

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover { background: var(--fundo); }
.menu-item.perigo { color: #ff8f8f; }

.menu-atalho {
  font-size: 11px;
  color: var(--texto-suave);
}

/* As ações da saída (baixar, fila). */
.acoes-saida { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------- o inspetor --------- */

.inspetor {
  grid-area: inspetor;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  background: var(--superficie);
  border-left: 1px solid var(--borda);
}

/* A gaveta só existe no celular. */
.gaveta-alca, .status-item.gaveta-abrir { display: none; }

.grupo {
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.grupo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 13px;
}

.grupo-cabecalho::-webkit-details-marker { display: none; }

.grupo-seta { color: var(--texto-suave); transition: transform .12s; }
.grupo:not([open]) .grupo-seta { transform: rotate(-90deg); }

.grupo-corpo { padding: 0 12px 12px; }
.grupo-corpo .campo:last-child { margin-bottom: 0; }

.grupo-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin: 14px 0 6px;
}

/* O custo fica **preso no pé da barra**.
 *
 * Ele é a última coisa da barra da direita — e a barra rola. Se o
 * preço saísse com o resto, o dono teria de rolar até o fim (e a
 * metade do conteúdo parece cortada) só para saber quanto vai
 * custar. */
.inspetor-rodape {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--borda);
  margin-top: 12px;
  padding: 10px 0 14px;
  background: var(--superficie);
}

.inspetor-rodape .detalhe { margin: 0 0 6px; }

button.acao.sutil {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda);
  font-weight: 500;
}

button.acao.sutil:hover { background: var(--fundo); }

/* --------- a tinta branca da máquina --------- */

/* A escolha mais importante da impressora: a máquina tem tinta
   branca (DTF) ou não (sublimação)? */
.botoes-branco { gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }

.botoes-branco button.acao { padding: 8px 12px; font-size: 12px; }

.botoes-branco button.escolhido {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

/* As opções do branco somem quando a máquina não tem branco: não há
   base embaixo nem branco por cima para ajustar. */
.bloco-branco[hidden] { display: none; }

/* --------- a impressora: os bicos --------- */

/* A fila de bicos: a cabeça da impressora, da esquerda para a
   direita. Cada casa é um bico — a posição dele na máquina e a tinta
   que está nele. */
.bicos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.bico {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--superficie-2);
  min-width: 0;
}

/* A posição do bico na máquina (1º, 2º... da esquerda para a
   direita). */
.bico-posicao {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-suave);
  width: 20px;
  flex: none;
  text-align: right;
}

/* A cor da tinta que está no bico. */
.bico-marca {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--borda);
  flex: none;
}

.bico-select {
  flex: 1;
  min-width: 0;
  height: 30px;
  font-size: 12px;
  padding: 0 4px;
}

/* As máquinas comuns: 2, 3, 4, 6, 8 ou 10 cabeças, em um clique. */
.botoes-quantos { gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; }

.botoes-quantos button.acao { padding: 6px 10px; font-size: 12px; }

.botoes-quantos button.escolhido {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

/* A camada: branco embaixo da cor, ou cor primeiro. */
.botoes-camada { gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }

.botoes-camada button.acao { padding: 6px 10px; font-size: 12px; }

/* O botão escolhido fica marcado (é a escolha que está valendo). */
.botoes-camada button.escolhido {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

/* A tabela dos canais: o nome (e em quais bicos a tinta está) e os
   dois números. */
.canais-tabela {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.canais-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 76px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.canais-linha.cabecalho {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6px;
}

.canais-linha.apagado { opacity: .45; }

/* O nome da tinta na primeira linha; embaixo, em quais bicos ela
   está — é a informação que o dono procura ("onde está o branco?"),
   então ela não pode ser espremida. */
.canais-coluna.nome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 13px;
  min-width: 0;
}

.canais-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.canais-onde {
  font-size: 11px;
  color: var(--texto-suave);
  padding-left: 16px;
  white-space: nowrap;
}

.canais-cor {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--borda-forte);
  flex: none;
}

.canais-coluna.numero .campo-medida .unidade { right: 4px; bottom: 6px; }

.canais-linha.cabecalho .canais-coluna.numero { text-align: right; }

/* O número: o campo sozinho carrega o recuo do "%" — senão o
   espaço da coluna some e o número fica com 16px úteis. */
.canais-coluna.numero { padding: 0; }

.canais-coluna.numero input {
  padding: 4px 18px 4px 6px;
  height: 32px;
  text-align: right;
}

/* --------- a barra de status --------- */

.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 34px;
  padding: 0 14px;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-suave);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.status-item { flex: none; }
.status-item.avisos { color: var(--aviso); }
.status-item.avisos.critico { color: var(--critico); }
.status-item.rota { margin-left: auto; color: var(--primaria); font-weight: 600; }

/* ---------------- as janelas por cima ---------------- */

.dialogo {
  border: 0;
  border-radius: 14px;
  padding: 0;
  max-width: min(560px, 94vw);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .22);
}

.dialogo::backdrop { background: rgba(10, 14, 20, .45); }

.dialogo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
}

.dialogo-cabecalho h2 { margin: 0; }

.dialogo-fechar {
  border: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: var(--texto-suave);
}

.dialogo-corpo { padding: 16px; }

.mockup-saida { margin-top: 12px; }

@media (max-width: 900px) {
  .conteudo.rip-pagina { height: auto; overflow: visible; }

  /* No celular, o alvo do dedo: 40 px ou mais. */
  .aba-modo, .ferramenta { min-height: 40px; }

  .rip {
    grid-template-areas: "contexto" "palco" "status";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 62vh auto;
    position: relative;
  }

  /* No celular as duas barras viram **gavetas**: a da arte entra
     pela esquerda, a da impressão sobe pelo rodapé. As duas ficam
     por cima do palco (não empurram a página), porque o palco é o
     que o dono está olhando. */
  .painel {
    position: fixed;
    z-index: 30;
    box-shadow: var(--elev-3);
    transition: transform var(--transicao);
  }

  .painel-esquerda {
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 88vw);
    transform: translateX(calc(-100% - 2px));
  }

  .rip.gaveta-esquerda-aberta .painel-esquerda { transform: none; }

  .painel-direita {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78vh;
    border-left: 0;
    border-top: 1px solid var(--borda);
    border-radius: var(--raio-3) var(--raio-3) 0 0;
    transform: translateY(calc(100% + 2px));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .rip.gaveta-aberta .painel-direita { transform: none; }

  /* No celular não há trilho: a barra é sempre a gaveta inteira. */
  .painel-trilho { display: none; }
  .painel-conteudo[hidden] { display: block; }

  /* O inspetor vira gaveta: sobe por cima do palco, em vez de
     empurrar a página para baixo. Fixa, para não esticar a
     página quando está fechada. */
  .inspetor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-height: 78vh;
    border-left: 0;
    border-top: 1px solid var(--borda);
    border-radius: var(--raio-3) var(--raio-3) 0 0;
    box-shadow: var(--elev-3);
    transform: translateY(calc(100% + 2px));
    transition: transform var(--transicao);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .rip.gaveta-aberta .inspetor { transform: none; }

  .gaveta-alca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 0;
    position: sticky;
    top: 0;
    background: var(--superficie);
    z-index: 2;
  }

  .gaveta-pega {
    flex: 1;
    height: 4px;
    border-radius: var(--raio-cheio);
    background: var(--borda-forte);
  }

  .gaveta-fechar {
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: var(--fonte-tam-2);
    cursor: pointer;
    padding: 6px 8px;
    min-height: 36px;
  }

  /* O botão fica solto no canto (flutuante): na barra de status ele
     ficaria longe do polegar, e a barra rola de lado. */
  .status-item.gaveta-abrir {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--raio-cheio);
    background: var(--primaria-cheia);
    color: #fff;
    font: inherit;
    font-weight: var(--fonte-pes-2);
    cursor: pointer;
    box-shadow: var(--elev-2);
  }

  /* O botão da arte fica do outro lado, para não ficar embaixo do
     da impressão. */
  .status-item.gaveta-esquerda-abrir {
    right: auto;
    left: 14px;
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borda);
  }
}

/* --------- a medida da mesa da máquina --------- */

/* A medida da mesa da máquina (DTG de garment, UV flatbed): só
   aparece quando ela é a escolha. */
.mesa-medida {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.mesa-medida[hidden] { display: none; }

/* --------- o sentido da impressão --------- */

/* Os três sentidos: o escolhido fica marcado (como na camada do
   branco). */
.botoes-sentido { gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }

.botoes-sentido button.acao { padding: 6px 10px; font-size: 12px; }

.botoes-sentido button.escolhido {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

/* O aviso da lâmpada contra o sentido. */
.aviso-lampada {
  color: var(--aviso);
  border-left: 3px solid var(--aviso);
  padding-left: 8px;
  margin-bottom: 10px;
}

.aviso-lampada.apagado { display: none; }

/* --------- as máquinas salvas --------- */

/* O campo e o botão lado a lado (o nome é longo e o botão também). */
.campo-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.campo-linha select, .campo-linha input { flex: 1; min-width: 0; }

.campo-linha button.acao { flex: none; white-space: nowrap; }