/* Telas específicas do painel do revendedor (a casca e os componentes vêm de comum/). */

@layer telas {

  .valor-ganho { color: var(--verde); font-weight: 700; }

  /* ---------- prévia ao vivo do portal (tela Sua marca) ---------- */
  .previa-palco { position: sticky; inset-block-start: 1rem; display: flex; flex-direction: column; gap: 0.75rem; padding: var(--esp-3); border-radius: var(--raio-l); background: var(--superficie-2); }
  .previa { border-radius: var(--raio-m); overflow: hidden; background: var(--fundo); box-shadow: var(--sombra-2); border: 1px solid var(--linha); font-size: 0.875rem; }
  .previa__barra { display: flex; align-items: center; gap: 0.5rem; min-block-size: 1.75rem; padding-inline: 0.75rem; background: var(--superficie-3); color: var(--texto-2); font-size: 0.75rem; font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .previa__topo { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; background: var(--marca); color: var(--sobre-marca); font-weight: 800; }
  .previa__topo .marca { flex: 1; font-size: 1rem; }
  .previa__topo .marca > img { background: #fff; padding: 2px; inline-size: 1.75rem; block-size: 1.75rem; }
  .previa__topo .monograma { background: var(--sobre-marca); color: var(--marca); inline-size: 1.75rem; block-size: 1.75rem; }
  .previa__chip { padding: 0.25rem 0.625rem; border-radius: 1rem; background: color-mix(in oklch, var(--marca-2) 70%, transparent); color: var(--sobre-marca-2); font-size: 0.75rem; white-space: nowrap; }
  .previa__corpo { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .previa__heroi { background: var(--marca-2); color: var(--sobre-marca-2); border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; align-items: stretch; }
  .previa__heroi strong { font-size: 1.125rem; letter-spacing: -0.01em; }
  .previa__heroi .placa { align-self: center; font-size: 1.375rem; }
  .previa__botao { display: grid; place-items: center; min-block-size: 2.5rem; border-radius: 0.625rem; background: var(--superficie); color: var(--texto); font-weight: 800; }
  .previa__linha { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--superficie); border: 1px solid var(--linha); }
  .previa__linha span:nth-child(2) { flex: 1; font-weight: 600; }
  .previa__linha .link { font-size: 0.8125rem; }

  .cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--esp-2); }
  .cor-campo { display: flex; gap: 0.5rem; align-items: center; }
  .cor-campo input[type="color"] { inline-size: 3rem; block-size: var(--toque); padding: 0.125rem; border: 1px solid var(--contorno); border-radius: 0.625rem; background: var(--superficie); cursor: pointer; flex: none; }
  .cor-campo input[type="text"] { font-family: var(--mono); text-transform: uppercase; }

  .logo-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; padding: 0.875rem; border: 2px dashed var(--contorno); border-radius: var(--raio-m); }
  .logo-envio > :first-child { inline-size: 3.5rem; block-size: 3.5rem; flex: none; border-radius: 0.875rem; object-fit: contain; background: var(--superficie-2); }
  .logo-envio > .monograma { font-size: 1.25rem; }
  .logo-envio > div { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .logo-envio input[type="file"] { font-size: 0.875rem; max-inline-size: 100%; }

  .url-portal { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .url-portal code { flex: 1 1 14rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--superficie-2); overflow-wrap: anywhere; }

  /* ---------- créditos ---------- */
  .pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0.75rem; padding: 0; list-style: none; }
  .pacotes .opcao { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem; }
  .pacotes .opcao .valor { font-size: var(--fs-2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

  /* ---------- lote ---------- */
  .resumo-lote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 0.5rem; }
  .resumo-lote .selo { justify-content: center; min-block-size: 2.25rem; font-size: 0.8125rem; }
  .arquivo { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--esp-2); border: 2px dashed var(--contorno); border-radius: var(--raio-m); }
}