/* Santo Santo Santo - design system (Accessible & Ethical, modo Operate) */

:root {
  --cor-primaria: #7C3AED;
  --cor-primaria-on: #FFFFFF;
  --cor-primaria-hover: #6D28D9;
  --cor-secundaria: #A78BFA;
  --cor-acento: #A16207;
  --cor-acento-on: #FFFFFF;
  --cor-acento-hover: #854D0E;
  --cor-fundo: #FAF5FF;
  --cor-texto: #4C1D95;
  --cor-texto-secundario: #5B5470;
  --cor-card: #FFFFFF;
  --cor-muted: #ECEEF9;
  --cor-muted-texto: #475569;
  --cor-borda: #DDD6FE;
  --cor-destrutivo: #DC2626;
  --cor-destrutivo-on: #FFFFFF;
  --cor-ring: #7C3AED;

  --cor-aviso-fundo: #FEF3C7;
  --cor-aviso-texto: #92400E;
  --cor-sucesso-fundo: #DCFCE7;
  --cor-sucesso-texto: #166534;
  --cor-erro-fundo: #FEE2E2;
  --cor-erro-texto: #991B1B;

  --fonte-base: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-8: 3rem;

  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;

  --sombra-sm: 0 1px 2px rgba(76, 29, 149, 0.08);
  --sombra-md: 0 4px 12px rgba(76, 29, 149, 0.12);
  --sombra-lg: 0 12px 32px rgba(76, 29, 149, 0.16);

  --duracao-rapida: 150ms;
  --duracao-normal: 250ms;
  --facilidade-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset minimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: 16px;
  line-height: 1.5;
  caret-color: var(--cor-primaria);
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, fieldset { margin: 0 0 var(--espaco-4); }

::selection { background: var(--cor-secundaria); color: var(--cor-texto); }

* { scrollbar-width: thin; scrollbar-color: var(--cor-secundaria) var(--cor-muted); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--cor-muted); }
*::-webkit-scrollbar-thumb { background: var(--cor-secundaria); border-radius: var(--raio-sm); }

:focus-visible {
  outline: 3px solid var(--cor-ring);
  outline-offset: 2px;
}

a {
  color: var(--cor-primaria);
  text-underline-offset: 3px;
}
a:hover { color: var(--cor-primaria-hover); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--cor-primaria); }

@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;
  }
}

/* Tipografia */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.subtitulo { color: var(--cor-texto-secundario); }

/* Marca */
.marca {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--cor-texto);
  text-decoration: none;
}
.marca .marca-destaque { color: var(--cor-acento); }
.marca:hover { color: var(--cor-texto); }

/* Layout */
.pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--espaco-6) var(--espaco-5);
}
.pagina-estreita .conteudo {
  max-width: 40rem;
}

/* Card generico */
.card {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--espaco-5);
}

/* Tela de autenticacao: card centralizado estreito, sem nav */
.auth-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-5);
}
.auth-cartao {
  width: 100%;
  max-width: 24rem;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--espaco-6);
}
.auth-cartao .marca { display: block; margin-bottom: var(--espaco-5); }
.auth-cartao h1 { font-size: 1.375rem; }

/* Navegacao */
.topo {
  background: var(--cor-card);
  border-bottom: 1px solid var(--cor-borda);
}
.topo-conteudo {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--espaco-3) var(--espaco-5);
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  flex-wrap: wrap;
}
.topo nav {
  display: flex;
  gap: var(--espaco-4);
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.topo nav a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: var(--espaco-2) var(--espaco-1);
}
.topo nav a:hover { color: var(--cor-primaria); }

/* Formularios */
form { display: flex; flex-direction: column; gap: var(--espaco-4); }
label {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  font-weight: 500;
  font-size: 0.9375rem;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: var(--espaco-3);
  min-height: 44px;
  transition: border-color var(--duracao-rapida) ease, box-shadow var(--duracao-rapida) ease;
}
textarea { min-height: 88px; font-family: inherit; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--cor-primaria);
}
input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  font-weight: 400;
}
label:has(input[type="checkbox"]) input, label:has(input[type="radio"]) input {
  width: 18px;
  height: 18px;
  min-height: auto;
}

fieldset {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--espaco-4);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}
legend {
  font-weight: 600;
  padding: 0 var(--espaco-2);
  color: var(--cor-texto);
}

details {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
}
details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--cor-primaria);
}
details fieldset { margin-top: var(--espaco-3); }

/* Botoes. As classes de variacao (usadas sozinhas em <a>, sem "botao"
   junto, porque algumas telas dependem do texto exato do atributo class)
   entram aqui pra herdar o formato de botao: padding, raio, altura minima. */
button, .botao, .acao-primaria, .botao-secundario, .botao-perigo {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--raio-sm);
  padding: var(--espaco-3) var(--espaco-5);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  box-shadow: var(--sombra-sm);
  transition: transform var(--duracao-rapida) ease, box-shadow var(--duracao-rapida) ease, background var(--duracao-rapida) ease;
}
button[type="submit"], .botao-primario {
  background: var(--cor-primaria);
  color: var(--cor-primaria-on);
}
button[type="submit"]:hover, .botao-primario:hover {
  background: var(--cor-primaria-hover);
  box-shadow: var(--sombra-md);
}
button[type="submit"]:active, .botao-primario:active { transform: translateY(1px); }

button.acao-primaria, .acao-primaria {
  background: var(--cor-acento);
  color: var(--cor-acento-on);
}
button.acao-primaria:hover, .acao-primaria:hover { background: var(--cor-acento-hover); color: var(--cor-acento-on); }

/* Especificidade igual a "button[type='submit']" (elemento+atributo), pra
   ganhar pela ordem no arquivo em vez de perder por especificidade menor. */
button.botao-secundario, .botao-secundario {
  background: transparent;
  color: var(--cor-primaria);
  border: 1px solid var(--cor-borda);
  box-shadow: none;
}
button.botao-secundario:hover, .botao-secundario:hover { background: var(--cor-muted); }

button.botao-perigo, .botao-perigo {
  background: transparent;
  color: var(--cor-destrutivo);
  box-shadow: none;
  font-weight: 500;
  padding: var(--espaco-2) var(--espaco-3);
  min-height: auto;
}
button.botao-perigo:hover, .botao-perigo:hover { background: var(--cor-erro-fundo); }

/* Mensagens */
p.erro, .erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
  font-weight: 500;
}
.aviso {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
}
.ok {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
}
.vazio {
  color: var(--cor-texto-secundario);
  padding: var(--espaco-5);
  text-align: center;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-md);
}

/* Palpite de triagem */
.palpite {
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
  font-weight: 500;
}
.palpite-duplicata { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.palpite-novo { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }

.variacao-forte {
  color: var(--cor-destrutivo);
  font-weight: 700;
}

/* Envios do fornecedor */
.lista-envios { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.lista-envios li {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
}
.lista-envios li.envio-recusado {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-destrutivo);
}
.lista-envios .id-envio { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; color: var(--cor-texto-secundario); }
.status {
  display: inline-block;
  margin-left: var(--espaco-2);
  padding: 2px var(--espaco-2);
  border-radius: var(--raio-sm);
  font-size: 0.8125rem;
  font-weight: 600;
}
.status-pendente { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.status-aceito { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.status-recusado { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }

/* Tabela */
table { width: 100%; border-collapse: collapse; background: var(--cor-card); border-radius: var(--raio-md); overflow: hidden; box-shadow: var(--sombra-sm); }
th, td { text-align: left; padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--cor-borda); }
th { background: var(--cor-muted); color: var(--cor-muted-texto); font-weight: 600; font-size: 0.875rem; }
tbody tr:nth-child(even) { background: var(--cor-muted); }
tbody tr:hover { background: var(--cor-secundaria); }
td.mono, .mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

/* Triagem: grid de cards */
.grade-triagem {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--espaco-5);
}
.cartao-triagem {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--espaco-5);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  opacity: 0;
  animation: entrada-cartao var(--duracao-normal) var(--facilidade-saida) forwards;
}
.cartao-triagem img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--raio-md);
  background: var(--cor-muted);
}
.cartao-triagem .acoes {
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}
.cartao-triagem .acoes form { gap: var(--espaco-2); }

@keyframes entrada-cartao {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.grade-triagem .cartao-triagem:nth-child(1) { animation-delay: 0ms; }
.grade-triagem .cartao-triagem:nth-child(2) { animation-delay: 40ms; }
.grade-triagem .cartao-triagem:nth-child(3) { animation-delay: 80ms; }
.grade-triagem .cartao-triagem:nth-child(4) { animation-delay: 120ms; }
.grade-triagem .cartao-triagem:nth-child(n+5) { animation-delay: 160ms; }

/* Fila de revisao */
.lista-fila { display: flex; flex-direction: column; gap: var(--espaco-4); }
.item-fila { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-sm); padding: var(--espaco-4); }
.item-fila form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.item-fila label { flex: 1 1 8rem; }

/* Responsivo */
@media (max-width: 767px) {
  .conteudo { padding: var(--espaco-4); }
  .topo-conteudo { gap: var(--espaco-3); }
  .item-fila form { flex-direction: column; align-items: stretch; }
}

.rodape-form {
  margin-top: var(--espaco-3, 1rem);
  font-size: 0.875rem;
  text-align: center;
}