/* ==========================================================================
   Fashion Finder — Camada editorial (redesign 2026-10)
   --------------------------------------------------------------------------
   Pedido da Marina: um front com linguagem de revista de moda — foto grande,
   muito branco, tipografia como identidade, navegação mínima. Princípios,
   tokens e o que mudou por tela: docs/REDESIGN_EDITORIAL.md.

   COMO ESTE ARQUIVO SE RELACIONA COM styles.css
   - styles.css continua sendo o design system e a estrutura (layout, estados,
     regras que os testes leem). A virada de linguagem começa nos TOKENS do
     :root de lá (preto/branco, Inter, raio 0, sem sombra) — o que já recolore
     quase tudo sozinho, inclusive telas que outras frentes estão mexendo.
   - Este arquivo carrega DEPOIS de styles.css e só ajusta componentes:
     tipografia de rótulo, botões, cabeçalho, barra de navegação, cartão de
     produto. Nada aqui muda display/visibilidade de .view-panel, [hidden] ou
     .somente-*: o que aparece ou não continua decidido por styles.css + JS.
   - Separado de propósito: outras frentes editam styles.css em paralelo; uma
     camada à parte deixa o merge sem conflito.
   - Área segura: só pelos tokens --ff-safe-* (contrato de docs/MOBILE.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
:root {
  /* Rótulo editorial: CAIXA ALTA pequena com tracking (menus, metadados,
     botões). Uma definição só, reaproveitada por todo o arquivo. */
  --ed-caps-size: var(--fs-micro);      /* 11px */
  --ed-caps-tracking: 0.1em;
  --ed-header-h: 52px;
  --ed-nav-h: 60px;
  --ed-btn-h: 48px;
  --ed-fio: 1px solid var(--border-glass);
  --ed-fio-forte: 1px solid var(--text-main);
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: 0;
}

::selection { background: #000; color: #fff; }

/* Foco sempre visível e sempre igual: contorno preto de 2px afastado do
   elemento (funciona sobre foto e sobre branco por causa do halo branco). */
:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #fff;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; }

/* Raio 0 vale para tudo — exceto o que é círculo de verdade. */
.scanning-processing-dots span,
.ai-indicator-activity span,
.ia-badge::before,
.slider,
.slider:before,
.toast-overlay-icon,
.photo-confirm-icon { border-radius: var(--radius-circle); }

/* Literais que não passavam pelos tokens */
.motivo-chips-real.chips-inline label,
.aviso-offline,
.closet-mala-chip,
.xray-barra,
.xray-barra span,
.admin-badge { border-radius: 0; }

/* Títulos editoriais: Inter peso 500 (mesma família do resto). */
h1, h2, h3 { font-weight: 500; }

/* Sem sombra nem desfoque em lugar nenhum (o que restou fora dos tokens) */
.toast-overlay,
.aviso-offline,
.seletor-foto-folha,
.closet-folha { box-shadow: none; }

/* --------------------------------------------------------------------------
   2. Cabeçalho — fino, branco, logo à esquerda, fio de 1px embaixo
   -------------------------------------------------------------------------- */
header {
  min-height: calc(var(--ed-header-h) + var(--ff-safe-top));
  padding-top: max(var(--sp-2), var(--ff-safe-top));
  padding-bottom: var(--sp-2);
  background: var(--bg-main);
  border-bottom: var(--ed-fio);
}

.brand { gap: 10px; }
.brand-logo {
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
}
/* Monograma do arquivo é cinza (#8D8D8D): no cabeçalho ele é preto, como a
   tipografia — sem caixa preta em volta. */
.brand-logo img { filter: brightness(0) saturate(100%); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);          /* 21px */
  letter-spacing: 0;
  color: var(--text-main);
}

/* Selo de Homologação: continua impossível de não ver — retângulo cheio,
   cor de alerta (único lugar com cor na interface, de propósito). */
.badge-homolog {
  border-radius: 0;
  font-size: var(--fs-micro);
  padding: 3px 8px;
  letter-spacing: var(--tracking-caps);
}

/* Botões só-ícone do cabeçalho (painel interno, em Homologação) */
#header-admin-btn {
  border: 0;
  background: none;
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}

/* Voltar / Nova busca: texto em caixa alta pequena, sem pílula */
.btn-back-landing {
  font-size: var(--ed-caps-size);
  font-weight: 500;
  letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase;
  color: var(--text-main);
  padding: 0 var(--sp-1);
}
.btn-back-landing:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.btn-back-landing svg { width: 11px; height: 11px; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   3. Barra inferior (celular) — ícone fino + rótulo em caixa alta pequena;
      ativo = preto, peso maior e sublinhado. Nunca ambíguo.
   -------------------------------------------------------------------------- */
.bottom-nav {
  height: calc(var(--ed-nav-h) + var(--ff-safe-bottom));
  padding-bottom: var(--ff-safe-bottom);
  background: var(--bg-main);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: var(--ed-fio);
}

.nav-item {
  gap: 5px;
  min-height: var(--ed-nav-h);
  padding: 0 var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-micro);          /* 10.5px — rótulo de barra */
  font-weight: 500;
  letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase;
  line-height: 1;
}
.nav-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.3;
}
.nav-item:hover { color: var(--text-main); }
.nav-item.active {
  color: var(--text-main);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.nav-item.active svg { stroke-width: 1.6; }

/* O conteúdo rola por baixo da barra: mesma folga, agora para 60px. */
.app-content {
  padding-bottom: calc(var(--ed-nav-h) + var(--sp-6) + var(--ff-safe-bottom));
}

/* --------------------------------------------------------------------------
   4. Desktop — a navegação sobe para a MESMA linha do cabeçalho
      (logo à esquerda, menu em caixa alta no centro), sem ícones.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
  :root { --ed-header-h: 64px; }

  header { padding-top: 0; padding-bottom: 0; }
  .brand-logo { width: 26px; height: 26px; }
  .brand-name { font-size: var(--fs-2xl); }

  .bottom-nav {
    position: absolute;
    top: var(--ff-safe-top);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    order: 0;
    height: var(--ed-header-h);
    padding: 0;
    gap: var(--sp-6);
    border: 0;
    background: none;
    z-index: 150;
  }
  .nav-item {
    min-height: var(--ed-header-h);
    padding: 0 var(--sp-1);
    gap: 0;
    font-size: var(--ed-caps-size);
    border-bottom: 0;
    white-space: nowrap;
  }
  .nav-item svg { display: none; }
  .nav-item.active { border-bottom-color: transparent; }

  .app-content {
    padding-top: var(--sp-6);
    padding-bottom: calc(var(--sp-8) + var(--ff-safe-bottom));
  }
}

/* --------------------------------------------------------------------------
   5. Home (parte 2/4, 23/10 — referência pedida pela Marina: Zara)
      Foto de campanha de ponta a ponta, título por cima da própria foto,
      busca só com a linha de baixo, "inspire-se" colado nas bordas.
   -------------------------------------------------------------------------- */
#view-landing .landing-copy { gap: var(--sp-5); }
/* O hero (foto + cartão de texto) é composição aprovada pela Marina: fica
   como está — só o entorno muda. */
#view-landing .hero-title { font-weight: 400; letter-spacing: var(--tracking-tight); }
#view-landing .hero-subtitle { font-size: var(--fs-sm); color: var(--text-muted); max-width: 34ch; }

/* Botão de foto: preto, altura única, CAIXA ALTA */
.btn-camera-principal,
.btn-text-search,
.closet-btn,
#concierge-enviar {
  min-height: var(--ed-btn-h);
  border-radius: 0;
  font-size: var(--ed-caps-size);
  letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase;
  font-weight: 600;
}
.closet-btn-secundario { background: #fff; color: #000; border: var(--ed-fio-forte); }

/* Busca por texto: campo só com o fio de baixo, rótulo em caixa alta */
.text-search-card { background: none; border: 0; padding: 0; box-shadow: none; }
.text-search-label {
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600; color: var(--text-muted);
}
.text-search-input {
  border: 0; border-bottom: var(--ed-fio-forte); border-radius: 0;
  background: transparent; padding-left: 0; font-size: var(--fs-base);
}
.text-search-input:focus { border-bottom-width: 2px; box-shadow: none; }
.text-search-divider { color: var(--text-dim); }

/* "Ou inspire-se": fotos coladas, legenda em caixa alta embaixo */
.presets-section .section-title {
  font-family: var(--font-sans); font-size: var(--ed-caps-size); font-weight: 600;
  letter-spacing: var(--ed-caps-tracking); text-transform: uppercase; color: var(--text-main);
}
.presets-grid { gap: 2px; margin-inline: calc(-1 * var(--gutter)); }
.preset-card { border-radius: 0; box-shadow: none; }
.preset-card:hover { transform: none; box-shadow: none; }
.preset-overlay { background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 55%); }
.preset-title {
  font-family: var(--font-sans); font-style: normal; font-size: var(--ed-caps-size);
  font-weight: 600; letter-spacing: var(--ed-caps-tracking); text-transform: uppercase;
}

@media (min-width: 960px) {
  .presets-grid { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   6. Resultados (parte 3/4): vitrine de loja — 2 colunas coladas no celular,
      foto 3:4 sem moldura, marca em caixa alta, nome e preço pequenos.
      "Você buscou", filtros e avisos viram linhas de texto, sem caixas.
   -------------------------------------------------------------------------- */
#view-results .results-hero-title { font-weight: 400; letter-spacing: var(--tracking-tight); }
#view-results .results-query-preview,
#view-results .results-query-details {
  border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none;
}
#view-results .results-query-eyebrow,
.results-ordenacao-label,
.results-secao-label {
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600; color: var(--text-dim);
}
#view-results .results-query-title { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.btn-filtros-toggle {
  border: 0; border-radius: 0; background: none; padding-left: 0; min-height: 44px;
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.aviso-sem-match-forte {
  grid-column: 1 / -1; background: none; border: 0; border-radius: 0; padding: 0;
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400;
}

.resultados-secao { gap: var(--sp-5) 2px; margin-inline: calc(-1 * var(--gutter)); }
.match-card-real-topo { gap: var(--sp-2); }
.match-card-image-box { border-radius: 0; aspect-ratio: 3 / 4; background: var(--bg-card-hover); }
.match-card-image-box img { border-radius: 0; object-fit: cover; }
.match-card-info { padding: 0 var(--sp-2); gap: 4px; }
.match-card-category {
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600; color: var(--text-main);
}
.match-card-name {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted);
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.match-card-price { font-size: var(--fs-sm); font-weight: 600; }
.match-porques .porque { font-size: var(--fs-micro); border-radius: 0; }
.btn-favorito { border-radius: 0; background: none; box-shadow: none; }
.btn-favorito svg { width: 20px; height: 20px; stroke-width: 1.5; }
.btn-buy {
  border-radius: 0; min-height: 40px; font-size: var(--ed-caps-size);
  letter-spacing: var(--ed-caps-tracking); text-transform: uppercase; font-weight: 600;
}
.btn-feedback-resultado { border-radius: 0; }

@media (min-width: 640px) {
  .resultados-secao { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .resultados-secao { grid-template-columns: repeat(4, 1fr); margin-inline: 0; gap: var(--sp-6) var(--sp-3); }
  .match-card-info { padding: 0; }
}

/* --------------------------------------------------------------------------
   7. Perfil, Closet, Planos e formulários (parte 4/4): listas com fio fino,
      campos só com a linha de baixo, títulos de seção em caixa alta.
   -------------------------------------------------------------------------- */
.section-title { font-weight: 400; letter-spacing: var(--tracking-tight); }
.closet-form,
.closet-capsula,
.concierge-pedido,
.planos-card,
.perfil-conta-card,
.estilo-intro + .closet-form {
  border-radius: 0; box-shadow: none;
}
.closet-campo > span,
.closet-mais summary,
.concierge-cores legend,
.closet-look-grupo-titulo,
.closet-capsula-escolha legend {
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600; color: var(--text-muted);
}
.closet-campo input[type="text"],
.closet-campo input[type="number"],
.closet-campo input[type="date"],
.closet-campo select,
.closet-campo textarea {
  border: 0; border-bottom: var(--ed-fio-forte); border-radius: 0; background: transparent;
  padding-left: 0; padding-right: 0;
}
.closet-campo textarea { border: var(--ed-fio); padding: var(--sp-2); }
.closet-filtro {
  border-radius: 0; font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking);
  text-transform: uppercase; font-weight: 600;
}
.closet-abas { background: none; padding: 0; gap: var(--sp-5); border-bottom: var(--ed-fio); border-radius: 0; }
.closet-aba {
  border-radius: 0; padding: 0; min-height: 44px; background: none !important; box-shadow: none !important;
  font-size: var(--ed-caps-size); letter-spacing: var(--ed-caps-tracking); text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.closet-aba[aria-selected="true"] { border-bottom-color: #000; color: #000; }
.closet-peca, .closet-escolha, .closet-look-colagem, .closet-detalhe-imagem, .closet-folha { border-radius: 0; }
.closet-peca { border: 0; background: none; }
.closet-grid { gap: var(--sp-4) 2px; }
.closet-peca .closet-peca-nome { padding-left: 0; padding-right: 0; }

/* Perfil: abas Favoritos/Histórico e botões de conta no mesmo idioma */
.btn-perfil-conta {
  border-radius: 0; min-height: var(--ed-btn-h); font-size: var(--ed-caps-size);
  letter-spacing: var(--ed-caps-tracking); text-transform: uppercase; font-weight: 600;
}
.planos-nome, .concierge-subtitulo { font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Folha de detalhe e mensagens: quadradas, fio preto, sem sombra
   -------------------------------------------------------------------------- */
.closet-folha { border-top: var(--ed-fio-forte); }
.planos-aviso-sim, .concierge-modo-stylist { border-radius: 0; }

/* --------------------------------------------------------------------------
   9. Movimento reduzido — nada desliza, nada pulsa
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tutorial (23/10): "?" discreto no cabeçalho */
.btn-tutorial {
  margin-left: auto; width: 32px; height: 32px; min-width: 32px; padding: 0;
  border: var(--ed-fio-forte); border-radius: var(--radius-circle, 50%); background: none; color: var(--text-main);
  font-size: var(--fs-md); font-weight: 600; line-height: 1; cursor: pointer;
}
.btn-tutorial + .perfil-badge { margin-left: var(--sp-2); }
@media (min-width: 960px) { .btn-tutorial { position: relative; z-index: 160; } }

/* Meu estilo: com 3 estilos marcados, as outras opções ficam apagadas */
.estilo-estilos .concierge-cor:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Tipografia única (24/10): negrito e ênfase seguem o padrão, não o navegador */
b, strong { font-weight: 600; }
em, i { font-style: normal; }