/* ============================================================
   Leitores Compulsivos — CSS acessível
   Alto contraste, foco visível, sem interações hover-only
   ============================================================ */

/* ── Reset e base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cor-fundo:       #1a1a2e;
  --cor-superficie:  #16213e;
  --cor-borda:       #0f3460;
  --cor-primaria:    #e94560;
  --cor-primaria-hv: #c73652;
  --cor-texto:       #e8e8e8;
  --cor-texto-sub:   #b0b0c0;
  --cor-link:        #4fc3f7;
  --cor-link-vis:    #b39ddb;
  --cor-foco:        #ffeb3b;
  --cor-sucesso:     #1b5e20;
  --cor-sucesso-bd:  #4caf50;
  --cor-erro:        #7f0000;
  --cor-erro-bd:     #ef5350;
  --cor-info:        #0d47a1;
  --cor-info-bd:     #42a5f5;
  --cor-alerta:      #f57f17;
  --raio:            4px;
  --fonte:           'Segoe UI', Arial, sans-serif;
  --fonte-mono:      'Courier New', monospace;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Acessibilidade ───────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--cor-foco); color: #000;
  padding: 8px 16px; font-weight: bold; z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Foco visível em TODOS os elementos interativos */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Links ────────────────────────────────────────────────── */
a { color: var(--cor-link); text-decoration: underline; }
a:visited { color: var(--cor-link-vis); }
a:hover, a:focus { color: #fff; }

/* ── Cabeçalho ────────────────────────────────────────────── */
header[role="banner"] {
  background: var(--cor-superficie);
  border-bottom: 2px solid var(--cor-borda);
  padding: 0 16px;
}
.header-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 8px; padding: 10px 0;
}
.logo { font-size: 1.2rem; font-weight: bold; color: var(--cor-primaria); }

nav[aria-label="Navegação principal"] ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px;
}
nav[aria-label="Navegação principal"] a { text-decoration: none; color: var(--cor-texto); }
nav[aria-label="Navegação principal"] a:hover { color: var(--cor-primaria); }

/* ── Conteúdo principal ───────────────────────────────────── */
main { flex: 1; padding: 24px 16px; }

.page-container, .form-container {
  max-width: 960px; margin: 0 auto;
}
.form-container { max-width: 600px; }

/* ── Títulos ──────────────────────────────────────────────── */
h1 { font-size: 1.75rem; margin-bottom: 16px; color: var(--cor-primaria); }
h2 { font-size: 1.3rem; margin: 24px 0 12px; border-bottom: 1px solid var(--cor-borda); padding-bottom: 6px; }
h3 { font-size: 1.1rem; margin: 16px 0 8px; }

/* ── Alertas ──────────────────────────────────────────────── */
.alert {
  padding: 14px 16px; border-radius: var(--raio);
  border-left: 4px solid; margin-bottom: 20px;
}
.alert-success { background: var(--cor-sucesso); border-color: var(--cor-sucesso-bd); }
.alert-error   { background: var(--cor-erro);    border-color: var(--cor-erro-bd);    }
.alert-info    { background: var(--cor-info);    border-color: var(--cor-info-bd);    }
.alert ul { margin: 8px 0 0 20px; }

/* ── Formulários ─────────────────────────────────────────── */
.campo { margin-bottom: 18px; }
.campo label {
  display: block; font-weight: bold; margin-bottom: 6px;
  font-size: 0.95rem;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="search"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%; padding: 10px 12px;
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 2px solid var(--cor-borda); border-radius: var(--raio);
  font-size: 1rem; font-family: var(--fonte);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--cor-foco);
}
.campo-dica { font-size: 0.85rem; color: var(--cor-texto-sub); margin-top: 4px; }
.campo-busca { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.campo-busca label { display: block; margin-bottom: 4px; font-weight: bold; }
.campo-busca input { flex: 1; min-width: 200px; }
.campo-acao { margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.link-auxiliar { margin-top: 16px; }
.form-instrucoes { color: var(--cor-texto-sub); margin-bottom: 20px; }

fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 16px; margin-bottom: 20px; }
legend { font-weight: bold; padding: 0 8px; color: var(--cor-primaria); }

.lista-checkboxes { list-style: none; }
.lista-checkboxes li { margin-bottom: 8px; }
.lista-checkboxes label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lista-checkboxes input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* ── Botões ───────────────────────────────────────────────── */
.btn-primario, .btn-secundario, .btn-link, .btn-perigo {
  display: inline-block; padding: 10px 20px; border-radius: var(--raio);
  font-size: 0.95rem; font-weight: bold; text-decoration: none;
  cursor: pointer; border: 2px solid transparent; font-family: var(--fonte);
  transition: none;
}
.btn-primario {
  background: var(--cor-primaria); color: #fff;
  border-color: var(--cor-primaria);
}
.btn-primario:hover, .btn-primario:focus {
  background: var(--cor-primaria-hv); color: #fff; border-color: var(--cor-primaria-hv);
}
.btn-secundario {
  background: transparent; color: var(--cor-link);
  border-color: var(--cor-link);
}
.btn-secundario:hover, .btn-secundario:focus {
  background: var(--cor-link); color: #000;
}
.btn-link {
  background: transparent; color: var(--cor-link);
  border-color: transparent; padding: 10px 8px;
}
.btn-link:hover { text-decoration: underline; }
.btn-perigo { color: var(--cor-erro-bd); border-color: transparent; background: transparent; }
.btn-perigo:hover { background: var(--cor-erro); color: #fff; }
.btn-download {
  display: inline-block; padding: 6px 14px; font-size: 0.85rem; font-weight: bold;
  background: #1a5276; color: #fff; border-radius: var(--raio);
  text-decoration: none; border: 2px solid #1a5276;
}
.btn-download:hover, .btn-download:focus { background: #154360; color: #fff; }
.btn-pequeno { padding: 6px 12px; font-size: 0.85rem; }

/* ── Tabelas ──────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: collapse; margin-bottom: 20px;
  font-size: 0.95rem;
}
th { background: var(--cor-superficie); padding: 10px 12px; text-align: left; }
td { padding: 10px 12px; border-bottom: 1px solid var(--cor-borda); }
tr:hover td { background: rgba(255,255,255,0.03); }
tr.inativo td { opacity: 0.6; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 0.8rem; font-weight: bold;
}
.badge-ativo    { background: var(--cor-sucesso-bd); color: #000; }
.badge-inativo  { background: #555; color: #fff; }
.badge-formato  { background: var(--cor-borda); color: var(--cor-texto); padding: 2px 6px;
                  border-radius: 3px; font-size: 0.8rem; margin-right: 4px; }
.badge-pendente    { background: var(--cor-alerta); color: #000; }
.badge-importado   { background: var(--cor-sucesso-bd); color: #000; }
.badge-rejeitado   { background: var(--cor-erro-bd); color: #000; }
.badge-infectado   { background: #000; color: var(--cor-erro-bd); border: 1px solid var(--cor-erro-bd); }
.badge-processando { background: var(--cor-info-bd); color: #000; }

/* ── Cards de biblioteca ─────────────────────────────────── */
.lista-bibliotecas { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.card-biblioteca {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: 20px; flex: 1; min-width: 240px; max-width: 340px;
}
.card-biblioteca h3 a { text-decoration: none; color: var(--cor-primaria); font-size: 1.1rem; }
.card-biblioteca h3 a:hover { text-decoration: underline; }
.stat-livros { color: var(--cor-texto-sub); font-size: 0.9rem; margin: 8px 0; }
.acoes-biblioteca { list-style: none; display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ── Lista de livros ─────────────────────────────────────── */
.lista-livros { list-style: none; }
.card-livro {
  display: flex; gap: 16px; padding: 16px;
  border-bottom: 1px solid var(--cor-borda); align-items: flex-start;
}
.card-livro-capa img { border-radius: var(--raio); display: block; }
.sem-capa { font-size: 2.5rem; display: block; width: 80px; text-align: center; }
.card-livro-info { flex: 1; }
.card-livro-info h3 { margin: 0 0 6px; }
.card-livro-info h3 a { color: var(--cor-texto); text-decoration: none; font-size: 1.05rem; }
.card-livro-info h3 a:hover { color: var(--cor-primaria); }
.autores, .serie { color: var(--cor-texto-sub); font-size: 0.9rem; margin-bottom: 4px; }
.formatos { margin: 6px 0; }
.acoes-livro { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 0.9rem; margin-bottom: 16px; color: var(--cor-texto-sub);
}
.breadcrumb li:not(:last-child)::after { content: " /"; margin-left: 4px; }
.breadcrumb a { color: var(--cor-texto-sub); }
.breadcrumb a:hover { color: var(--cor-link); }

/* ── Paginação ───────────────────────────────────────────── */
.paginacao { list-style: none; display: flex; gap: 12px; align-items: center; margin: 20px 0; }

/* ── Atalhos rápidos ─────────────────────────────────────── */
.lista-atalhos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.lista-atalhos a {
  display: inline-block; padding: 8px 16px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); text-decoration: none; color: var(--cor-link);
}
.lista-atalhos a:hover { border-color: var(--cor-primaria); }

/* ── Estatísticas admin ──────────────────────────────────── */
.stats-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; list-style: none; }
.stat-item {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: 16px 20px; min-width: 140px;
}
.stat-item dt { font-size: 0.85rem; color: var(--cor-texto-sub); margin-bottom: 4px; }
.stat-item dd { font-size: 1.6rem; font-weight: bold; color: var(--cor-primaria); }
.stat-alerta { border-color: var(--cor-alerta); border-width: 2px; border-style: solid; }
.stat-alerta dd { color: var(--cor-alerta); font-weight: bold; }
.stat-alerta dt::before { content: "! "; font-weight: bold; color: var(--cor-alerta); aria-hidden: true; }

/* ── Aprovação de usuários ───────────────────────────────── */
.lista-aprovacao { list-style: none; }
.card-aprovacao {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: 20px; margin-bottom: 16px;
}

/* ── Ações inline (tabelas) ──────────────────────────────── */
.acoes-inline { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-topo { margin-bottom: 16px; }

/* ── Rodapé ──────────────────────────────────────────────── */
footer[role="contentinfo"] {
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda);
  padding: 12px 16px; text-align: center;
  font-size: 0.85rem; color: var(--cor-texto-sub);
}

/* ── Responsivo básico ───────────────────────────────────── */
@media (max-width: 640px) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .card-livro { flex-direction: column; }
  .lista-bibliotecas { flex-direction: column; }
  .stats-grid { flex-direction: column; }
  table { font-size: 0.85rem; }
  td, th { padding: 8px; }
}

/* ── Sugestão IA nos uploads ──────────────────────────────────── */
.ia-sugestao {
  font-size: 0.85rem;
  margin: 0;
}
.ia-sugestao div {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.ia-sugestao dt {
  font-weight: 600;
  color: var(--cor-texto-suave, #666);
}
.ia-sugestao dt::after { content: ':'; }
.ia-alerta dd { color: var(--cor-erro, #c00); font-weight: 600; }