/* ============================================================
   Feira Têxtil — camada do app
   Depende de css/tema-atena.css (tokens + componentes base).
   Aqui NÃO se define cor de marca: tudo sai das variáveis do tema.
   Só entra o que é específico do app: topbar, navegação, folha do
   estande, cotação em lista, comparação, selos, toast.
   ============================================================ */

:root {
  /* aliases herdados pelo JS/views */
  --card: var(--surface);
  --ink: var(--ink-900);
  --muted: var(--ink-600);
  --accent: var(--brand-600);
  --accent-2: var(--brand-700);
  --accent-soft: var(--brand-50);
  --warn: #B45309;  --warn-soft: #FFFBEB;
  --ok: #047857;    --ok-soft: #ECFDF5;
  --blue: #1D4ED8;  --blue-soft: #EFF6FF;
  --danger-soft: #FEF2F2;
  --r: var(--r-lg);
  --shadow: var(--shadow-sm);
  --tap: 48px;
}

html { -webkit-text-size-adjust: 100%; }
/* Campos dentro de .row (flex) precisam poder encolher */
input, select, textarea { min-width: 0; }
.row > input, .row > select { flex: 1; }
html, body { overscroll-behavior-y: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--brand-600); text-decoration: none; }
.hide { display: none !important; }
img { max-width: 100%; }
h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
.section-title h2 { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.muted { color: var(--ink-600); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.b { font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------ cabeçalho */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-row { display: flex; align-items: center; gap: var(--s2); min-height: 54px; }
.topbar .brand { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink-900); }
.topbar .spacer { flex: 1; }
/* logo: nunca distorce (manual Atena) e nunca abaixo de 28px de altura */
.brand-logo { height: 32px; width: auto; display: block; }
@media (max-width: 380px) { .brand-logo { height: 28px; } }
.icon-btn {
  width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--ink-600); background: transparent;
}
.icon-btn.ghost { background: transparent; }
.icon-btn svg { width: 20px; height: 20px; }

/* ------------------------------------------------ barra de abas */
/* Usa .tabbar/.tab do tema; aqui só o que é do app. */
.tabbar { z-index: 45; }
.tabbar button {
  background: none; border: 0; font: inherit;
  height: auto; padding: var(--s2) 0;
}
.tabbar .tab { font-size: 10.5px; letter-spacing: -.01em; gap: 3px; }
.tabbar .tab svg { width: 21px; height: 21px; }
.tabbar .tab.on { color: var(--brand-600); font-weight: 600; }
.tabbar .tab.mid { justify-content: flex-start; }
.tabbar .tab.mid .dot svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* Chips: o app marca a opção escolhida com a classe .on
   (o tema só estilizava [aria-pressed], que o app não usa) */
.chips { flex-wrap: wrap; }
.chip.on, .chip[aria-pressed="true"] {
  background: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-700);
  font-weight: 600;
}
.chip.on::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; flex: none;
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  .chip.on, .chip[aria-pressed="true"] { color: #E9A5F2; border-color: #B834BE; }
}

/* "ver todos" / "+ novo" dentro de títulos de seção: link, não botão */
.section-title .btn {
  height: 28px; padding: 0 var(--s2);
  background: transparent; border-color: transparent;
  color: var(--brand-600); font-size: 13px; font-weight: 600;
}

/* ------------------------------------------------ busca */
.search { position: relative; margin-bottom: var(--s3); }
.search input,
.search input:not([type]),
.search input[type=text],
.search input[type=search] { padding-left: 44px; }
.search .mag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); display: flex; }
.search svg { width: 18px; height: 18px; }

/* miniaturas */
.thumb {
  width: 52px; height: 52px; border-radius: var(--r-md); flex: none;
  background: var(--bg); color: var(--ink-400);
  display: grid; place-items: center; overflow: hidden;
}
.thumb.wide { width: 100%; height: 140px; }
.thumb svg { width: 20px; height: 20px; }

/* selos */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--bg); color: var(--ink-600);
  border: 1px solid var(--line);
  white-space: nowrap; flex: none;
}
.badge svg { width: 14px; height: 14px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: #A7F3D0; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: #FDE68A; }
.badge.danger { background: var(--danger-soft); color: var(--danger); border-color: #FECACA; }
.badge.info { background: var(--blue-soft); color: var(--blue); border-color: #BFDBFE; }
.best { outline: 2px solid var(--ok); outline-offset: -2px; }

/* estrelas, prioridade, segmentado */
.stars { display: flex; gap: 2px; }
.stars button { padding: 6px; min-width: 40px; min-height: 40px; color: var(--ink-400); display: grid; place-items: center; }
.stars button svg { width: 24px; height: 24px; }
.stars button.on { color: #F59E0B; }
.stars button.on svg { fill: currentColor; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--bg); padding: 4px; border-radius: var(--r-md); }
.seg button { height: 38px; border-radius: var(--r-sm); font-weight: 500; font-size: 14px; color: var(--ink-600); }
.seg button.on { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); font-weight: 600; }

.prio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.prio button { height: 44px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.prio button[data-v="Alta"].on { background: var(--danger-soft); border-color: #FCA5A5; color: var(--danger); }
.prio button[data-v="Média"].on { background: var(--warn-soft); border-color: #FCD34D; color: var(--warn); }
.prio button[data-v="Baixa"].on { background: var(--ok-soft); border-color: #6EE7B7; color: var(--ok); }

/* ------------------------------------------------ hero do destino */
.hero { margin-bottom: var(--s3); }
.hero .meta { margin-top: var(--s2); }
.hero select {
  margin-top: var(--s2); width: 100%; height: 42px;
  background-color: rgba(255,255,255,.13);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-weight: 600; font-size: 15px; padding: 0 36px 0 var(--s3);
  border-radius: 10px; -webkit-appearance: none; appearance: none;
  -webkit-text-fill-color: #fff;
}
.hero select option { color: #1B1222; background: #fff; }

/* ------------------------------------------------ campos */
/* O input base do tema cobre type=text; aqui entram os demais tipos. */
input:not([type]), input[type=number], input[type=tel], input[type=email],
input[type=url], input[type=password], input[type=date], input[type=time],
input[type=search] {
  width: 100%; height: var(--tap);
  padding: 0 var(--s3);
  font: inherit; font-size: 16px;
  color: var(--ink-900); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:focus, .input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(136,29,185,.18);
}
.field { margin-bottom: var(--s4); }
.field > label { font-size: 13px; font-weight: 500; color: var(--ink-600); text-transform: none; letter-spacing: 0; }
.field label .req, .field > label .req { color: var(--danger); margin-left: 2px; }
.field.miss input, .field.miss select, .field.miss textarea {
  border-color: #EAB308; background: #FEFCE8;
}
.field.miss > label { color: var(--warn); }

.row { display: flex; align-items: center; gap: var(--s3); }
.row.wrap { flex-wrap: wrap; }
/* nada dentro de uma linha/grid pode estourar a largura do cartão */
.row > *, .row-2 > *, .row-3 > *, .grid2 > *, .grid3 > * { min-width: 0; }
.row > .field { flex: 1 1 0; margin-bottom: 0; }
.row-2 { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.grid2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (max-width: 560px) { .row-2, .row-3 { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .grid2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------ botões (variantes do app) */
/* :where() mantém especificidade 0 — os .btn-primary/.btn-ghost do tema mandam */
:where(.btn) {
  background: var(--surface); color: var(--ink-900); border-color: var(--line);
  min-width: 0; max-width: 100%; white-space: nowrap;
}
.btn.primary, .btn-primary {
  background: var(--gradient-h); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(184,52,190,.22);
}
.btn.primary:hover, .btn-primary:hover { filter: brightness(.96); }
.btn.ghost, .btn-ghost { background: transparent; color: var(--brand-600); border-color: transparent; }
.btn.ghost { color: var(--ink-600); border-color: var(--line); }
.btn.danger { background: var(--danger-soft); color: var(--danger); border-color: #FECACA; }
.btn.big { height: 56px; font-size: 16px; border-radius: var(--r-md); }
/* .block = botão de largura cheia (o tema não traz essa classe) */
.btn.block { width: 100%; max-width: 100%; justify-content: center; }
.btn.sm { height: 34px; padding: 0 var(--s3); font-size: 13px; border-radius: var(--r-sm); }
.btn.ghost { height: 36px; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s3); }
.btn-row .btn { padding: 0 var(--s2); font-size: 14px; overflow: hidden; }
.btn-row .btn svg { width: 16px; height: 16px; }
/* par de ações secundárias lado a lado */
.btn-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s2); }
.btn-pair .btn { padding: 0 10px; font-size: 14px; min-width: 0; overflow: hidden; }
.btn-pair .btn svg { width: 17px; height: 17px; }

/* ------------------------------------------------ listas do app */
.list-item { width: 100%; text-align: left; background: var(--surface); }
.list .list-item { background: transparent; }
.list-item:active { background: var(--bg); }
.list-item .title { display: block; font-weight: 700; }
.list-item .sub { display: block; }
.arrow { color: var(--ink-400); display: flex; margin-left: auto; }
.arrow svg { width: 18px; height: 18px; }

/* ------------------------------------------------ folha do estande */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; flex-direction: column;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }
.ov-head, .ov-body, .ov-foot {
  padding-left: max(var(--s4), calc((100% - var(--content-w)) / 2 + var(--s4)));
  padding-right: max(var(--s4), calc((100% - var(--content-w)) / 2 + var(--s4)));
}
.ov-head {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: calc(var(--s2) + env(safe-area-inset-top)); padding-bottom: var(--s2);
  display: flex; align-items: center; gap: var(--s3); flex: none;
}
.ov-head .title { font-weight: 600; font-size: 14.5px; line-height: 1.3; flex: 1; min-width: 0; }
.ov-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-top: var(--s4); padding-bottom: var(--s6); }
.ov-foot {
  flex: none;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-top: var(--s3); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex; gap: var(--s3);
}
.ov-foot .btn { flex: 1; }
.steps { display: flex; gap: 5px; align-items: center; }
.steps i { width: 20px; height: 3px; border-radius: 2px; background: var(--line); display: block; }
.steps i.on { background: var(--brand-600); }

.mic-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; height: 48px; border-radius: var(--r-sm); font-weight: 600; font-size: 15px;
  background: var(--surface); color: var(--ink-900); border: 1px solid var(--line);
}
.mic-btn svg { width: 18px; height: 18px; }
.mic-btn.rec { background: var(--danger); color: #fff; border-color: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .78; } }
.mic-read {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3); font-size: 14px; margin-bottom: var(--s3);
  white-space: pre-wrap; max-height: 140px; overflow: auto;
}

/* ------------------------------------------------ cotação em lista */
.qlist { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: 100px; }
.qrow {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3);
  transition: border-color .15s, box-shadow .15s;
}
.qrow.filled { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(136,29,185,.12); }
.qrow .qname { font-weight: 600; font-size: 14px; }
.qrow .qmeta { font-size: 12px; color: var(--ink-600); margin-top: 1px; }
.qrow .qinputs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s2); margin-top: var(--s2); }
.qrow .qinputs > div { min-width: 0; }
.qrow .qinputs label { display: block; font-size: 12px; color: var(--ink-600); font-weight: 500; margin: 0 0 3px 2px; }
.qrow .qinputs input { width: 100%; min-width: 0; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
.q-row { display: flex; align-items: center; gap: var(--s3); }
.q-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qsave {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  padding: var(--s3) 0 calc(var(--s2) + env(safe-area-inset-bottom));
}

/* tabela de comparação */
table.cmp { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-md); overflow: hidden; font-size: 14px; border: 1px solid var(--line); }
table.cmp th, table.cmp td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp th { font-size: 12px; font-weight: 600; color: var(--ink-600); background: var(--bg); }
table.cmp td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* toast e progresso */
.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: var(--ink-900); color: var(--surface);
  padding: 11px 16px; border-radius: var(--r-md); font-size: 14px;
  z-index: 90; opacity: 0; transition: .18s; max-width: 88vw; text-align: center; pointer-events: none;
}
.toast.on { opacity: 1; transform: translateX(-50%); }
.pbar { height: 3px; background: var(--line); }
.pbar > i { display: block; height: 100%; background: var(--gradient-h); transition: width .3s; }
details > summary .chev svg { transition: transform .15s; }
details[open] > summary .chev svg { transform: rotate(90deg); }

.hr { height: 1px; background: var(--line); margin: var(--s4) 0; border: 0; }

/* ícones Lucide */
svg.lucide { stroke-width: 1.9; flex: none; }

/* ------------------------------------------------ espaço das barras fixas */
main { padding-bottom: 108px; }
main.container { padding-top: var(--s4); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* estado vazio extra */
.empty .big { font-size: 28px; opacity: .55; margin-bottom: var(--s2); }

/* ------------------------------------------------ iPhone */
.form-screen .tabbar { display: none; }
@media (max-width: 560px) {
  .card { padding: var(--s4); }
  .hero { padding: var(--s4); }
  .hero .stats { gap: var(--s5); }
}

/* ------------------------------------------------ modo escuro (completa o tema) */
@media (prefers-color-scheme: dark) {
  :root {
    --warn-soft: #2A2113; --ok-soft: #10231C; --blue-soft: #101A2E; --danger-soft: #2A1315;
    --warn: #FBBF24; --ok: #34D399; --blue: #93C5FD;
    --card: var(--surface); --ink: var(--ink-900); --muted: var(--ink-600);
  }
  .toast { background: #EFE7F4; color: #16101C; }
  .badge { border-color: #3A2E44; }
  .badge.ok { border-color: #14532D; } .badge.warn { border-color: #78350F; }
  .badge.danger { border-color: #7F1D1D; } .badge.info { border-color: #1E3A8A; }
  .field.miss input, .field.miss select, .field.miss textarea { background: #26200E; }
  .hero select option { color: #1B1222; background: #fff; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* avaliação: rótulo e estrelas na mesma linha */
.rate { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 0; border-bottom: 1px solid var(--line); }
.rate:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.rate-l { font-size: 14px; font-weight: 600; }
.rate .stars { margin: 0; flex: none; }
.rate .stars button { width: 34px; height: 34px; }
.rate .stars svg { width: 21px; height: 21px; }

/* campo único: busca + lista de produtos (Comparar) */
.combo { position: relative; }
.combo input { width: 100%; }
.combo .sug { display: none; position: absolute; z-index: 55; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(20, 8, 30, .16); max-height: min(56vh, 340px); overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px; }
.combo .sug.open { display: block; }
.combo .sug-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 8px 10px 6px; }
.combo .sug-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px; border: 0; border-radius: 10px; background: transparent; color: inherit;
  font: inherit; font-size: 14px; cursor: pointer; }
.combo .sug-item + .sug-item { border-top: 1px solid var(--line); border-radius: 0; }
.combo .sug-item:active { background: var(--brand-50); }
.combo .sug-item .ok { color: var(--brand-700); }

/* criar opção nova nos campos de escolha */
.chip.add { border-style: dashed; font-weight: 700; letter-spacing: .02em; padding-inline: 12px; }
.chip-form { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.chip-form input { flex: 1; min-width: 0; }