/* Tokens copiados do tema real do CargaFlow (src/styles/themes/cargaflow.css).
   Se o tema do produto mudar, atualizar só este bloco. */
:root {
  --background: rgb(250 249 247);
  --foreground: rgb(26 26 26);
  --card: rgb(255 255 255);
  --primary: rgb(233 79 14);
  --primary-hover: rgb(206 68 10);
  --primary-foreground: rgb(255 255 255);
  --muted: rgb(242 241 238);
  --muted-foreground: rgb(110 107 104);
  --accent: rgb(253 237 231);
  --border: rgb(226 224 221);
  --success: rgb(30 158 90);
  --warning: rgb(229 165 10);
  --radius: 0.625rem;
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.marca { font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.ponto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--primary); }
.topo nav { display: flex; gap: 0.25rem; margin-left: auto; }
.topo nav a {
  padding: 0.35rem 0.7rem; border-radius: var(--radius);
  text-decoration: none; font-size: 0.9rem; color: var(--muted-foreground);
}
.topo nav a:hover { background: var(--muted); }
.topo nav a.ativo { background: var(--accent); color: var(--primary); font-weight: 600; }
.quem { font-size: 0.8rem; color: var(--muted-foreground); }

.pagina { max-width: 62rem; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* ---------- blocos ---------- */
h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.sub { color: var(--muted-foreground); font-size: 0.9rem; margin-bottom: 1rem; }

.cartao {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-sm);
  margin-bottom: 0.75rem;
}
.cartao h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.linha { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.espaco { margin-left: auto; }
.meta { font-size: 0.82rem; color: var(--muted-foreground); }
.mono { font-family: var(--mono); font-size: 0.85rem; }

.recado {
  background: var(--accent); border: 1px solid var(--primary);
  color: var(--primary); padding: 0.6rem 0.9rem; border-radius: var(--radius);
  margin-bottom: 1rem; font-size: 0.9rem;
}

/* ---------- botões ---------- */
.botao, button, input[type=submit] {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.5rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--primary); background: var(--primary); color: var(--primary-foreground);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.botao:hover, button:hover { background: var(--primary-hover); }
.botao.leve, button.leve {
  background: var(--accent); color: var(--primary); border-color: transparent;
}
.botao.leve:hover, button.leve:hover { background: rgb(250 220 208); }
.botao.neutro, button.neutro {
  background: var(--card); color: var(--foreground); border-color: var(--border);
}
.botao.neutro:hover, button.neutro:hover { background: var(--muted); }
.botao.pequeno, button.pequeno { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* ---------- selos ---------- */
.selo {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; background: var(--muted); color: var(--muted-foreground);
}
.selo.atrasado { background: rgb(253 226 226); color: rgb(180 35 24); }
.selo.hoje { background: var(--accent); color: var(--primary); }
.selo.ok { background: rgb(219 243 228); color: var(--success); }
.selo.a { background: var(--primary); color: var(--primary-foreground); }

/* ---------- board ---------- */
.colunas { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 1rem; }
.coluna { min-width: 15rem; flex: 0 0 15rem; }
.coluna h3 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); margin-bottom: 0.5rem; display: flex; gap: 0.4rem;
}
.coluna .conta { color: var(--foreground); }
.mini {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; display: block; text-decoration: none;
}
.mini:hover { border-color: var(--primary); }
.mini strong { display: block; font-size: 0.88rem; }

/* ---------- formulários ---------- */
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
input[type=text], input[type=email], input[type=password], input[type=file], textarea, select {
  font: inherit; width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); margin-bottom: 0.75rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.copy {
  background: var(--muted); border-left: 3px solid var(--primary);
  padding: 0.7rem 0.9rem; border-radius: var(--radius);
  white-space: pre-wrap; font-size: 0.92rem; margin: 0.5rem 0;
}

.tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabela th, .tabela td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); }
.tabela th { color: var(--muted-foreground); font-size: 0.78rem; text-transform: uppercase; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.numero { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; }
.numero b { display: block; font-size: 1.6rem; line-height: 1.1; }
.numero span { font-size: 0.78rem; color: var(--muted-foreground); }

.entrada { display: flex; flex-direction: column; gap: 0.35rem; border-left: 2px solid var(--border); padding: 0 0 0.8rem 0.8rem; }
.entrada:last-child { padding-bottom: 0; }

@media (max-width: 640px) {
  .topo { gap: 0.5rem; }
  .topo nav { width: 100%; order: 3; margin-left: 0; overflow-x: auto; }
  .pagina { padding: 0.75rem 0.75rem 5rem; }
  .coluna { min-width: 13rem; flex-basis: 13rem; }
}

/* respostas do card: uma lista só, cada item abre o texto pronto */
.resposta { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.resposta:last-child { border-bottom: 0; }
.resposta summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.resposta summary::-webkit-details-marker { display: none; }
.resposta summary::before { content: '▸'; color: var(--muted-foreground); font-size: 0.8rem; }
.resposta[open] summary::before { content: '▾'; }

/* ---------- marca ---------- */
.marca img { display: block; height: 22px; width: auto; }
.marca-sufixo {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); background: var(--accent);
  padding: 0.1rem 0.4rem; border-radius: 999px;
}

/* ---------- modal do card ---------- */
#modal {
  border: 0; border-radius: var(--radius); padding: 0;
  /* o reset `* { margin: 0 }` mata o `margin: auto` que centraliza o dialog */
  margin: auto;
  width: min(48rem, 94vw); max-height: 86vh;
  background: var(--background); color: var(--foreground);
  box-shadow: 0 24px 56px -20px hsl(20 60% 12% / 0.35);
  overflow: hidden;
}
/* display só no [open]: mudar o display do <dialog> fechado o deixa sempre visível */
#modal[open] { display: flex; flex-direction: column; }
#modal::backdrop { background: hsl(0 0% 0% / 0.45); }
.modal-corpo { padding: 1.25rem 1.25rem 2rem; overflow-y: auto; }
.modal-corpo h1 { font-size: 1.2rem; padding-right: 2.5rem; }
.modal-fechar { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; line-height: 1; padding: 0.3rem 0.5rem; }

@media (max-width: 640px) {
  #modal {
    width: 100vw; max-width: 100vw; max-height: 92vh;
    margin: auto auto 0; border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* o select do lote fica na mesma linha do botão, sem o respiro de formulário */
.linha select { margin-bottom: 0; width: auto; }
.linha label { margin-bottom: 0; }