/* (task-303) Portal dos mercados — parâmetros da "Jornada da Marca"
 * (cores.webp, fonte 1.webp, Fonte 2.webp, 27/10):
 *   principais     #A0D5D6 azul · #F7CC93 bege · #71B858 verde · #46120D marrom
 *   complementares #73C7D8 azul · #F59C22 laranja · #E94458 vermelho · #FECA17 amarelo
 *   títulos Rotunda (paga: entra quando os arquivos chegarem) · texto Open Sans
 * Cor da marca usada em TEXTO só onde o contraste aguenta: o marrom. As claras
 * (azul, bege, verde, amarelo) aparecem como fundo, com texto marrom em cima. */
:root {
  --azul: #a0d5d6;
  --azul-forte: #73c7d8;
  --bege: #f7cc93;
  --verde: #71b858;
  --marrom: #46120d;
  --laranja: #f59c22;
  --vermelho: #e94458;
  --amarelo: #feca17;

  --fundo: #fbfbfb;
  --superficie: #ffffff;
  --tinta: #46120d;
  --apagado: #7a5651;
  --linha: #ecdfd6;
  --sombra: 0 1px 2px rgba(70, 18, 13, .06), 0 4px 16px rgba(70, 18, 13, .05);
  --botao: #46120d;
  --botao-texto: #ffffff;
  --realce: #e6f4f4;           /* azul da marca, clareado: aba ativa, botão secundário */
  --selo-espera: #fff3c4;      /* amarelo da marca, clareado */
  --selo-ok: #e4f2de;          /* verde da marca, clareado */
  --selo-recusa: #fde4e7;      /* vermelho da marca, clareado */
  --promo-fundo: #f7cc93;      /* bege da marca */
  --perigo: #c42a3e;           /* vermelho da marca escurecido para texto legível */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #1a0b09; --superficie: #26120f; --tinta: #fbefe4; --apagado: #c9aea6; --linha: #3d2420;
    --sombra: none; --botao: #f7cc93; --botao-texto: #46120d; --realce: #1f3a3b;
    --selo-espera: #3d3210; --selo-ok: #1f3319; --selo-recusa: #43181e; --promo-fundo: #5a3a15; --perigo: #ff8a99;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #1a0b09; --superficie: #26120f; --tinta: #fbefe4; --apagado: #c9aea6; --linha: #3d2420;
  --sombra: none; --botao: #f7cc93; --botao-texto: #46120d; --realce: #1f3a3b;
  --selo-espera: #3d3210; --selo-ok: #1f3319; --selo-recusa: #43181e; --promo-fundo: #5a3a15; --perigo: #ff8a99;
  color-scheme: dark;
}

/* Rotunda (títulos): fonte paga, os arquivos ainda não chegaram. Quando
   chegarem, ficam em site/fonts/ com um @font-face aqui (sem eles, cada página
   pediria um arquivo que não existe). Até lá, Figtree (gratuita, de desenho
   próximo) segura os títulos — a pilha `Rotunda, Figtree, ...` já está pronta. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: "Open Sans", -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
[hidden] { display: none !important; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 1000; }
.topo-dentro { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-family: Rotunda, Figtree, "Open Sans", sans-serif; font-weight: 800; }
.marca b { font-weight: 600; color: var(--apagado); }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
.aba, .sair { background: none; border: 0; padding: 8px 12px; border-radius: 999px; font: inherit; font-weight: 700; color: var(--apagado); cursor: pointer; }
.aba[aria-current="page"] { background: var(--realce); color: var(--tinta); }
.sair { color: var(--perigo); }

main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 80px; }
.carregando { color: var(--apagado); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 24px; box-shadow: var(--sombra); }
.cartao.estreito { max-width: 460px; margin: 6vh auto 0; }
h1 { font-family: Rotunda, Figtree, "Open Sans", sans-serif; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.15; margin: 0 0 8px; color: var(--tinta); font-weight: 800; text-wrap: balance; }
h2 { font-family: Rotunda, Figtree, "Open Sans", sans-serif; font-size: 19px; font-weight: 700; margin: 26px 0 10px; color: var(--tinta); }
.lede { color: var(--apagado); margin: 0 0 20px; max-width: 64ch; }
.nota { color: var(--apagado); font-size: 14px; }
.cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
input, select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); color: var(--tinta); min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--azul-forte); outline-offset: 1px; }
input.curto { max-width: 90px; text-transform: uppercase; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
label.check input { width: 18px; height: 18px; }
.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .grade .largo { grid-column: 1 / -1; }
}

button.primario, button.secundario { font: inherit; font-weight: 800; border-radius: 12px; padding: 11px 18px; cursor: pointer; border: 0; }
button.primario { background: var(--botao); color: var(--botao-texto); }
button.secundario { background: var(--realce); color: var(--tinta); }
button:disabled { opacity: .55; cursor: progress; }
form > button.primario { margin-top: 18px; }

.mapa { height: 320px; border-radius: 12px; border: 1px solid var(--linha); margin-top: 10px; }
.mapa-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.selo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 15px; }
.selo b { display: block; }
.selo.pendente { background: var(--selo-espera); }
.selo.ativo { background: var(--selo-ok); }
.selo.recusado { background: var(--selo-recusa); }

.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acoes { white-space: nowrap; text-align: right; }
.riscado { text-decoration: line-through; color: var(--apagado); font-size: 13px; margin-right: 6px; }
.promo { background: var(--promo-fundo); color: var(--tinta); font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--realce); color: var(--tinta); }
.etiqueta.fora { background: var(--selo-recusa); color: var(--perigo); }
.link { background: none; border: 0; color: var(--tinta); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 6px; }
.link.perigo { color: var(--perigo); }
.vazio { text-align: center; padding: 40px 10px; color: var(--apagado); }
@media (max-width: 640px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid var(--linha); padding: 10px 0; }
  .tabela td { border: 0; padding: 2px 0; }
  .tabela .acoes { text-align: left; }
}

.dialogo { border: 0; border-radius: 16px; padding: 24px; width: min(640px, calc(100vw - 32px)); background: var(--superficie); color: var(--tinta); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialogo::backdrop { background: rgba(70, 18, 13, .45); }
.dialogo h2 { margin-top: 0; }
.botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
fieldset.catalogo { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 14px; }
fieldset.catalogo legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sugestoes label { flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 999px; font-weight: 600; cursor: pointer; }
.sugestoes label:has(input:checked) { background: var(--realce); border-color: var(--azul-forte); }
.sugestoes input { margin: 0; }
.erro { color: var(--perigo); font-weight: 700; margin: 6px 0 0; }

.mercado-admin { border: 1px solid var(--linha); border-radius: 12px; padding: 16px; margin-top: 14px; }
.mercado-admin dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 14px; font-size: 15px; }
.mercado-admin dt { color: var(--apagado); }
.mercado-admin dd { margin: 0; overflow-wrap: anywhere; }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--botao); color: var(--botao-texto); padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: var(--sombra); max-width: calc(100vw - 32px); z-index: 2000; }
.aviso.ruim { background: var(--perigo); color: #fff; }