/*
 * DonaDeSi Design System V2 (DON-100).
 *
 * Esta camada vem depois dos estilos estruturais e dos componentes. Ela nao
 * muda a API das macros nem os atributos de comportamento: apenas compoe a
 * mesma semantica em uma interface administrativa mais densa e legivel.
 * Cor continua vindo exclusivamente de tokens.css.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

html {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  /* O hero editorial ocupa a viewport inteira com 100vw. Como `vw` inclui a
   * barra vertical do navegador, o excedente de poucos pixels não pode virar
   * rolagem lateral da página. `clip` preserva o hero de ponta a ponta sem
   * criar um novo contexto de rolagem, como `hidden` criaria. */
  overflow-x: clip;
}

body {
  background: var(--surface-page);
  color: var(--text-primary);
}

a {
  color: var(--text-link);
}

/* Controles compartilhados ------------------------------------------------ */
.botao {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.8125rem;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease,
    transform 150ms ease;
}

.botao-primario {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--action-primary) 20%, transparent);
}

.botao-primario:hover {
  transform: translateY(-1px);
}

.botao-secundario {
  border-color: var(--border-default);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.botao-secundario:hover {
  border-color: var(--border-strong);
}

.campo {
  gap: var(--space-2);
}

.campo-rotulo {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.campo-entrada,
.campo-selecao {
  min-height: 42px;
  border-radius: 9px;
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--text-primary) 2%, transparent);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.campo-entrada:focus,
.campo-selecao:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 14%, transparent);
  outline: 0;
}

.campo-dica,
.campo-erro {
  font-size: 0.75rem;
}

.cartao {
  padding: var(--space-5);
  border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.cartao-titulo {
  margin-bottom: var(--space-4);
  font-size: 0.9375rem;
}

.pilula,
.selo {
  padding: 3px 8px;
  border-radius: var(--corner-pill);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
}

.alerta {
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* Site publico ------------------------------------------------------------- */
.cabecalho {
  position: relative;
  z-index: 10;
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--header-border);
}

.cabecalho-manifesto {
  display: grid;
  min-height: 28px;
  place-items: center;
  padding: var(--space-1) var(--spacing-container-padding-inline);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.cabecalho-manifesto p {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.cabecalho-identidade,
.cabecalho-lista {
  max-width: 1400px;
  margin-inline: auto;
}

.cabecalho-identidade {
  display: grid;
  grid-template-areas:
    "menu marca acoes"
    "busca busca busca";
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  min-height: 118px;
  padding-block: var(--space-3) var(--space-4);
}

.cabecalho-marca {
  grid-area: marca;
  display: inline-grid;
  justify-self: center;
  align-content: center;
  min-height: 44px;
  color: var(--header-fg);
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.cabecalho-marca-nome {
  font-size: clamp(1.2rem, 4.6vw, 1.8rem);
  font-weight: 850;
  letter-spacing: -0.075em;
}

.cabecalho-marca-assinatura {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cabecalho-alternar {
  grid-area: menu;
  align-self: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--header-fg);
}

.cabecalho-alternar .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.cabecalho-busca {
  grid-area: busca;
  position: relative;
  width: 100%;
}

.cabecalho-busca .campo {
  margin: 0;
}

.cabecalho-busca .campo-entrada {
  min-height: 44px;
  padding-inline: 42px var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-sunken);
  box-shadow: none;
  font-size: 0.8125rem;
}

.cabecalho-busca .campo-entrada:focus {
  border-color: var(--border-focus);
  background: var(--surface-raised);
}

.cabecalho-busca-icone {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.cabecalho-acoes {
  grid-area: acoes;
  align-self: center;
  gap: var(--space-1);
}

.cabecalho-acao,
.cabecalho .tema-alternar {
  display: inline-grid;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--header-fg);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    transform 180ms ease;
}

.cabecalho-acao {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
}

.cabecalho-acao .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.cabecalho-acao:hover,
.cabecalho .tema-alternar:hover {
  border-color: var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--header-fg);
  transform: translateY(-1px);
}

.cabecalho-acao-rotulo {
  display: none;
}

.cabecalho-contador {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  min-height: 16px;
  padding: 0 4px;
  border: 2px solid var(--header-bg);
  font-size: 0.5625rem;
  line-height: 1;
}

.cabecalho-categoria {
  min-height: 42px;
  padding-block: var(--space-2);
  border-bottom-width: 1px;
  color: var(--header-fg);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}

.cabecalho-categorias {
  overflow: visible;
  border-top: 1px solid var(--header-border);
  border-bottom: 1px solid var(--header-border);
}

.cabecalho-lista {
  display: block;
  justify-content: flex-start;
  padding-block: var(--space-2);
  white-space: normal;
}

.cabecalho-grupo-categoria {
  border-bottom: 1px solid var(--header-border);
}

.cabecalho-grupo-categoria:last-child {
  border-bottom: 0;
}

.cabecalho-detalhes-categoria {
  position: relative;
}

.cabecalho-detalhes-categoria summary {
  list-style: none;
}

.cabecalho-detalhes-categoria summary::-webkit-details-marker {
  display: none;
}

.cabecalho-grupo-categoria > .cabecalho-categoria,
.cabecalho-detalhes-categoria > .cabecalho-categoria {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 0;
  cursor: pointer;
}

.cabecalho-categoria-seta {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.cabecalho-detalhes-categoria[open] .cabecalho-categoria-seta {
  transform: rotate(180deg);
}

.cabecalho-submenu {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-4);
}

.cabecalho-detalhes-categoria:not([open]) .cabecalho-submenu {
  display: none;
}

.cabecalho-submenu-titulo {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--header-fg);
  font-size: 0.75rem;
  font-weight: 750;
  text-decoration: none;
}

.cabecalho-submenu-titulo .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.cabecalho-submenu-titulo:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cabecalho-subcategorias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecalho-subcategoria {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.35;
}

.cabecalho-categoria-ativa {
  border-bottom-color: currentColor;
}

.cabecalho .tema-alternar {
  color: var(--header-fg);
}

.tema-icone {
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
}

.tema-icone-entrando {
  animation: trocar-icone-do-tema 320ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes trocar-icone-do-tema {
  from {
    opacity: 0;
    transform: rotate(-80deg) scale(0.62);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

html.tema-pronto .cabecalho .tema-alternar:active .tema-icone {
  transform: rotate(180deg) scale(0.82);
}

@media (min-width: 768px) {
  .cabecalho-identidade {
    grid-template-areas: "busca marca acoes";
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    min-height: 98px;
    padding-block: var(--space-4);
  }

  .cabecalho-marca-nome {
    font-size: 1.9rem;
  }

  .cabecalho-acoes {
    justify-self: end;
  }

  .cabecalho-acao,
  .cabecalho .tema-alternar {
    width: auto;
    min-width: 40px;
    padding-inline: var(--space-3);
  }

  .cabecalho-acao {
    grid-auto-flow: column;
    gap: var(--space-2);
  }

  .cabecalho-acao-rotulo {
    display: inline;
  }

  .cabecalho-contador {
    position: static;
    min-width: 18px;
    min-height: 18px;
    border-width: 0;
  }

  .cabecalho-lista {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    padding-block: 0;
    white-space: nowrap;
  }

  .cabecalho-grupo-categoria {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 0;
  }

  .cabecalho-grupo-categoria + .cabecalho-grupo-categoria::before {
    width: 4px;
    height: 4px;
    margin-right: var(--space-3);
    border-radius: 999px;
    background: var(--border-strong);
    content: "";
  }

  .cabecalho-grupo-categoria > .cabecalho-categoria,
  .cabecalho-detalhes-categoria > .cabecalho-categoria {
    display: inline-flex;
    width: auto;
    justify-content: initial;
    border-bottom-width: 1px;
  }

  .cabecalho-detalhes-categoria:hover .cabecalho-categoria-seta,
  .cabecalho-detalhes-categoria:focus-within .cabecalho-categoria-seta {
    transform: rotate(180deg);
  }

  .cabecalho-submenu {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 20;
    width: max-content;
    min-width: 240px;
    max-width: 360px;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--corner-surface) var(--corner-surface);
    background: var(--surface-raised);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--text-primary) 12%, transparent);
    transform: translateX(-50%);
  }

  .cabecalho-detalhes-categoria:not([open]):hover .cabecalho-submenu,
  .cabecalho-detalhes-categoria:not([open]):focus-within .cabecalho-submenu {
    display: grid;
  }

  .cabecalho-subcategorias {
    grid-template-columns: repeat(2, minmax(104px, 1fr));
  }

  .cabecalho-subcategoria {
    font-size: 0.75rem;
  }
}

.vitrine-hero,
.vitrine-secao,
.produto-detalhe {
  width: 100%;
}

.vitrine-hero {
  position: relative;
  min-height: clamp(460px, 70vw, 660px);
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

/* A Home tem uma capa editorial. Ela escapa intencionalmente do container de
 * leitura do <main>, enquanto o catálogo abaixo preserva as margens que
 * facilitam a comparação dos produtos. */
.vitrine-hero:not(.vitrine-hero-contextual) {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.vitrine-hero-contextual {
  display: grid;
  min-height: 0;
  gap: var(--space-3);
  align-items: stretch;
  padding: clamp(var(--space-5), 5vw, var(--space-7)) 0 var(--space-5);
  background: transparent;
  color: var(--text-primary);
}

.vitrine-hero-contextual .vitrine-hero-copy {
  gap: var(--space-2);
}

.vitrine-hero-contextual h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.vitrine-hero-copy,
.vitrine-slide-conteudo {
  display: grid;
  max-width: 720px;
  gap: var(--space-4);
}

.vitrine-sobrancelha,
.produto-card-estoque {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vitrine-hero h1,
.vitrine-hero h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.25rem, 8vw, 5.75rem);
  letter-spacing: -0.075em;
  line-height: 0.94;
}

.vitrine-hero-contextual p:not(.vitrine-sobrancelha) {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.45;
}

.vitrine-carrossel-slides,
.vitrine-slide {
  min-height: inherit;
}

.vitrine-slide {
  display: grid;
  position: relative;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.vitrine-slide-imagem,
.vitrine-slide-sobreposicao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vitrine-slide-imagem {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}

.vitrine-slide-sobreposicao {
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface-inverse) 94%, transparent) 0%,
      color-mix(in srgb, var(--surface-inverse) 76%, transparent) 34%,
      color-mix(in srgb, var(--surface-inverse) 20%, transparent) 70%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface-inverse) 40%, transparent), transparent 48%);
}

.vitrine-slide-conteudo {
  width: 100%;
  padding: var(--space-7) var(--spacing-container-padding-inline) calc(var(--space-8) + var(--space-5));
}

.vitrine-slide .vitrine-sobrancelha {
  color: var(--text-on-inverse-muted);
}

.vitrine-slide-conteudo > p:not(.vitrine-sobrancelha) {
  max-width: 510px;
  color: var(--text-on-inverse-muted);
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  line-height: 1.55;
}

.vitrine-slide-cta {
  width: fit-content;
  background: var(--surface-raised);
  color: var(--text-primary);
}

.vitrine-slide-cta:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.vitrine-carrossel-controles {
  display: none;
}

[data-carrossel-pronto] .vitrine-carrossel-slides {
  position: relative;
  min-height: inherit;
}

[data-carrossel-pronto] .vitrine-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transition: opacity 550ms ease, transform 700ms ease;
}

[data-carrossel-pronto] .vitrine-slide[data-slide-ativo] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

[data-carrossel-pronto] .vitrine-carrossel-controles {
  position: absolute;
  right: var(--spacing-container-padding-inline);
  bottom: var(--space-5);
  left: var(--spacing-container-padding-inline);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.vitrine-carrossel-seta {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text-on-inverse) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-inverse) 34%, transparent);
  color: var(--text-on-inverse);
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.vitrine-carrossel-seta:hover {
  background: color-mix(in srgb, var(--surface-inverse) 70%, transparent);
  transform: translateY(-1px);
}

.vitrine-carrossel-seta .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.vitrine-carrossel-indicadores {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.vitrine-carrossel-indicadores button {
  width: 22px;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.vitrine-carrossel-indicadores button::after {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-on-inverse) 42%, transparent);
  content: "";
  transition: background-color 180ms ease, transform 180ms ease;
}

.vitrine-carrossel-indicadores button[aria-pressed="true"]::after {
  background: var(--text-on-inverse);
  transform: scaleX(1.3);
}

.vitrine-secao {
  display: grid;
  gap: var(--space-5);
}

.vitrine-secoes {
  display: grid;
  gap: clamp(var(--space-7), 10vw, 120px);
}

.vitrine-secao-categoria {
  scroll-margin-top: var(--space-7);
}

.vitrine-secao-cabecalho {
  display: grid;
  gap: var(--space-2);
}

.vitrine-secao h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.055em;
}

.vitrine-secao-cabecalho > p:not(.vitrine-sobrancelha) {
  max-width: 540px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.vitrine-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
}

/* Na Home, cada coleção vira uma trilha tátil no celular: um card se encaixa
 * por vez, o próximo aparece parcialmente como convite para deslizar e não
 * há avanço automático interrompendo a escolha da cliente. A listagem de uma
 * categoria continua sendo grade, pois ali comparar vários itens importa mais
 * que a navegação editorial. */
.vitrine-grade-carrossel {
  display: flex;
  gap: var(--space-4);
  margin-inline: calc(-1 * var(--spacing-container-padding-inline));
  padding-inline: var(--spacing-container-padding-inline);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--spacing-container-padding-inline);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vitrine-grade-carrossel::-webkit-scrollbar {
  display: none;
}

.vitrine-grade-carrossel .produto-card,
.vitrine-grade-carrossel .cartao-produto {
  flex: 0 0 min(78vw, 300px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (min-width: 768px) {
  .vitrine-grade-carrossel {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .vitrine-grade-carrossel .produto-card,
  .vitrine-grade-carrossel .cartao-produto {
    flex: initial;
  }
}

.vitrine-carregar-mais {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 750;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.vitrine-carregar-mais:hover {
  border-color: var(--text-primary);
  background: var(--surface-sunken);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.vitrine-carregar-mais .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.produto-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.produto-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--text-primary) 10%, transparent);
  transform: translateY(-3px);
}

/* Os cards públicos da DON-121 já são reutilizados por Home, busca e
 * categoria. Esta camada apenas os veste com a linguagem editorial; o DTO e
 * as regras de preço continuam no catálogo público. */
.cartao-produto {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cartao-produto:hover {
  border-color: var(--border-strong);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--text-primary) 10%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  transform: translateY(-3px);
}

.cartao-produto-imagem {
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  background: linear-gradient(145deg, var(--surface-sunken), var(--surface-raised));
  color: var(--text-muted);
}

.cartao-produto-imagem .lucide {
  width: 34px;
  height: 34px;
  stroke-width: 1.4;
}

.cartao-produto-corpo {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.cartao-produto-nome {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.cartao-produto-preco {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 650;
}

.pagina-produto {
  display: grid;
  gap: var(--space-6);
}

.pagina-produto-imagem {
  display: grid;
  min-height: clamp(320px, 60vw, 560px);
  place-items: center;
  border-radius: 24px;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.pagina-produto-imagem .lucide {
  width: 42px;
  height: 42px;
  stroke-width: 1.3;
}

.pagina-produto-corpo {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.pagina-produto-corpo > * {
  margin: 0;
}

.pagina-produto-categoria a {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}

.pagina-produto-nome {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.07em;
  line-height: 0.98;
}

.pagina-produto-descricao {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.pagina-produto-destaque {
  font-size: 1.25rem;
  font-weight: 800;
}

.produto-card-imagem {
  display: block;
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, var(--surface-sunken), var(--surface-raised));
}

.produto-card-imagem img,
.produto-detalhe-galeria img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-card-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 220px;
  place-items: center;
  color: var(--text-muted);
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.12em;
}

.produto-card-corpo {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.produto-card h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.produto-card h3 a {
  color: var(--text-primary);
  text-decoration: none;
}

.produto-card p:not(.produto-card-estoque) {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.produto-card strong,
.produto-detalhe-preco {
  color: var(--text-primary);
  font-size: 1.125rem;
}

.vitrine-vazio {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: 24px;
  background: var(--surface-raised);
}

.vitrine-vazio .lucide {
  width: 32px;
  height: 32px;
}

.produto-detalhe {
  display: grid;
  gap: var(--space-6);
}

.produto-detalhe-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
}

.produto-detalhe-galeria img,
.produto-detalhe-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background: var(--surface-raised);
}

.produto-detalhe-info {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.produto-detalhe-info h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.07em;
  line-height: 0.98;
}

.produto-detalhe-info > p:not(.vitrine-sobrancelha, .produto-card-estoque) {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.produto-detalhe-info .botao {
  width: fit-content;
}

.rodape-convites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--footer-border);
  background: var(--footer-border);
}

.rodape-convite {
  display: grid;
  min-height: 210px;
  align-content: end;
  gap: var(--space-2);
  padding: var(--space-6) var(--spacing-container-padding-inline);
  background: var(--footer-bg);
  color: var(--footer-fg);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.rodape-convite:hover {
  background: var(--surface-sunken);
  color: var(--footer-fg);
}

.rodape-convite-revenda {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.rodape-convite-revenda:hover {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.rodape-convite-sobrancelha {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rodape-convite-revenda .rodape-convite-sobrancelha,
.rodape-convite-revenda > span:last-child {
  color: var(--text-on-inverse-muted);
}

.rodape-convite strong {
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.rodape-convite > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.rodape-convite .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.rodape-navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
}

.rodape-coluna,
.rodape-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.rodape-coluna .rodape-titulo {
  margin: 0;
}

.rodape-lista li + li {
  margin: 0;
}

.rodape-lista .rodape-link {
  min-height: 32px;
}

.rodape-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: 0 var(--space-5);
}

.rodape-marca {
  margin: 0 auto 0 0;
  color: var(--footer-fg);
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.07em;
}

.rodape-contato .rodape-titulo {
  margin: 0;
}

.rodape-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rodape-redes li + li {
  margin: 0;
}

.rodape-redes .rodape-link {
  min-height: 32px;
}

.rodape-redes .rodape-rede {
  display: inline-grid;
  width: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--footer-border);
  border-radius: 999px;
  color: var(--footer-fg);
}

.rodape-redes .rodape-rede:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.rodape-rede .lucide {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.rodape-icone-facebook {
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.rodape-icone-instagram {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1.8px solid currentColor;
  border-radius: 5px;
}

.rodape-icone-instagram::before,
.rodape-icone-instagram::after {
  position: absolute;
  display: block;
  border: 1.7px solid currentColor;
  border-radius: 999px;
  content: "";
}

.rodape-icone-instagram::before {
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
}

.rodape-icone-instagram::after {
  top: 2px;
  right: 2px;
  width: 1px;
  height: 1px;
  border-width: 1px;
}

@media (min-width: 1024px) {
  .vitrine-hero-contextual {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.45fr);
  }

  .vitrine-slide-conteudo {
    padding-inline: clamp(var(--space-6), 7vw, 112px);
  }

  .produto-detalhe {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr);
    align-items: start;
  }

  .pagina-produto {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr);
    align-items: start;
  }
}

/* Painel administrativo ---------------------------------------------------- */
.painel-topbar {
  min-height: 72px;
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--topbar-bg) 94%, transparent);
  backdrop-filter: blur(12px);
}

.painel-marca {
  letter-spacing: -0.03em;
}

.painel-titulo {
  font-size: 0.8125rem;
  font-weight: 750;
}

.painel-acoes {
  gap: var(--space-2);
}

.painel-acao,
.tema-alternar {
  min-height: 40px;
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.8125rem;
}

.painel-acao:hover,
.tema-alternar:hover {
  background: var(--surface-sunken);
  border-color: var(--border-subtle);
  text-decoration: none;
}

.tema-alternar {
  display: inline-grid;
  width: 40px;
  padding: 0;
  place-items: center;
  background: transparent;
  color: var(--topbar-item-fg);
  cursor: pointer;
}

.tema-icone {
  width: 18px;
  height: 18px;
}

.painel-menu {
  padding: var(--space-5) var(--space-3);
  box-shadow: 6px 0 28px color-mix(in srgb, var(--surface-inverse) 14%, transparent);
}

.painel-identidade-lateral {
  display: none;
}

.painel-grupo + .painel-grupo {
  margin-top: var(--space-6);
  padding-top: 0;
  border-top: 0;
}

.painel-grupo-titulo {
  margin-bottom: var(--space-2);
  padding-inline: var(--space-3);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

.painel-lista {
  display: grid;
  gap: 3px;
}

.painel-item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 42px;
  padding-inline: var(--space-3);
  border-inline-start: 0;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
}

.painel-item:hover {
  background: color-mix(in srgb, var(--sidebar-item-active-bg) 68%, var(--sidebar-bg));
  text-decoration: none;
}

.painel-item-ativo {
  box-shadow: inset 3px 0 var(--accent-default);
}

.painel-item-icone {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  opacity: 0.86;
}

.painel-item-icone .lucide {
  width: 18px;
  height: 18px;
}

.painel-item-ativo .painel-item-icone {
  opacity: 1;
}

.painel-dashboard {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}

.painel-dashboard-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.painel-dashboard-copy {
  max-width: 680px;
}

.painel-dashboard-sobrancelha {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.painel-dashboard-copy h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.painel-dashboard-copy > p:last-child {
  color: var(--text-secondary);
}

.painel-dashboard-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.painel-dashboard-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.painel-dashboard-metrica,
.painel-dashboard-cartao {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.painel-dashboard-metrica {
  display: grid;
  gap: var(--space-3);
  min-height: 176px;
  padding: var(--space-5);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.painel-dashboard-metrica:hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 8%, transparent);
  text-decoration: none;
  transform: translateY(-2px);
}

.painel-dashboard-metrica-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.painel-dashboard-metrica-topo .lucide {
  width: 20px;
  height: 20px;
  color: var(--accent-default);
}

.painel-dashboard-metrica strong {
  font-size: 1rem;
}

.painel-dashboard-metrica > span:last-child {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.painel-dashboard-grade {
  display: grid;
  gap: var(--space-5);
}

.painel-dashboard-cartao {
  padding: var(--space-5);
}

.painel-dashboard-cartao-cabecalho {
  margin-bottom: var(--space-4);
}

.painel-dashboard-cartao h2 {
  margin-bottom: var(--space-1);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.painel-dashboard-cartao-cabecalho p,
.painel-dashboard-lista p,
.painel-dashboard-vazio p {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.painel-dashboard-lista {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.painel-dashboard-lista li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.painel-dashboard-lista li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--corner-pill);
  background: color-mix(in srgb, var(--accent-default) 16%, var(--surface-raised));
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 750;
}

.painel-dashboard-lista strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.875rem;
}

.painel-dashboard-vazio {
  display: grid;
  min-height: 154px;
  align-content: center;
  justify-items: start;
  gap: var(--space-3);
}

.painel-dashboard-vazio .lucide {
  width: 30px;
  height: 30px;
  color: var(--accent-default);
}

@media (min-width: 768px) {
  .painel-dashboard-grade {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  }
}

.pagina-inicial-marketing {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}

.pagina-inicial-marketing-cabecalho {
  margin-bottom: var(--space-6);
}

.pagina-inicial-marketing-cabecalho h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.pagina-inicial-marketing-cabecalho p {
  color: var(--text-secondary);
}

.pagina-inicial-marketing-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
}

.pagina-inicial-marketing-cartao {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.pagina-inicial-marketing-em-breve {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--corner-pill);
  background: color-mix(in srgb, var(--text-muted) 14%, var(--surface-raised));
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (min-width: 480px) {
  .pagina-inicial-marketing-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pagina-inicial-marketing-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pagina-de-listagem,
.pagina-de-formulario {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}

.pagina-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.pagina-cabecalho h1 {
  letter-spacing: -0.035em;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 1.2;
}

.filtro-de-listagem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.filtro-de-listagem .botao {
  width: fit-content;
}

.listagem-resumo {
  margin: var(--space-4) 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.tabela-rolagem {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.tabela {
  font-size: 0.8125rem;
}

.tabela th {
  padding: var(--space-3) var(--space-4);
  font-size: 0.625rem;
}

.tabela td {
  padding: var(--space-4);
  color: var(--text-secondary);
}

.tabela tbody tr {
  transition: background-color 150ms ease;
}

.tabela tbody tr:hover {
  background: var(--surface-sunken);
}

.acoes-da-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.formulario-acoes {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.pagina-de-formulario > form,
.pagina-de-formulario > .cartao {
  max-width: 760px;
}

.pagina-de-formulario > form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.pagina-de-formulario > .cartao {
  margin-top: var(--space-5);
}

/* Lista de definicao dos detalhes do painel (DON-161): texto sem espaco
   (motivo, e-mail, razao social) quebra dentro da coluna e nunca empurra a
   pagina na horizontal. */
.resumo-do-documento dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Estoque do produto (DON-094) ------------------------------------------- */
.pagina-estoque {
  width: 100%;
  max-width: 1180px;
}

.estoque-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.estoque-item,
.estoque-item > .cartao {
  min-width: 0;
}

.estoque-item > .cartao {
  height: 100%;
}

.estoque-item .cartao-corpo {
  display: grid;
  gap: var(--space-4);
}

.estoque-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.estoque-contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.estoque-contador {
  --estoque-acento: var(--border-strong);

  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--estoque-acento);
  border-radius: 10px;
  background: var(--surface-sunken);
}

.estoque-contador-disponivel {
  --estoque-acento: var(--stock-available);
}

.estoque-contador-baixo,
.estoque-contador-minimo {
  --estoque-acento: var(--stock-low);
}

.estoque-contador-esgotado {
  --estoque-acento: var(--stock-out);
}

.estoque-contador-reservado {
  --estoque-acento: var(--stock-reserved);
}

.estoque-contador-consignado {
  --estoque-acento: var(--border-strong);
}

.estoque-contador dt {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.estoque-contador dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.estoque-formulario {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.estoque-formulario-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-3);
}

.estoque-formulario .formulario-acoes {
  margin-top: 0;
}

.pagina-login {
  display: grid;
  min-height: calc(100vh - 2 * var(--space-4));
  place-items: center;
}

.pagina-login .cartao {
  width: min(100%, 440px);
  padding: var(--space-6);
  border-radius: 16px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.pagina-login h1 {
  margin-bottom: var(--space-5);
  letter-spacing: -0.035em;
}

.pagina-login form {
  display: grid;
  gap: var(--space-4);
}

/* Casco das telas de acesso (DON-162): o corpo do cartao e uma pilha com o
 * mesmo respiro entre etapas, titulo, texto, alertas e formulario -- antes
 * cada paragrafo colava no seguinte. O titulo perde a margem propria porque o
 * espacamento passa a ser do `gap`. */
.pagina-acesso .cartao-corpo {
  display: grid;
  gap: var(--space-4);
}

.pagina-acesso .cartao-corpo > * {
  margin: 0;
}

.pagina-acesso h1 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.15;
}

.pagina-acesso .etapas {
  margin-bottom: var(--space-2);
}

.pagina-acesso .botao {
  min-height: 44px;
}

.pagina-acesso form:not(.pagina-acesso-secundario) > .botao,
.pagina-acesso-proximo .botao {
  width: 100%;
}

/* Link com cara de botao primario: sem isto a cor de link do cartao vence a
 * do botao e o texto some no fundo escuro. */
.pagina-acesso-proximo .botao-primario {
  color: var(--button-primary-fg);
  text-decoration: none;
}

.pagina-acesso-destino {
  overflow-wrap: anywhere;
}

/* Estado do codigo (prazo e tentativas): faixa discreta, separada do texto
 * corrido para que o numero do contador seja facil de achar. */
.pagina-acesso-estado {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-control);
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pagina-acesso-estado p {
  margin: 0;
}

/* Reenvio: acao secundaria, depois de um divisor e lado a lado com o texto
 * quando cabe. */
.pagina-acesso .pagina-acesso-secundario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.pagina-acesso .pagina-acesso-secundario p {
  margin: 0;
  color: var(--text-secondary);
}

.pagina-acesso .pagina-login-acao-secundaria {
  padding-top: var(--space-2);
  text-align: center;
}

.pagina-acesso .pagina-login-acao-secundaria a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-link);
}

/* Tela de acesso dividida (DON-163): lado da marca no tom da barra lateral do
 * painel + lado do formulario. O <main> desta tela (e so dele) perde a largura
 * maxima e o respiro da loja, para o lado escuro ir de borda a borda. O
 * seletor repete o de storefront-mono.css com a classe a mais: e ele que
 * define o respiro, e so assim esta regra ganha dele. As cores vem dos tokens
 * --acesso-marca-*, que guardam o tom do painel mesmo dentro da superficie
 * monocromatica da loja (ver tokens.css). Cada var() traz uma reserva: se o
 * navegador servir um tokens.css antigo do cache, o lado continua escuro.
 */
.superficie-site main#conteudo.conteudo-acesso {
  max-width: none;
  padding: 0;
}

.pagina-login.pagina-acesso {
  min-height: 100vh;
  grid-template-rows: auto 1fr;
  place-items: stretch;
}

/* No celular a marca e uma faixa curta no topo: identidade sem empurrar o
 * formulario para baixo da dobra. */
.acesso-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--acesso-marca-acento, var(--ochre-500)) 16%, transparent), transparent 60%),
    var(--acesso-marca-bg, var(--sidebar-bg));
  color: var(--acesso-marca-fg, var(--sidebar-fg));
}

.acesso-marca .painel-marca-acento {
  color: var(--acesso-marca-acento, var(--ochre-500));
}

.acesso-marca-nome {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.acesso-marca-frase {
  margin: 0;
  color: var(--acesso-marca-fg-suave, var(--sidebar-grupo-fg));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.acesso-marca-detalhe {
  display: none;
  margin: 0;
  color: var(--acesso-marca-fg-suave, var(--sidebar-grupo-fg));
}

.acesso-conteudo {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-4) var(--space-6);
}

.acesso-tema {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* Desktop: as duas metades lado a lado. A marca vai para o pe do lado escuro,
 * grande, com a frase no topo e um fio no acento entre as duas -- e o elemento
 * que identifica a tela sem logo. O cartao perde a moldura: o lado claro
 * inteiro ja e a superficie do formulario. Em 1024 px, e nao em 768: no tablet
 * em pe as duas metades espremeriam o formulario, e a faixa do topo serve. */
@media (min-width: 1024px) {
  .pagina-login.pagina-acesso {
    grid-template-columns: minmax(340px, 5fr) 7fr;
    grid-template-rows: 1fr;
  }

  .acesso-marca {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-7);
  }

  .acesso-marca-frase {
    order: -1;
    margin-bottom: auto;
  }

  .acesso-marca-nome {
    font-size: clamp(3rem, 2rem + 3vw, 4.75rem);
  }

  .acesso-marca-nome::before {
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-full);
    background-color: var(--acesso-marca-acento, var(--ochre-500));
    content: "";
  }

  .acesso-marca-detalhe {
    display: block;
    max-width: 32ch;
  }

  .acesso-conteudo {
    padding: var(--space-8) var(--space-6);
  }

  .acesso-tema {
    top: var(--space-5);
    right: var(--space-5);
  }

  .pagina-acesso .cartao {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

.erro {
  border-radius: 16px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

@media (min-width: 768px) {
  body:has(.painel-topbar) {
    grid-template-columns: 272px minmax(0, 1fr);
    grid-template-areas:
      "sidebar topbar"
      "sidebar main"
      "sidebar footer";
  }

  body:has(.painel-topbar) nav[aria-label="Menu administrativo"] {
    min-height: 100vh;
    background: var(--sidebar-bg);
  }

  body:has(.painel-topbar) .painel-menu {
    position: sticky;
    top: 0;
    min-height: 100vh;
  }

  body:has(.painel-topbar) main#conteudo {
    padding: 30px var(--space-7) 56px;
  }

  body:has(.painel-topbar) > footer {
    padding-inline: var(--space-7);
  }

  .painel-identidade-lateral {
    display: block;
    margin: calc(var(--space-5) * -1) calc(var(--space-3) * -1) var(--space-5);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-fg);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
}

html.tema-pronto body,
html.tema-pronto .painel-topbar,
html.tema-pronto .cartao,
html.tema-pronto .tabela-rolagem,
html.tema-pronto .filtro-de-listagem,
html.tema-pronto .campo-entrada,
html.tema-pronto .campo-selecao {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Painel > Marketing > Chamadas (DON-140). Mobile first: uma coluna ate
   1024px, duas chamadas lado a lado a partir dai. */
.marketing-chamadas {
  max-width: 1560px;
}

.marketing-chamadas-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
}

@media (min-width: 1024px) {
  .marketing-chamadas-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.marketing-chamada {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  min-width: 0;
}

.marketing-chamada form {
  display: grid;
  gap: var(--space-4);
}

.marketing-chamada-ativa-rotulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.marketing-chamada-preview {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.marketing-chamada-preview h3 {
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.marketing-chamada-preview-cartao {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--surface-sunken);
  min-width: 0;
}

.marketing-chamada-preview-cartao p {
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
 * Produtos -- listagem com foto e edicao em secoes (DON-163)
 *
 * Tudo aqui vive sob classes do painel (`.produtos-lista`, `.produto-*`,
 * `.formulario-secao`, `.acoes-da-linha`): a loja publica nao usa nenhuma.
 * --------------------------------------------------------------------- */

/* Cabecalho de pagina com sobrancelha: mesmo desenho do dashboard, para as
 * telas do painel falarem a mesma lingua. */
.pagina-cabecalho {
  align-items: flex-end;
}

.pagina-cabecalho-texto {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.pagina-cabecalho-texto h1 {
  overflow-wrap: anywhere;
}

.pagina-sobrancelha {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pagina-cabecalho .botao svg,
.formulario-acoes .botao svg {
  width: 1rem;
  height: 1rem;
}





/* --- acoes da linha: discretas ate a pessoa decidir -------------------- */

/* Em toda listagem do painel, Inativar e Excluir eram botoes cheios em
 * vermelho, repetidos em cada linha: a tabela inteira gritava. Na linha o
 * gatilho vira contorno; o vermelho cheio fica para o botao de confirmar,
 * dentro do dialogo, que e onde a decisao acontece. */
.acoes-da-linha {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.acoes-da-linha .botao,
.acao-da-linha {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.acoes-da-linha .botao:hover,
.acao-da-linha:hover {
  border-color: var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.acoes-da-linha .botao-perigo {
  color: var(--input-error-fg);
}

.acoes-da-linha .botao-perigo:hover {
  border-color: var(--input-border-error);
  background: var(--feedback-error-bg);
  color: var(--input-error-fg);
}

/* Inativar volta atras a qualquer momento: o gatilho fica neutro e so o
 * Excluir, que nao tem volta, leva a cor de perigo na linha. O botao de
 * confirmar dentro do dialogo continua com a variante que a macro recebeu. */
.acoes-da-linha [data-acao-reversivel] > .botao-perigo,
.acoes-da-linha [data-acao-reversivel] > .botao-perigo:hover {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
}

.acoes-da-linha [data-acao-reversivel] > .botao-perigo:hover {
  border-color: var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* --- listagem de produtos ------------------------------------------------ */

/* A legenda da tabela continua para leitor de tela (e o nome da regiao
 * rolavel); na tela, o titulo e o resumo logo acima ja dizem o mesmo. */
/* Toda listagem do painel ja tem o h1 logo acima: a legenda continua para o
 * leitor de tela, mas a vista ela repetia o titulo solta sobre a tabela. */
.pagina-de-listagem .tabela-legenda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pagina-de-listagem .tabela td {
  vertical-align: middle;
}

.produtos-lista .tabela th:last-child {
  text-align: end;
}

.produto-identidade {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.produto-identidade:hover .produto-nome {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A miniatura e o "passe-partout" da peca: quadro fixo, borda fina por dentro
 * e a foto cortada ao centro. Foto alta ou larga nao mexe na altura da linha. */
.produto-miniatura {
  position: relative;
  display: grid;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.produto-miniatura::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.produto-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-miniatura-inicial {
  color: var(--accent-text-grande);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
}

.produto-identidade-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.produto-nome {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 700;
}

.produto-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.produto-sku code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 0.75rem;
}

/* No celular a tabela vira lista de cartoes: quatro colunas a 375 px fariam a
 * foto e o nome dividirem espaco com botoes. A linha continua sendo <tr>, entao
 * a semantica de tabela fica para o leitor de tela. Mobile-first, como o resto
 * do arquivo: o cartao e a regra base, e a tabela volta a partir de 768 px. */
.produtos-lista .tabela-rolagem {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.produtos-lista .tabela thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.produtos-lista .tabela {
  display: block;
}

.produtos-lista .tabela tbody {
  display: grid;
  gap: var(--space-3);
}

.produtos-lista .tabela tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
}

.produtos-lista .tabela td {
  padding: 0;
  border-top: 0;
}

.produtos-lista .produto-celula,
.produtos-lista .acoes-celula {
  grid-column: 1 / -1;
}

.produtos-lista .acoes-da-linha {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.acoes-da-linha .botao,
.acao-da-linha {
  min-height: 44px;
}

@media (min-width: 768px) {
  .produtos-lista .tabela-rolagem {
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  }

  .produtos-lista .tabela thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .produtos-lista .tabela {
    display: table;
  }

  .produtos-lista .tabela tbody {
    display: table-row-group;
  }

  .produtos-lista .tabela tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .produtos-lista .tabela td {
    padding: var(--space-4);
    border-top: 1px solid var(--table-row-border);
  }

  .produtos-lista .acoes-da-linha {
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
  }

  /* `#conteudo .botao` (componentes.css) poe 44px em todo botao do
   * conteudo, e o painel tambem tem <main id="conteudo">: sem o id aqui, o
   * botao de um <form> da linha ficava mais alto que o link Editar. */
  .acoes-da-linha .botao,
  #conteudo .acoes-da-linha .botao,
  .acao-da-linha {
    min-height: 36px;
  }
}

/* --- edicao: painel lateral + secoes ------------------------------------- */

.produto-edicao {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.produto-resumo {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.produto-capa {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  overflow: hidden;
  margin: 0;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.produto-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.produto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-capa-vazia {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  place-items: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.produto-capa-vazia svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-default);
}

.produto-resumo-nota {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.produto-atalhos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.produto-atalhos li + li {
  border-top: 1px solid var(--border-subtle);
}

.produto-atalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}

.produto-atalho:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.produto-atalho svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-muted);
}

.produto-atalho-texto {
  flex: 1;
  min-width: 0;
}

.produto-atalho-contagem {
  min-width: 1.5rem;
  padding: 1px 8px;
  border-radius: var(--corner-pill);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.produto-formulario {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

/* Cada secao e um cartao com titulo e uma linha curta dizendo para que serve.
 * O filete ocre e o mesmo das telas de acesso: a marca aparece no detalhe, nao
 * no fundo. */
.formulario-secao {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.formulario-secao-cabecalho {
  display: grid;
  gap: var(--space-1);
}

.formulario-secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.formulario-secao-titulo::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-default);
}

.formulario-secao-descricao {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.formulario-grade {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.campo-texto-longo {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.5;
}

.opcoes-compactas .opcoes-lista {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}

.opcoes-compactas .opcao-cartao {
  min-height: 44px;
  padding-block: var(--space-2);
}

.opcoes-compactas .opcao-cartao-titulo {
  font-size: 0.875rem;
  font-weight: 600;
}

/* A barra de Salvar acompanha a rolagem: trocar so a categoria nao pode
 * exigir descer tres cartoes ate o fim do formulario. */
.produto-formulario .formulario-acoes {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: flex-end;
  margin-top: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 -6px 18px color-mix(in srgb, var(--text-primary) 8%, transparent);
  backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
  .formulario-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Abaixo do desktop a capa fica pequena, ao lado dos atalhos: em coluna
 * unica, uma foto quadrada da largura da tela empurraria o formulario para
 * baixo da primeira dobra. A partir de 1024 px o resumo vira coluna. */
.produto-resumo {
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
}

.produto-capa-vazia {
  padding: var(--space-2);
  font-size: 0.6875rem;
}

/* No desktop o resumo vai para a direita e acompanha a rolagem: a capa e os
 * atalhos continuam a vista enquanto a pessoa desce pelas secoes. */
@media (min-width: 1024px) {
  .produto-edicao {
    grid-template-columns: minmax(0, 1fr) 300px;
    max-width: 1180px;
  }

  .produto-resumo {
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: var(--space-5);
    grid-column: 2;
    grid-row: 1;
  }

  .produto-formulario {
    grid-column: 1;
    grid-row: 1;
  }

  .produto-capa-vazia {
    padding: var(--space-4);
    font-size: 0.8125rem;
  }
}


/* ---------------------------------------------------------------------
 * Campos do painel (DON-163)
 *
 * So `body.superficie-painel` (admin/base.html): a loja e as telas de acesso
 * usam as mesmas macros de campo e nao mudam.
 *
 * - Todo controle tem 44px, o mesmo alvo do botao: na barra de filtros o
 *   "Filtrar" alinha com o select e com a busca.
 * - Fundo branco e borda --border-strong: o cinza da pagina dentro de um
 *   cartao branco quase nao se distinguia do proprio cartao.
 * - O select perde a seta nativa, que ficava colada na borda e deixava o
 *   texto correr por baixo dela. A seta nova sao dois gradientes na cor do
 *   texto: segue o tema sem sprite nenhum (a objecao registrada em
 *   componentes.css) e continua sendo o sinal de que aquilo abre uma lista.
 * --------------------------------------------------------------------- */
.superficie-painel .campo {
  gap: 6px;
}

.superficie-painel .campo-rotulo {
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.superficie-painel .campo-entrada {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-color: var(--border-strong);
  border-radius: 10px;
  background-color: var(--surface-raised);
  font-size: 1rem;
  line-height: 1.4;
}

.superficie-painel .campo-entrada:hover:not(:focus):not(:disabled) {
  border-color: var(--text-muted);
}

.superficie-painel .campo-entrada:disabled {
  border-color: var(--border-default);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}

.superficie-painel .campo-com-erro .campo-entrada {
  border-color: var(--input-border-error);
}

.superficie-painel .campo-com-erro .campo-entrada:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-error) 18%, transparent);
}

.superficie-painel .campo-selecao:not([multiple]) {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) calc(50% + 1px),
    calc(100% - 16px) calc(50% + 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Nada escolhido ("Selecione uma categoria", "Todas as situacoes"): o texto
 * fica abafado como um placeholder, para nao parecer um valor gravado. */
.superficie-painel .campo-selecao:has(option[value=""]:checked) {
  color: var(--input-placeholder);
}

.superficie-painel .campo-selecao option {
  color: var(--input-fg);
}

.superficie-painel .campo-dica,
.superficie-painel .campo-erro {
  font-size: 0.75rem;
  line-height: 1.4;
}

.superficie-painel .formulario-grade {
  row-gap: var(--space-5);
}

.superficie-painel .filtro-de-listagem .botao {
  min-height: 44px;
}


/* ---------------------------------------------------------------------
 * Alerta flutuante do painel (DON-163) -- `flutuante=true` em alerta.html
 *
 * A confirmacao de uma acao ("Produto salvo") deixa de ser uma faixa verde
 * que empurra o formulario para baixo e vira um aviso no canto, logo abaixo
 * da barra do topo -- e nao embaixo, onde a barra fixa de Salvar mora.
 *
 * So depois que alerta.js marca o documento (`html[data-alerta]`): sem o
 * modulo nao ha botao de fechar nem relogio, e um aviso fixo que nao sai
 * seria pior que a faixa de antes.
 *
 * Superficie neutra com o icone na cor da variante, no lugar do filete
 * lateral: a variante continua dita por forma (icone) e texto, nunca so
 * pela cor.
 * --------------------------------------------------------------------- */
html[data-alerta] .superficie-painel .alerta-flutuante {
  position: fixed;
  z-index: 90;
  top: calc(72px + var(--space-3));
  inset-inline: var(--space-4);
  align-items: center;
  overflow: hidden;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow:
    0 18px 40px -16px color-mix(in srgb, var(--text-primary) 32%, transparent),
    0 2px 6px color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
  animation: alerta-entra 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-alerta] .superficie-painel .alerta-flutuante .alerta-icone {
  flex-basis: 2rem;
  height: 2rem;
  border: 0;
  font-size: 0.875rem;
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-sucesso .alerta-icone {
  background: var(--alerta-sucesso-bg);
  color: var(--alerta-sucesso-fg);
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-aviso .alerta-icone {
  background: var(--alerta-aviso-bg);
  color: var(--alerta-aviso-fg);
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-info .alerta-icone {
  background: var(--alerta-info-bg);
  color: var(--alerta-info-fg);
}

html[data-alerta] .superficie-painel .alerta-flutuante .alerta-titulo {
  font-size: 0.875rem;
}

html[data-alerta] .superficie-painel .alerta-flutuante .alerta-mensagem {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

html[data-alerta] .superficie-painel .alerta-flutuante .alerta-dispensar {
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1)
    calc(var(--space-2) * -1) 0;
  border-radius: 10px;
  color: var(--text-muted);
}

html[data-alerta] .superficie-painel .alerta-flutuante .alerta-dispensar:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* Barra de tempo: encolhe pela duracao que alerta.js le de
 * `data-dispensar-em`. Some quando o relogio para (`.alerta-fixo`). */
html[data-alerta] .superficie-painel .alerta-flutuante::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--alerta-sucesso-border);
  content: "";
  transform-origin: left center;
  animation: alerta-tempo var(--alerta-duracao, 6000ms) linear forwards;
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-aviso::after {
  background: var(--alerta-aviso-border);
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-info::after {
  background: var(--alerta-info-border);
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-fixo::after {
  display: none;
}

html[data-alerta] .superficie-painel .alerta-flutuante.alerta-saindo {
  animation: alerta-sai 200ms ease-in forwards;
}

@keyframes alerta-entra {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

@keyframes alerta-sai {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@keyframes alerta-tempo {
  to {
    transform: scaleX(0);
  }
}

@media (min-width: 768px) {
  html[data-alerta] .superficie-painel .alerta-flutuante {
    inset-inline: auto var(--space-5);
    width: min(26rem, calc(100% - 2 * var(--space-5)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-alerta] .superficie-painel .alerta-flutuante {
    animation: none;
  }

  html[data-alerta] .superficie-painel .alerta-flutuante::after {
    display: none;
  }
}


/* ---------------------------------------------------------------------
 * Ritmo das paginas do painel (DON-163)
 *
 * Cada bloco de uma listagem trazia a propria margem -- ou nenhuma: em
 * Permissoes o titulo do modulo encostava na tabela, em Imagens o formulario
 * de envio encostava na lista, e o estado vazio colava no que vinha antes.
 * O espaco agora e do recipiente (`gap`), e nao de cada filho: um bloco novo
 * entra ja espacado, sem ninguem lembrar de margem.
 * --------------------------------------------------------------------- */
.superficie-painel .pagina-de-listagem,
.superficie-painel .pagina-de-formulario,
.superficie-painel .pagina-de-detalhe {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.superficie-painel :is(.pagina-de-listagem, .pagina-de-formulario, .pagina-de-detalhe) > * {
  margin-block: 0;
}

.superficie-painel :is(.pagina-de-listagem, .pagina-de-formulario, .pagina-de-detalhe) > .pagina-cabecalho {
  margin-bottom: var(--space-2);
}

/* Titulo de grupo (o modulo, em Permissoes) respira mais acima do que abaixo:
 * ele pertence a tabela que vem depois, nao a que veio antes. */
.superficie-painel :is(.pagina-de-listagem, .pagina-de-formulario, .pagina-de-detalhe) > h2:not(:first-child) {
  margin-top: var(--space-4);
}

/* O resumo ("12 produtos -- pagina 1 de 2") descreve a tabela logo abaixo:
 * fica mais perto dela do que do filtro. */
.superficie-painel .pagina-de-listagem > .listagem-resumo {
  margin-bottom: calc(var(--space-2) * -1);
}

/* O <input type="date"> nasce 2px mais alto que os outros controles: na
 * barra de filtros de Pedidos, Auditoria e Logs a data descia da linha. */
.superficie-painel input.campo-entrada {
  height: 44px;
}

/* ---------------------------------------------------------------------
 * Seletor de item -- produto base e variantes em cartoes (seletor-de-item.html)
 * --------------------------------------------------------------------- */
.seletor-de-item-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seletor-de-item-cartao {
  display: grid;
  gap: 2px;
  align-content: start;
  height: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.seletor-de-item-cartao:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--text-primary) 30%, transparent);
  transform: translateY(-1px);
}

.seletor-de-item-cartao:active {
  transform: translateY(0) scale(0.99);
}

/* O item em que a pessoa esta: borda e filete na cor de acao, e o texto da
 * sobrancelha diz "Editando" sem depender da cor. */
.seletor-de-item-cartao[aria-current="page"] {
  border-color: var(--action-primary);
  box-shadow: inset 0 0 0 1px var(--action-primary);
}

.seletor-de-item-sobrancelha {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seletor-de-item-cartao[aria-current="page"] .seletor-de-item-sobrancelha::after {
  content: " · editando";
  color: var(--text-link);
}

.seletor-de-item-nome {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seletor-de-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .seletor-de-item-cartao,
  .seletor-de-item-cartao:hover,
  .seletor-de-item-cartao:active {
    transform: none;
  }
}


/* O estado vazio empilhava titulo, frase e acao a 8px um do outro: o botao
 * encostava na frase. A acao ganha distancia propria -- e o passo seguinte,
 * nao mais uma linha do texto. */
.superficie-painel .estado-vazio > :is(.botao, a.botao, form) {
  margin-top: var(--space-3);
}


/* ---------------------------------------------------------------------
 * Painel de metricas (painel-de-metricas.html) -- DON-163
 * --------------------------------------------------------------------- */
.painel-de-metricas {
  display: grid;
  gap: var(--space-3);
}

.painel-de-metricas-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.painel-de-metricas-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.painel-de-metricas-total {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.painel-de-metricas-total strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.painel-de-metricas-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.metrica {
  display: grid;
  gap: var(--space-2);
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.metrica:hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--text-primary) 32%, transparent);
  transform: translateY(-1px);
}

.metrica:active {
  transform: translateY(0) scale(0.99);
}

/* O filtro aplicado agora: o cartao fica marcado, e o texto continua dizendo
 * qual e -- a marca e reforco, nao o unico sinal. */
.metrica[aria-current="true"] {
  border-color: var(--action-primary);
  box-shadow: inset 0 0 0 1px var(--action-primary);
}

.metrica-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metrica-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--metrica-cor);
  box-shadow: 0 0 0 3px var(--metrica-fundo);
}

.metrica-valor {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.metrica-barra {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--surface-sunken);
  appearance: none;
}

.metrica-barra::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--surface-sunken);
}

.metrica-barra::-webkit-progress-value {
  border-radius: 999px;
  background: var(--metrica-cor);
}

.metrica-barra::-moz-progress-bar {
  border-radius: 999px;
  background: var(--metrica-cor);
}

.metrica-parte {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.metrica-rascunho {
  --metrica-cor: var(--pill-draft-fg);
  --metrica-fundo: var(--pill-draft-bg);
}

.metrica-pendente {
  --metrica-cor: var(--pill-pending-fg);
  --metrica-fundo: var(--pill-pending-bg);
}

.metrica-aprovado {
  --metrica-cor: var(--pill-approved-fg);
  --metrica-fundo: var(--pill-approved-bg);
}

.metrica-recusado {
  --metrica-cor: var(--pill-rejected-fg);
  --metrica-fundo: var(--pill-rejected-bg);
}

.metrica-concluido {
  --metrica-cor: var(--pill-done-fg);
  --metrica-fundo: var(--pill-done-bg);
}

@media (min-width: 768px) {
  .painel-de-metricas-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .metrica,
  .metrica:hover,
  .metrica:active {
    transform: none;
  }
}

/* Barra de filtros: com `align-items: end`, o campo que tem dica embaixo
 * (Destinatario: "Ultimos digitos do numero") subia e saia da linha dos
 * outros. Agora todos alinham pelo topo, o rotulo fica numa linha so, e o
 * botao desce a altura de um rotulo para casar com os controles. */
.superficie-painel .filtro-de-listagem {
  align-items: start;
}

.superficie-painel .filtro-de-listagem .campo-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superficie-painel .filtro-de-listagem > .botao {
  margin-top: calc(0.8125rem * 1.3 + 6px);
}


/* A pagina de detalhe (sessao e envio do WhatsApp) nao tinha regra nenhuma:
 * nem a largura das outras, nem o ritmo acima. Agora e a mesma familia. */
.superficie-painel .pagina-de-detalhe {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}

/* Acoes do cabecalho (cabecalho-da-pagina.html): sempre a direita do
 * titulo, alinhadas a ele, e quebram para baixo no celular. */
.pagina-cabecalho-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pagina-cabecalho-acoes .botao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pagina-cabecalho-acoes .botao svg {
  width: 1rem;
  height: 1rem;
}


/* ---------------------------------------------------------------------
 * Tour guiado (componentes/tour.html + comportamentos/tour.js) -- DON-163
 *
 * O destaque e um recorte: uma caixa sem fundo sobre o elemento, com uma
 * sombra gigante que escurece o resto da tela. `pointer-events: none` -- o
 * elemento destacado continua clicavel, porque o tour quer que a pessoa FACA
 * o passo. O balao fica acima do destaque e e o unico ponto de foco.
 * --------------------------------------------------------------------- */
.tour-destaque {
  position: fixed;
  z-index: 95;
  border-radius: 12px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--action-primary) 55%, transparent),
    0 0 0 100vmax color-mix(in srgb, var(--surface-inverse) 58%, transparent);
  pointer-events: none;
  transition: top 320ms cubic-bezier(0.16, 1, 0.3, 1), left 320ms cubic-bezier(0.16, 1, 0.3, 1),
    width 320ms cubic-bezier(0.16, 1, 0.3, 1), height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-destaque[hidden],
.tour-balao[hidden] {
  display: none;
}

.tour-balao {
  position: fixed;
  z-index: 96;
  inset: auto var(--space-4) var(--space-4);
  display: grid;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--text-primary) 45%, transparent);
  color: var(--text-primary);
  animation: tour-entra 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-balao:focus {
  outline: 0;
}

/* O balao recebe o foco so para o leitor de tela anunciar o passo; quem
 * navega por teclado segue para os botoes dele, que tem o anel proprio. */
.tour-balao:focus-visible {
  outline: 0;
}

.tour-balao[data-lado="topo"] {
  inset: var(--space-4) var(--space-4) auto;
}

.tour-balao-contador {
  margin: 0;
  color: var(--text-link);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-balao-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tour-balao-texto {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.tour-balao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.tour-balao-navegacao {
  display: inline-flex;
  gap: var(--space-2);
}

.tour-balao-navegacao .botao[hidden] {
  display: none;
}

.tour-balao-pular {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.tour-balao-pular:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* A seta aponta para o elemento; o JS diz onde (`--tour-seta`) e de que lado
 * o balao ficou (`data-lado`). No celular o balao e uma folha no rodape e
 * nao tem seta. */
.tour-balao::before {
  position: absolute;
  left: var(--tour-seta, 24px);
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  content: "";
  transform: translateX(-50%) rotate(45deg);
  display: none;
}

@media (min-width: 768px) {
  .tour-balao {
    inset: auto;
    width: min(340px, calc(100vw - 2 * var(--space-4)));
  }

  .tour-balao[data-lado="embaixo"]::before {
    top: -7px;
    display: block;
    border-right: 0;
    border-bottom: 0;
  }

  .tour-balao[data-lado="em-cima"]::before {
    bottom: -7px;
    display: block;
    border-top: 0;
    border-left: 0;
  }
}

@keyframes tour-entra {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-destaque {
    transition: none;
  }

  .tour-balao {
    animation: none;
  }
}