:root {
  --fundo: #111315;
  --painel: #1b1e21;
  --texto: #f5f5f5;
  --secundario: #c8c8c8;
  --borda: rgba(255,255,255,.15);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: Arial, Helvetica, sans-serif;
}

button, a { font: inherit; }

.topbar {
  padding: 10px 18px;
  min-height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}

.representante, .acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.representante img {
  height: 48px;
  max-width: 145px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border-radius: 6px;
}

.representante span {
  color: var(--secundario);
  font-size: .9rem;
}

.acao, .controles button {
  padding: 10px 14px;
  min-height: 42px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: #25292d;
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}

.acao:hover, .controles button:hover {
  background: #383d42;
}

.controles button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.catalogo {
  padding: 12px;
}

.aviso {
  margin: 0 0 10px;
  text-align: center;
  color: #e8bc70;
  font-size: .82rem;
}

.controles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

#indicador {
  min-width: 120px;
  text-align: center;
  color: var(--secundario);
  font-size: .9rem;
}

.visualizador {
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

#book {
  margin: 0 auto;
}

#estado {
  text-align: center;
  color: var(--secundario);
  font-size: .85rem;
}

@media (max-width: 700px) {
  .topbar {
    padding: 8px;
    gap: 6px;
  }

  .representante {
    gap: 6px;
  }

  .representante img {
    height: 36px;
    max-width: 92px;
  }

  .representante span {
    max-width: 100px;
    font-size: .68rem;
  }

  .acoes {
    gap: 5px;
  }

  .acao {
    padding: 8px;
    font-size: .75rem;
  }

  .catalogo {
    padding: 8px;
  }

  .controles {
    gap: 6px;
  }

  .controles button {
    padding: 8px;
    min-height: 38px;
    font-size: .8rem;
  }

  #indicador {
    width: 100%;
  }
}

/* Ajuste experimental de altura para desktop */
@media (min-width: 701px) {
  .visualizador {
    height: max(300px, calc(100dvh - 180px));
    min-height: 0;
    align-items: center;
  }
}

/* Aproximar a identificação do livro no desktop */
@media (min-width: 701px) {
  .visualizador {
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }

  #estado {
    margin-top: 8px;
  }
}

/* Experimento: ajustar proporcionalmente o livro no mobile */
@media (max-width: 700px) {
  .visualizador {
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }

  #book {
    width: min(100%, calc((100dvh - 205px) * 460 / 651)) !important;
  }
}

/* Controles experimentais de zoom */
.controles-zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.controles-zoom button {
  min-width: 46px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: #25292d;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.controles-zoom button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Legibilidade dos controles de zoom */
.controles-zoom button,
.controles-zoom button:disabled {
  color: #ffffff;
  opacity: 1;
}

.controles-zoom button:disabled {
  cursor: not-allowed;
}

/* Visualizador experimental de páginas ampliadas */
.zoom-visualizador[hidden] {
  display: none !important;
}

.zoom-visualizador {
  width: 100%;
  max-width: 920px;
  height: min(70dvh, 700px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #454b52;
  border-radius: 8px;
  background: #17191c;
}

.zoom-area {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
  touch-action: pan-x pan-y;
}

.zoom-imagem,
#zoom-imagem {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .zoom-visualizador {
    height: min(65dvh, 580px);
  }
}

/* Ocultar completamente o Flipbook durante a ampliação */
.visualizador[hidden] {
  display: none !important;
}