/* Painel Dani Modas: layout da aplicação (usa os tokens e componentes do design system) */

/* Transição suave entre páginas (Chrome/Edge/Safari 18); a barra lateral fica parada */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: var(--curva); }
.lateral { view-transition-name: lateral; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

body.painel { font-size: var(--texto-md); }
.app { display: grid; grid-template-columns: var(--largura-barra-lateral) minmax(0, 1fr); min-height: 100dvh; background: linear-gradient(90deg, var(--marca-800) var(--largura-barra-lateral), var(--cor-fundo) 0); }
.principal { min-width: 0; }

/* ---------- Barra lateral ---------- */
.lateral {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-3) var(--esp-3); background: var(--marca-800); color: var(--marca-200);
  overflow-y: auto; z-index: var(--z-gaveta);
}
.lateral__marca { display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-3) var(--esp-4); text-decoration: none; color: var(--marca-100); }
.lateral__marca img { height: 46px; width: auto; }
.lateral__marca span { font-family: var(--fonte-titulo); font-size: var(--texto-lg); color: var(--marca-100); }
.lateral__marca small { display: block; font-family: var(--fonte-texto); font-size: var(--texto-xs); color: var(--marca-300); }
.nav { display: grid; gap: 2px; }
.nav__titulo { padding: var(--esp-4) var(--esp-3) var(--esp-1); font-size: var(--texto-2xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letras-caps); text-transform: uppercase; color: var(--marca-400); }
.nav__item {
  position: relative; display: flex; align-items: center; gap: var(--esp-3); min-height: 40px; padding: 0 var(--esp-3);
  border-radius: var(--raio-md); color: var(--marca-200); text-decoration: none; font-weight: var(--peso-medio); font-size: var(--texto-sm);
  transition: background var(--dur-rapida), color var(--dur-rapida);
}
.nav__item .icone { color: var(--marca-300); }
.nav__item:hover { background: rgba(242, 232, 222, 0.08); color: #fff; }
.nav__item[aria-current="page"] { background: rgba(242, 232, 222, 0.14); color: #fff; }
.nav__item[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca-300); }
.nav__item[aria-current="page"] .icone { color: var(--marca-100); }
.nav__item:focus-visible { outline: 2px solid var(--marca-300); outline-offset: -2px; box-shadow: none; }
.nav__item .selo { margin-left: auto; background: var(--marca-300); color: var(--marca-900); height: 20px; padding: 0 7px; }
.nav__item .ponto-novo { margin-left: auto; background: var(--marca-300); box-shadow: 0 0 0 3px rgba(211, 181, 151, 0.2); }
.lateral__rodape { margin-top: auto; display: grid; gap: 2px; padding-top: var(--esp-3); border-top: 1px solid rgba(242, 232, 222, 0.1); }
.lateral__rodape .menu { display: block; }
.lateral__rodape .menu > .nav__item { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-weight: var(--peso-medio); font-size: var(--texto-sm); }
.lateral__rodape .menu > .nav__item:hover { background: rgba(242, 232, 222, 0.08); }
.lateral__rodape .menu__lista { left: 0; right: auto; bottom: calc(100% + 6px); top: auto; min-width: 230px; transform-origin: bottom left; }
.usuario { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); }
.usuario__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-600); color: var(--marca-100); font-weight: var(--peso-forte); font-size: var(--texto-sm); text-transform: uppercase; }
.usuario__nome { font-size: var(--texto-sm); color: var(--marca-100); font-weight: var(--peso-medio); line-height: 1.2; }
.usuario__papel { font-size: var(--texto-xs); color: var(--marca-300); }
.usuario form { margin-left: auto; }
.usuario .btn { --btn-cor: var(--marca-200); }
.usuario .btn:hover { --btn-bg: rgba(242, 232, 222, 0.08); color: #fff; }

/* ---------- Topo no celular ---------- */
.topo-movel { display: none; }
.fundo-lateral { display: none; }
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); background: var(--cor-fundo); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform var(--dur-lenta) var(--curva); box-shadow: var(--sombra-4); visibility: hidden; }
  .lateral[data-aberta] { transform: none; visibility: visible; }
  .fundo-lateral[data-aberta] { display: block; position: fixed; inset: 0; background: var(--cor-sobreposicao); z-index: calc(var(--z-gaveta) - 1); animation: fundo-entra var(--dur-media); }
  .topo-movel {
    position: sticky; top: 0; z-index: var(--z-cabecalho); display: flex; align-items: center; gap: var(--esp-2);
    height: 56px; padding: 0 var(--esp-3); background: var(--marca-800); color: var(--marca-100);
  }
  .topo-movel .btn { --btn-cor: var(--marca-100); }
  .topo-movel .btn:hover { --btn-bg: rgba(242, 232, 222, 0.1); }
  .topo-movel img { height: 34px; width: auto; }
  .topo-movel__titulo { font-family: var(--fonte-titulo); font-size: var(--texto-lg); }
  .topo-movel .acoes { margin-left: auto; display: flex; gap: var(--esp-1); }
}

/* ---------- Conteúdo ---------- */
.conteudo { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--esp-8) var(--esp-8) var(--esp-16); }
@media (max-width: 1023px) { .conteudo { padding: var(--esp-5) var(--esp-4) var(--esp-16); } }

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); margin-bottom: var(--esp-6); }
.cabecalho__texto { display: grid; gap: var(--esp-1); min-width: 0; }
.cabecalho__voltar { display: inline-flex; align-items: center; gap: 4px; font-size: var(--texto-sm); color: var(--cor-texto-2); text-decoration: none; width: fit-content; margin-bottom: var(--esp-1); }
.cabecalho__voltar:hover { color: var(--cor-primaria); }
.cabecalho__titulo { font-size: var(--texto-3xl); display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.cabecalho__titulo .selo { font-family: var(--fonte-texto); letter-spacing: 0; }
.cabecalho__descricao { color: var(--cor-texto-2); max-width: 70ch; }
.cabecalho__acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .cabecalho__titulo { font-size: var(--texto-2xl); } .cabecalho__acoes { width: 100%; } .cabecalho__acoes > .btn--primario { flex: 1; } }

/* Barra de filtros */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda); background: var(--cor-superficie); }
.filtros .entrada { flex: 1 1 260px; }
.filtros select.input { width: auto; flex: 0 1 200px; }
.filtros__limpar { font-size: var(--texto-sm); }
.filtros__resumo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: var(--texto-xs); color: var(--cor-texto-2); background: var(--cor-superficie-2); border-bottom: var(--borda); }
@media (max-width: 640px) { .filtros select.input { flex: 1 1 140px; } }

/* ---------- Números do início ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-6); }
.numero { display: grid; gap: var(--esp-1); min-width: 0; padding: var(--esp-5); text-decoration: none; color: inherit; }
.numero__rotulo { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); color: var(--cor-texto-2); font-weight: var(--peso-medio); }
.numero__rotulo .icone { color: var(--cor-destaque); }
.numero__valor { font-family: var(--fonte-titulo); font-size: var(--texto-3xl); line-height: 1.1; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.numero__detalhe { font-size: var(--texto-xs); color: var(--cor-texto-2); }
.numero--destaque { background: var(--marca-700); border-color: var(--marca-700); }
.numero--destaque .numero__valor { color: #fff; }
.numero--destaque .numero__rotulo, .numero--destaque .numero__detalhe { color: var(--marca-200); }
.numero--destaque .numero__rotulo .icone { color: var(--marca-300); }
.numero--destaque:hover { border-color: var(--marca-600); }

.grade-inicio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
@media (max-width: 1100px) { .grade-inicio { grid-template-columns: minmax(0, 1fr); } }
.lista-linhas { list-style: none; margin: 0; padding: 0; }
.lista-linhas li { border-bottom: var(--borda); }
.lista-linhas li:last-child { border-bottom: 0; }
.linha-item { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-5); text-decoration: none; color: inherit; transition: background var(--dur-rapida); }
.linha-item:hover { background: var(--marca-50); color: inherit; }
.linha-item__principal { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linha-item__titulo { font-weight: var(--peso-medio); }
.linha-item__sub { font-size: var(--texto-xs); color: var(--cor-texto-2); }
.passos { list-style: none; margin: 0; padding: var(--esp-2) 0; }
.passo { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3) var(--esp-5); }
.passo__marca { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cor-borda-controle); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.passo[data-feito] .passo__marca { background: var(--sucesso-solido); border-color: var(--sucesso-solido); color: #fff; }
.passo[data-feito] .passo__titulo { text-decoration: line-through; color: var(--cor-texto-2); }
.passo__titulo { font-weight: var(--peso-medio); }
.progresso { height: 6px; border-radius: 3px; background: var(--cor-superficie-3); overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--sucesso-solido); border-radius: inherit; transition: width var(--dur-lenta) var(--curva); }

/* ---------- Formulário de produto ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--esp-5); align-items: start; }
.editor__lado { position: sticky; top: var(--esp-6); display: grid; gap: var(--esp-5); }
@media (max-width: 1100px) { .editor { grid-template-columns: minmax(0, 1fr); } .editor__lado { position: static; } }
.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.grade-campos .campo--inteiro { grid-column: 1 / -1; }
@media (max-width: 640px) { .grade-campos { grid-template-columns: minmax(0, 1fr); } }
.variacoes { display: grid; gap: var(--esp-2); }
.variacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 128px minmax(0, 1fr) 40px; gap: var(--esp-2); align-items: center; }
.variacao--cabeca { font-size: var(--texto-xs); color: var(--cor-texto-2); font-weight: var(--peso-forte); padding: 0 2px; }
@media (max-width: 760px) {
  .variacao { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--esp-3); border: var(--borda); border-radius: var(--raio-md); background: var(--cor-superficie-2); position: relative; }
  .variacao--cabeca { display: none; }
  .variacao .contador { width: 100%; justify-content: space-between; }
  .variacao [data-remover] { position: absolute; top: 4px; right: 4px; }
  .variacao > :nth-child(1), .variacao > :nth-child(2) { padding-right: 0; }
  .variacao > :nth-child(1) { grid-column: 1; } .variacao > :nth-child(2) { grid-column: 2; margin-right: 36px; }
}
.variacao .rotulo-movel { display: none; }
@media (max-width: 760px) { .variacao .rotulo-movel { display: block; font-size: var(--texto-xs); color: var(--cor-texto-2); margin-bottom: 2px; } }
.barra-salvar {
  position: sticky; bottom: 0; z-index: var(--z-fixo); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  margin: var(--esp-5) calc(-1 * var(--esp-2)) 0; padding: var(--esp-3) var(--esp-4); background: rgba(255, 252, 248, 0.92); backdrop-filter: blur(8px);
  border: var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3);
}
.barra-salvar__status { font-size: var(--texto-sm); color: var(--cor-texto-2); display: flex; align-items: center; gap: var(--esp-2); }
@media (max-width: 640px) {
  .barra-salvar { margin-inline: calc(-1 * var(--esp-4)); border-radius: var(--raio-lg) var(--raio-lg) 0 0; border-width: 1px 0 0; padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); }
  .barra-salvar__status { display: none; }
  .barra-salvar .grupo-btn { width: 100%; flex-wrap: nowrap; }
  .barra-salvar .grupo-btn > * { flex: 1; }
}
.fotos-atuais { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--esp-3); }
.foto-item { position: relative; border-radius: var(--raio-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cor-superficie-3); }
.foto-item img { width: 100%; height: 100%; object-fit: cover; }
.foto-item .selo { position: absolute; left: 6px; top: 6px; }
.foto-item .menu { position: absolute; right: 6px; top: 6px; }
.foto-item .menu > .btn { --btn-bg: rgba(255, 252, 248, 0.92); box-shadow: var(--sombra-2); }

/* ---------- Pedido ---------- */
.detalhe { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
@media (max-width: 1000px) { .detalhe { grid-template-columns: minmax(0, 1fr); } }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-2) var(--esp-4); margin: 0; font-size: var(--texto-sm); }
.dados dt { color: var(--cor-texto-2); display: flex; align-items: center; gap: var(--esp-2); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.etapa { display: grid; gap: var(--esp-2); font-size: var(--texto-xs); color: var(--cor-texto-3); font-weight: var(--peso-medio); }
.etapa::before { content: ''; height: 4px; border-radius: 2px; background: var(--cor-superficie-3); }
.etapa[data-feita] { color: var(--cor-texto); }
.etapa[data-feita]::before { background: var(--sucesso-solido); }
.etapa[data-atual]::before { background: var(--cor-destaque); }

/* ---------- Cadastros ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; border-radius: var(--raio-pilula); background: var(--cor-superficie-3); font-size: var(--texto-sm); margin: 0; }
.chip button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--cor-texto-2); display: grid; place-items: center; }
.chip button:hover, .chip button:focus-visible { background: var(--erro-bg); color: var(--erro-fg); }

/* ---------- Login ---------- */
.tela-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--esp-4); background: var(--marca-800) radial-gradient(circle at 20% 10%, rgba(211, 181, 151, 0.12), transparent 50%); }
.login { width: 100%; max-width: 400px; padding: var(--esp-8); display: grid; gap: var(--esp-5); }
.login__logo { height: 120px; width: auto; margin: 0 auto; }
.login h1 { font-size: var(--texto-2xl); text-align: center; }

/* ---------- Ajuda e design system ---------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--esp-8); align-items: start; }
.doc__indice { position: sticky; top: var(--esp-6); display: grid; gap: 2px; font-size: var(--texto-sm); }
.doc__indice a { padding: 6px 10px; border-radius: var(--raio-sm); color: var(--cor-texto-2); text-decoration: none; }
.doc__indice a:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
.doc section { scroll-margin-top: var(--esp-6); }
.doc h2 { font-size: var(--texto-2xl); margin-bottom: var(--esp-2); }
.doc h3 { font-family: var(--fonte-texto); font-size: var(--texto-md); font-weight: var(--peso-forte); margin: var(--esp-5) 0 var(--esp-2); }
.doc p, .doc li { color: var(--cor-texto-2); max-width: var(--largura-texto); }
.doc ol, .doc ul { padding-left: 1.2em; display: grid; gap: var(--esp-1); }
@media (max-width: 900px) { .doc { grid-template-columns: minmax(0, 1fr); } .doc__indice { position: static; display: flex; flex-wrap: wrap; } }
.amostras { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--esp-3); }
.amostra { border: var(--borda); border-radius: var(--raio-md); overflow: hidden; font-size: var(--texto-xs); background: var(--cor-superficie); }
.amostra span { display: block; height: 56px; }
.amostra p { padding: 6px 8px; }
.amostra code { color: var(--cor-texto-2); }
.vitrine-ds { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; padding: var(--esp-5); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-lg); background: var(--cor-superficie); }
.vitrine-ds--coluna { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
code { font-family: var(--fonte-mono); font-size: 0.86em; background: var(--cor-superficie-3); padding: 1px 5px; border-radius: 4px; }

/* Celular: mais informação por tela */
@media (max-width: 640px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
  .numero { padding: var(--esp-4); }
  .numero__valor { font-size: var(--texto-2xl); }
  .numero__detalhe { display: none; }
  .filtros .entrada { flex-basis: 100%; }
  .filtros select.input, .filtros input[type="date"].input { flex: 1 1 calc(50% - var(--esp-2)) !important; min-width: 0; font-size: var(--texto-sm); }
}
@media (max-width: 400px) { .numero__valor { font-size: var(--texto-xl); } .numero { padding: var(--esp-3); } .numero__rotulo { font-size: var(--texto-xs); } }