/* style.css — mobile-first, WCAG 2.2 AA */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cor-primaria: #1a56db;
  --cor-primaria-hover: #1e40af;
  --cor-perigo: #dc2626;
  --cor-sucesso: #16a34a;
  --cor-texto: #111827;
  --cor-fundo: #f9fafb;
  --cor-borda: #d1d5db;
  --raio: 8px;
  --sombra: 0 1px 3px rgba(0,0,0,.12);
  --fonte: system-ui, -apple-system, sans-serif;
}

body { font-family: var(--fonte); background: var(--cor-fundo); color: var(--cor-texto); min-height: 100vh; }

/* Cabeçalho */
.cabecalho { background: #1e3a5f; color: #fff; padding: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cabecalho h1 { font-size: 1.25rem; font-weight: 700; }
nav { display: flex; gap: .5rem; }

/* Botões */
.btn-nav { background: transparent; color: rgba(255,255,255,.75); border: 2px solid transparent; padding: .5rem 1rem; border-radius: var(--raio); cursor: pointer; font-size: 1rem; transition: all .15s; min-height: 44px; }
.btn-nav:hover, .btn-nav.ativo { color: #fff; border-color: #fff; }
.btn-nav:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }

.btn-primario { background: var(--cor-primaria); color: #fff; border: none; padding: .625rem 1.25rem; border-radius: var(--raio); cursor: pointer; font-size: 1rem; font-weight: 600; transition: background .15s; min-height: 44px; }
.btn-primario:hover { background: var(--cor-primaria-hover); }
.btn-primario:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
.btn-primario.btn-grande { padding: 1rem 2rem; font-size: 1.125rem; width: 100%; max-width: 320px; }

.btn-secundario { background: #fff; color: var(--cor-texto); border: 2px solid var(--cor-borda); padding: .625rem 1.25rem; border-radius: var(--raio); cursor: pointer; font-size: 1rem; transition: border-color .15s; min-height: 44px; }
.btn-secundario:hover { border-color: var(--cor-primaria); }
.btn-secundario:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }

.btn-aprovar { background: var(--cor-sucesso); color: #fff; border: none; padding: .5rem 1rem; border-radius: var(--raio); cursor: pointer; font-size: .875rem; font-weight: 600; min-height: 44px; }
.btn-rejeitar { background: var(--cor-perigo); color: #fff; border: none; padding: .5rem 1rem; border-radius: var(--raio); cursor: pointer; font-size: .875rem; font-weight: 600; min-height: 44px; }
.btn-aprovar:focus-visible, .btn-rejeitar:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }

/* Main */
main { padding: 1rem; max-width: 1200px; margin: 0 auto; }

/* Filtros */
.filtros { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.filtros select { padding: .5rem .75rem; border: 2px solid var(--cor-borda); border-radius: var(--raio); font-size: 1rem; min-height: 44px; background: #fff; }
.filtros select:focus { outline: 3px solid var(--cor-primaria); border-color: var(--cor-primaria); }

/* Galeria */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.cartao-imagem { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.cartao-imagem img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cartao-info { padding: .75rem; }
.cartao-status { display: inline-block; padding: .25rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; margin-bottom: .5rem; }
.status-pendente { background: #fef9c3; color: #713f12; }
.status-aprovada { background: #dcfce7; color: #14532d; }
.status-rejeitada { background: #fee2e2; color: #7f1d1d; }
.status-falhou { background: #f3f4f6; color: #374151; }
.cartao-acoes { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

/* Formulário */
form { display: flex; flex-direction: column; gap: .75rem; background: #fff; padding: 1rem; border-radius: var(--raio); box-shadow: var(--sombra); margin: 1rem 0; }
label { font-size: .875rem; font-weight: 600; }
input[type="text"], textarea, select {
  padding: .625rem .75rem; border: 2px solid var(--cor-borda); border-radius: var(--raio); font-size: 1rem; width: 100%; min-height: 44px;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--cor-primaria); border-color: var(--cor-primaria); }
.form-acoes { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Listas */
.carregando { color: #6b7280; padding: 2rem; text-align: center; font-size: 1rem; }
.item-prompt { background: #fff; padding: 1rem; border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: .75rem; }
.sessao-card { background: #fff; padding: 1rem; border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: .75rem; }

/* Status geração */
.status-geracao { background: #fff; padding: 1rem; border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 1.5rem; }
.status-geracao h2 { font-size: 1rem; margin-bottom: .25rem; }

/* Botão logout */
.btn-logout {
  margin-left: auto; background: transparent; color: rgba(255,255,255,.75);
  border: 2px solid rgba(255,255,255,.4); padding: .4rem .875rem;
  border-radius: 8px; cursor: pointer; font-size: .875rem; min-height: 44px;
}
.btn-logout:hover { color: #fff; border-color: #fff; }

/* Filtro de tag */
.input-filtro-tag {
  padding: .5rem .75rem; border: 2px solid var(--cor-borda); border-radius: var(--raio);
  font-size: 1rem; min-height: 44px; background: #fff; width: 180px;
}
.input-filtro-tag:focus { outline: 3px solid var(--cor-primaria); border-color: var(--cor-primaria); }
.btn-sm { padding: .4rem .75rem; font-size: .875rem; }

/* Galeria — cartão com proporção vertical */
.cartao-imagem img { aspect-ratio: 9/16; object-fit: cover; }
.cartao-imagem a.img-zoom { display: block; overflow: hidden; cursor: zoom-in; }
.cartao-imagem a.img-zoom:focus-visible { outline: 3px solid var(--cor-primaria); }
.img-erro img { background: #f3f4f6; min-height: 200px; }

/* Prompt text */
.prompt-texto {
  font-size: .8rem; color: #4b5563; margin: .375rem 0 .5rem;
  line-height: 1.4; border-left: 3px solid #d1d5db; padding-left: .5rem;
}

/* Anotações */
.anotacao { margin: .5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.label-sm { font-size: .75rem; font-weight: 600; color: #6b7280; }
.nota-textarea {
  padding: .5rem .625rem; border: 2px solid var(--cor-borda); border-radius: var(--raio);
  font-size: .875rem; width: 100%; resize: vertical; min-height: 60px; font-family: inherit;
}
.nota-textarea:focus { outline: 3px solid var(--cor-primaria); border-color: var(--cor-primaria); }

/* Tagify override para encaixar no cartão */
.tagify { --tag-bg: #dbeafe; --tag-text-color: #1e40af; border-radius: var(--raio); font-size: .875rem; }

/* Responsividade */
@media (min-width: 640px) {
  .cabecalho { padding: 1rem 2rem; }
  main { padding: 1.5rem 2rem; }
}