* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  color: #000000;
  background-color: #faf9f9;
}
header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 20px;
  border-bottom: 1px solid #e5e7eb; /* Cor mais suave */
}

h1 {
  font-size: 30px;
  margin-right: auto; /* Joga os outros itens para a direita */
}

.container {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 58px);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

nav {
  padding: 16px;
  border-right: 1px solid #e5e7eb; /* Cor mais suave */
}
nav button, a.nav-button {
  text-decoration: none;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  text-align: left;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1em;
}
nav button:hover, a.nav-button:hover {
  background: #273244;
}
a.nav-button.active {
  background-color: #374151;
}

.menu-toggle {
  display: none; /* Escondido por padrão (em telas grandes) */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle svg {
  stroke: #1f2937;
}

/*
  * Correção de Responsividade para o Código de Barras
  * Garante que o SVG gerado não ultrapasse a largura da tela em dispositivos móveis.
*/
#barcode {
  max-width: 100%;
  height: auto;
}

#qrcode, #imageResult {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #d1d5db; /* Cor mais suave */
  border-radius: 10px;
  display: block; 
  margin: 12px auto 0 auto; 
}

#reader, #barcode-scanner {
  margin-top: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
}

.input-container {
  display: flex;
  width: 100%;
  gap: 10px;
}

.input-container input[type="text"] {
  flex-grow: 1;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1em;
}

.dica { opacity: 0.8; font-size: 14px; margin-top: 10px; }
.status { margin-top: 8px; font-size: 14px; opacity: 0.9; }
.error { color: #fca5a5; }
.success { 
  color: #155724; 
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  word-break: break-all;
}

.btn-primary {
  background-color: #e5e7eb;
  color: #1f2937;
  padding: 12px 20px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: #d1d5db;
}

.btn-secondary {
  display: inline-block;
  background-color: #6c757d;
  color: white;
  padding: 12px 20px;
  border: 1px solid #6c757d;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

/* Container para o QR Code gerado */
#qrcode-container {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 100%;
  max-width: 260px; /* Painel um pouco menor */
  min-height: 260px; /* Painel um pouco menor */
  padding: 15px;
  align-self: center; /* Garante que o painel em si seja centralizado */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.tool-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centraliza itens que não ocupam 100%, como o qrcode-container */
  gap: 15px;
}

/* --- Página do Visualizador --- */
.text-content-viewer {
  position: relative; /* Para o spinner de carregamento */
  width: 100%;
  height: 85vh; /* Aumentado um pouco */
  min-height: 700px;
  border: 1px solid #dddfe2;
  border-radius: 8px;
  overflow: hidden; /* Garante que não haja barras de rolagem no container */
  background-color: #e9ecef; /* Fundo para a área de carregamento */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
}
.viewer-header h2 { margin: 0; border: none; }
.text-content-viewer iframe { width: 100%; height: 100%; border: none; }

.Qr-Menu {
  display: flex;
  justify-content: center;
}

.Qr-Menu button {
  width: 100%;
  order: -1; /* Move o botão para cima do título 'QR Code' */
}

h2, h3{
  font-size: 20px;
}


/* Media Query para telas menores (celulares) */
@media (max-width: 768px) {
  h1 {
    font-size: 1rem; /* 16px, para caber o título longo */
    line-height: 1.2;
    margin-right: 10px;
  }

  .menu-toggle {
    display: block; /* Mostra o botão hambúrguer */
  }

  .container {
    grid-template-columns: 1fr; /* O conteúdo principal ocupa toda a largura */
  }

  nav {
    position: fixed; /* Fica por cima de todo o conteúdo */
    top: 0;
    left: 0;
    width: 100%; /* Menu cobre 100% da tela */
    max-width: none; /* Remove a largura máxima */
    height: 100vh; /* Altura total da tela */
    background: #fff;
    border-right: 1px solid #e5e7eb;
    z-index: 1000; /* Garante que fique na frente */
    transform: translateX(-100%); /* Começa escondido para a esquerda */
    transition: transform 0.3s ease-in-out; /* Animação suave */
  }

  nav.open {
    transform: translateX(0); /* Move o menu para a posição visível */
  }
}

/* Estilos para o Rodapé */
footer {
  background-color: #f8f9fa;
  color: #6c757d;
  text-align: center;
  padding: 20px 15px;
  margin-top: 30px;
  border-top: 1px solid #e7e7e7;
}

.footer-content p {
  margin: 5px 0;
  font-size: 0.9em;
}

.footer-content a {
  color: #007bff;
  text-decoration: none;
  margin: 0 5px;
}

.footer-content a:hover {
  text-decoration: underline;
}

/* Estilo para o texto de descrição da seção */
.section-description {
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 0 4px 4px 0;
  font-size: 0.95em;
  color: #495057;
  line-height: 1.5;
  width: 100%;
  max-width: 800px; /* Aumenta a largura máxima da descrição */
}

/* --- Estilos para os Formulários em Grid (Wi-Fi, vCard) --- */
.qr-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  width: 100%;
  max-width: 600px;
}

/* Estilos unificados para inputs nos geradores */
.tool-container input[type="url"],
.tool-container input[type="email"],
.tool-container input[type="tel"],
.tool-container input[type="password"],
.tool-container select,
.input-group input[type="url"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1em;
}

/* --- Estilos para Ferramentas (Geradores, etc.) --- */
.tool-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centraliza itens que não ocupam 100%, como o qrcode-container */
  gap: 15px;
}

.input-group {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 600px; /* Largura maior para o grupo de input */
}

/* Estilo específico para o input de PDF */
.input-container .file-upload-label {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 12px 20px;
  border: 1px solid #374151;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.input-container .file-upload-label:hover {
  background-color: #273244;
}
.input-container #pdfFileName {
  color: #4b5563;
  font-style: italic;
}

/* Textarea com o tema escuro solicitado */
.tool-container textarea {
  background-color: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1em;
  resize: vertical; /* Permite redimensionamento vertical */
  min-height: 44px; /* Altura inicial menor */
  flex-grow: 1;
}
.tool-container textarea::placeholder {
  color: #9ca3af;
}

/* --- Estilos para Documentação --- */

/* Link no cabeçalho (Desktop) */
.header-nav {
  margin-left: 20px;
}
.header-nav a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
}
.header-nav a:hover {
  color: #0056b3;
}

/* Link no menu lateral (Mobile) */
.nav-doc-link {
  display: none; /* Escondido por padrão */
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb; /* Linha separadora clara */
}
.nav-doc-link a {
  color: #007bff; /* Azul para bom contraste no fundo branco do nav */
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0 14px;
}

/* Lógica de responsividade para os links */
@media (max-width: 768px) {
  .header-nav { display: none; }
  .nav-doc-link { display: block; }
}

/* --- Estilos para a Seção de Ferramentas --- */
.tool-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0; /* Reset margin for the main section */
  width: 100%;
}

/* Elementos largos dentro da seção da ferramenta */
.tool-section > .section-description,
.tool-section > .options-toggle-header,
.tool-section > .advanced-options {
  width: 100%;
  max-width: 800px; /* Largura máxima para os elementos largos */
}
/* Adiciona espaçamento e separador entre as seções de ferramentas */
.tool-section + .tool-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb; /* Linha separadora suave */
}


/* --- Estilos para a Seção de Acesso Rápido (Página Inicial) --- */
.quick-access-section {
  width: 100%;
  max-width: 900px; /* Aumenta a largura máxima para acomodar mais botões */
  margin-bottom: 40px; /* Espaçamento antes da seção de histórico */
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.quick-access-title {
  text-align: center;
  font-size: 1.5rem;
  color: #1f2937;
  margin-top: 0;
  margin-bottom: 25px;
  border-bottom: none; /* Remove a borda padrão de h2 */
}

.quick-actions-grid {
  display: grid;
  /* Cria colunas flexíveis que se ajustam ao tamanho, com um mínimo de 120px */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
}

.quick-action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: #374151;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.quick-action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
}

.quick-action-button svg {
  width: 28px;
  height: 28px;
  stroke: #4b5563;
}

/* Estilos para o container da URL gerada pelo PDF */
.result-url-container {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.result-url-container textarea {
  width: 100%;
  height: 150px;
  padding: 12px;
  font-family: monospace;
  font-size: 0.9em;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f8f9fa;
  color: #1f2937;
  word-break: break-all;
  resize: vertical;
}
.result-url-container .char-count {
  text-align: right;
  font-size: 0.85em;
  color: #6c757d;
  margin: 0;
}

/* --- Estilos Específicos para a Página do Visualizador --- */
.viewer-page .container {
  display: block; /* Remove o layout de grid da página do visualizador */
}

.viewer-page main {
  max-width: 90%; /* Define a largura máxima para 90% */
  margin: 20px auto; /* Centraliza o conteúdo */
}

/* --- Estilos para a Notificação de Cópia --- */
.copy-notification {
  position: fixed;
  top: -100px; /* Começa fora da tela */
  left: 50%;
  transform: translateX(-50%);
  background-color: #28a745; /* Verde sucesso */
  color: white;
  padding: 12px 25px;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  font-weight: bold;
  transition: top 0.5s ease-in-out;
}

.copy-notification.show {
  top: 20px; /* Posição final na tela */
}

/* --- Estilos para o container de ações do PDF --- */
#pdf-result-actions {
  flex-direction: row;
  justify-content: center;
}
 
 /* --- Estilos da Seção de Histórico (Tema Escuro) --- */
 .history-section {
   width: 100%; /* Garante que o contêiner do histórico ocupe toda a largura disponível */
   align-self: stretch; /* Estica o item para preencher o contêiner flex pai (main) */
 }
 
 .history-header {
   background-color: #1e293b; /* Fundo escuro do cabeçalho */
   padding: 10px 20px;
   border-radius: 8px;
   color: #e2e8f0; /* Texto claro */
   font-weight: bold;
   margin: 0 auto 20px auto; /* Centraliza e adiciona margem inferior */
   width: 90%; /* Define a largura desejada */
 }
 
 #history-items {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 90%; /* Define a largura desejada */
   margin: 0 auto; /* Centraliza o container da grade */
 }
 
 .history-item {
   background-color: #2d3748; /* Fundo do item */
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #4a5568;
   display: flex;
   justify-content: space-between; /* Joga o conteúdo para a esquerda e as ações para a direita */
   align-items: center;
 }
 
 .history-item img {
   width: 64px;
   height: 64px;
   background: white; /* Fundo branco para a imagem do QR Code se destacar */
   border-radius: 4px;
   padding: 4px;
 }
 
 /* Novo: Contêiner para o código e o texto */
 .history-item-content {
   display: flex;
   align-items: center;
   gap: 15px;
   flex-grow: 1; /* Permite que este contêiner cresça */
   min-width: 0; /* Essencial para o truncamento de texto funcionar em flexbox */
 }
 
 /* Novo: Estilos para a área de texto */
 .history-item-text {
   color: #cbd5e0;
   min-width: 0; /* Ajuda no truncamento */
 }
 
 .history-item-text strong {
   color: #e2e8f0; /* Texto do título mais claro */
 }
 
 .history-item-text p {
   margin: 4px 0 0;
   font-size: 0.9em;
   white-space: nowrap; /* Impede a quebra de linha */
   overflow: hidden; /* Esconde o texto que transborda */
   text-overflow: ellipsis; /* Adiciona "..." */
   max-width: 45ch; /* Limita a largura máxima do texto */
 }
 
 /* Novo: Contêiner para os botões de ação */
 .history-item-actions {
   display: flex;
   gap: 8px;
   flex-shrink: 0; /* Impede que os botões encolham */
 }
 
 /* Novo: Estilo base para os botões do histórico */
 .btn-history-action {
   background-color: #4a5568; /* Cor de fundo do botão */
   color: #e2e8f0; /* Cor do texto */
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 500;
   transition: background-color 0.2s ease;
 }
 
 .btn-history-action:hover {
   background-color: #718096; /* Cor ao passar o mouse */
 }
 
 .btn-more-options {
   font-weight: bold;
 }

/* Estilos para o cabeçalho colapsável do histórico */
.history-toggle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1e293b;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none; /* Impede a seleção de texto ao clicar */
  transition: background-color 0.2s;
  width: 90%;
  margin: 0 auto 20px auto;
  border: 1px solid #3a475c;
}

.history-toggle-header:hover {
  background-color: #273244;
}

.toggle-text-wrapper {
  display: flex;
  flex-direction: column;
}

.history-toggle-header .toggle-title {
  font-weight: bold;
  color: #e2e8f0;
}

.history-toggle-header .toggle-action {
  font-size: 0.85em;
  color: #94a3b8;
  margin-top: 2px;
}

.toggle-arrow {
  border: solid #94a3b8;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg); /* Seta para baixo */
  transition: transform 0.2s ease-in-out;
}

.history-toggle-header.open .toggle-arrow {
  transform: rotate(-135deg); /* Seta para cima */
}

/* Estilos para o aviso do histórico */
.history-warning {
  color: #fcd34d; /* Amarelo/âmbar para atenção */
  background-color: rgba(251, 191, 36, 0.1);
  border-left: 3px solid #fbbF24;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 0.9em;
  width: 90%;
  margin: 0 auto 20px auto;
}

/* --- Estilos do Modal de Visualização --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none; /* Começa oculto */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  background-color: #ffffff; /* Fundo branco como solicitado */
  padding: 20px;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #333;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  z-index: 1001;
}

#modal-image {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 40px); /* Ajusta a altura máxima da imagem */
  object-fit: contain;
}

/* --- Estilos do Modal de Detalhes --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; /* Começa oculto */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.modal-content {
  background-color: #2d3748;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #4a5568;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
  width: 100%;
}

#modal-image-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

#modal-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-modal-action {
  background-color: #4a5568;
  color: #e2e8f0;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.btn-modal-action:hover {
  background-color: #718096;
}

.btn-modal-action.btn-danger {
  background-color: #c53030; /* Vermelho para ação de perigo */
}

.btn-modal-action.btn-danger:hover {
  background-color: #e53e3e;
}


/* --- Estilos do Popover de Mais Opções --- */
.popover {
  position: absolute;
  display: none; /* Começa oculto */
  background-color: #1e293b;
  border: 1px solid #4a5568;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1010;
  overflow: hidden;
}

.popover-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #e2e8f0;
  padding: 10px 20px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9em;
}

.popover-btn:hover {
  background-color: #273244;
}

/* --- Estilos do Modal de Edição --- */
#edit-modal .modal-content {
  max-width: 600px;
}

#edit-modal-textarea {
  width: 100%;
  background-color: #1e293b;
  color: #e2e8f0;
  border: 1px solid #4a5568;
  border-radius: 6px;
  padding: 10px;
  font-family: inherit;
  font-size: 1em;
  resize: vertical;
  box-sizing: border-box;
}

/* --- Estilos para o Sub-header de Opções do Gerador --- */
.options-toggle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
  transition: background-color 0.2s;
  width: 100%;
}

.options-toggle-header:hover {
  background-color: #e9ecef;
}

.options-toggle-header .toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  color: #343a40;
}

/* Estilização do select para ficar mais moderno */
.options-toggle-header .toggle-left select {
  appearance: none; /* Remove o estilo padrão do sistema */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  padding: 8px 30px 8px 12px; /* Mais padding para melhor visual */
  border-radius: 6px;
  border: 1px solid #ced4da;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1em;
}

.options-toggle-header .toggle-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.options-toggle-header .toggle-action-text {
  font-size: 0.85em;
  color: #6c757d;
}

/* Reutilizando o estilo da seta do histórico */
.options-toggle-header .toggle-arrow {
  border: solid #6c757d;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out;
}

.options-toggle-header.open .toggle-arrow {
  transform: rotate(-135deg);
}

/* Quando o header de opções estiver aberto, ele não terá margem inferior */
.options-toggle-header.open {
  margin-bottom: 0;
}

/* --- Estilos para as Opções Avançadas --- */
.advanced-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;  
  margin-top: 0; /* CORREÇÃO: Remove a margem negativa que causava a sobreposição */
  margin-bottom: 20px;
  width: 100%;
}

.option-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.option-item label {
  font-weight: 500;
  font-size: 0.9em;
  color: #495057;
}

.option-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  background-color: #fff;
  color: #212529;
  box-sizing: border-box;
}

/* Estilo para as dicas dentro das opções avançadas */
.option-hint {
  font-size: 0.85em;
  color: #6c757d; /* Cinza suave */
  margin: 5px 0 0 0; /* Espaçamento superior, sem margem inferior */
  padding-left: 2px;
  line-height: 1.4;
}
.option-hint a {
  color: #007bff;
  text-decoration: underline;
}

 .history-item-text .history-item-subtitle {
   margin: 4px 0 0;
  font-size: 0.95em;
  font-style: italic;
  color: #a0aec0; /* Cor mais suave para o subtítulo */
 }

 /* --- Estilos para Opções de Logotipo --- */
.logo-options-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-options-container input[type="file"] {
  flex-grow: 1; /* Faz o input ocupar o espaço */
}

.logo-options-container .btn-secondary {
  padding: 8px 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap; /* Impede que o texto quebre */
}

.logo-config-panel {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #dee2e6;
}

.logo-config-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-config-item label {
  font-size: 0.85em;
}

.logo-config-item .btn-secondary {
  padding: 6px 10px;
}

#logo-editor-container {
  width: 100%;
  height: 400px; /* Altura fixa para o container do editor */
  margin-bottom: 20px;
  background-color: #f0f0f0; /* Fundo claro para o container */
}

#logo-editor-container img {
  display: block;
  max-width: 100%;
}

.logo-editor-toolbar button {
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-weight: 500;
}

.logo-editor-toolbar button:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Estilo para o botão ativo na toolbar */
.logo-editor-toolbar button.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}


.logo-editor-toolbar button {
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-weight: 500;
}

.logo-editor-toolbar button:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Estilo para o botão ativo na toolbar */
.logo-editor-toolbar button.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}


.logo-editor-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.logo-editor-toolbar button {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #343a40;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.logo-editor-toolbar button:hover {
  background-color: #e9ecef;
}

/* --- Estilos para o Modal de Download de Cód. Barras --- */
.download-modal-content {
  background: #273244;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  max-width: 300px;
}
.download-modal-content h3 {
  margin-top: 0;
  color: white;
}
.download-modal-content .format-options button {
  margin: 5px; padding: 10px 20px; border: none; background: #4a6da7; color: white;
  border-radius: 5px; cursor: pointer; font-size: 16px;
}
.download-modal-content .format-options button:hover { background: #5a7db8; }


.logo-config-item label {
  flex-shrink: 0; /* Prevent label from shrinking */
}

/* Style for the font size value display */
#qr-title-size-value {
  font-weight: bold;
  color: #9ca3af;
  min-width: 40px; /* Give it some space */
  text-align: left;
}

.radio-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.radio-group input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-group label {
  display: inline-block;
  padding: 5px 12px;
  background-color: #4b5563;
  color: #e5e7eb;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  font-size: 0.9em;
  border: 1px solid #6b7280;
}

.radio-group input[type="radio"]:checked + label {
  background-color: #e5e7eb;
  color: #1f2937;
  font-weight: bold;
}

/* Custom styling for the range slider */
input[type=range] {
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #4b5563;
  border-radius: 5px;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  cursor: pointer;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #e5e7eb;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #4b5563;
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #e5e7eb;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #4b5563;
}

/* Styling for the preview modal */
#title-preview-container {
  padding: 20px;
  background-color: #f3f4f6;
  border-radius: 8px;
  margin: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Estilos para o Modal de Detalhes do Histórico --- */
.modal-overlay {
  position: fixed;
}