/* ==============================================
   MODAL DE INFORMAÇÕES - PÁGINA INDEX
   ============================================== 
   
   FUNCIONALIDADES:
   - ESC: Fecha o modal
   - Clique fora: Fecha o modal
   - Interface limpa e moderna
   ============================================== */

/* Prevenir scroll da página quando modal está aberto */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

.hidden {
  display: none !important;
}

.info-box-membro-fixo {
  background: var(--primary-light-glow-weak);
  border: 1px solid var(--primary-light-glow);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.info-box-membro-fixo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-light);
  margin-bottom: 4px;
}

.info-box-membro-fixo-content {
  color: var(--modal-title-color);
  font-size: 0.9rem;
}

/* Modal de Informações - PADRONIZADO */
#informacoesModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  backdrop-filter: var(--modal-overlay-blur);
  -webkit-backdrop-filter: var(--modal-overlay-blur);
  transition: opacity 0.3s ease;
  cursor: pointer;
  /* Indica que pode clicar para fechar */
}

#informacoesModal .info-modal-content {
  background: var(--card);
  margin: auto;
  padding: var(--modal-body-pad);
  border: var(--modal-content-border);
  border-radius: 12px;
  width: 90%;
  max-width: var(--modal-width-md);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--modal-content-shadow);
  animation: modalSlideIn 0.3s ease-out;
  position: relative;
  cursor: default;
  /* Cursor normal dentro do modal */
}

#informacoesModal .info-modal-header {
  display: none;
}

#informacoesModal.is-calculators .info-modal-content {
  padding: 0;
  overflow: hidden;
}

#informacoesModal .info-modal-calc-header {
  background: var(--modal-header-bg);
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  border-bottom: var(--modal-header-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  color: var(--primary-light);
}

#informacoesModal .info-modal-calc-header>i {
  font-size: var(--modal-icon-header);
  margin-right: 0;
  line-height: 1;
  flex-shrink: 0;
}

#informacoesModal .info-modal-calc-header h3 {
  font-size: 1.15rem;
  color: var(--modal-title-color);
  font-weight: 700;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
  text-shadow: none;
}

#informacoesModal .info-modal-calc-header .back-button {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0;
}


#informacoesModal .info-modal-calc-header .back-button:active:not(:disabled) {
  transform: none !important;
}
@media (hover: hover) {
  #informacoesModal .info-modal-calc-header .back-button:hover:not(:disabled) {
  transform: none !important;
}
}

#informacoesModal .info-modal-calc-header .input-modal-close {
  margin-left: auto;
  flex: 0 0 var(--modal-header-btn);
}

#informacoesModal .info-modal-calc-body {
  padding: var(--modal-body-pad);
}

/* Grupos do modal Ferramentas — lista compacta (escala com itens novos). */
#informacoesModal .info-modal-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

#informacoesModal .info-modal-group {
  margin: 0;
  padding: 0;
  border: none;
}

#informacoesModal .info-modal-calculators {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

#informacoesModal .info-modal-group__label {
  margin: 0 0 8px;
  padding: 0 2px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}

#informacoesModal .info-modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

#informacoesModal .info-option-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  min-height: 0;
  padding: 10px 12px;
}

@media (hover: hover) {
  #informacoesModal .info-option-card:hover {
  transform: none;
}
}

#informacoesModal .info-option-card .option-icon {
  flex-shrink: 0;
  width: 1.6em;
  margin-bottom: 0;
  font-size: 1.35rem;
  text-align: center;
}

#informacoesModal .info-option-card .option-copy {
  flex: 1;
  min-width: 0;
}

#informacoesModal .info-option-card .option-title,
#informacoesModal .info-option-card .option-description {
  text-align: left;
  margin-top: 0;
}

#informacoesModal .info-option-card .option-title {
  font-size: 0.82rem;
}

#informacoesModal .info-option-card .option-description {
  margin-top: 2px;
  font-size: 0.72rem;
}

/* Grid de opções (modais de comparação e demais) */
.info-modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 0;
}

.info-option-card {
  background: var(--modal-stat-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-decoration: none;
  color: var(--modal-title-color);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 120px;
  box-sizing: border-box;
}

@media (hover: hover) {
  .info-option-card:hover {
  border-color: var(--primary-light);
  background: var(--primary-light-glow-08);
  transform: translateY(-3px);
  color: var(--primary-light);
}
}

.info-option-card .option-icon {
  font-size: 2.2rem;
  color: var(--primary-light);
  margin-bottom: 10px;
}

/* Cores personalizadas para cada ícone */
.info-option-card[data-action="inf-comandante"] .option-icon i {
  color: var(--info);
  /* Azul para comandante */
}

.info-option-card[data-action="inf-alianca"] .option-icon i {
  color: var(--success);
  /* Verde para aliança/grupo */
}

.info-option-card[data-action="comparar-comandante"] .option-icon i {
  color: var(--danger);
  /* Vermelho para comparação */
}

.info-option-card[data-action="rank-aliancas"] .option-icon i,
.info-option-card[aria-label="Classificações"] .option-icon i {
  color: var(--warning);
  /* Dourado para troféu de alianças */
}

.info-option-card[data-action="rank-comandantes"] .option-icon i,
.info-option-card[aria-label="Classificação de Comandantes"] .option-icon i {
  color: var(--accent-purple);
  /* Roxo real para coroa de comandantes */
}

.info-option-card[data-action="avaliacao"] .option-icon i {
  color: var(--warning);
}

.info-option-card[data-action="gift-codes"] .option-icon i {
  color: var(--primary-light);
}

.info-option-card[data-action="calculators"] .option-icon i {
  color: var(--accent-teal);
}

.info-option-card[data-action="donate-bar"] .option-icon i {
  color: var(--accent-teal);
}

.info-option-card[data-action="officer-gear"] .option-icon i {
  color: var(--warning);
}

/* Efeito hover mantém as cores personalizadas */
@media (hover: hover) {
  .info-option-card:hover[data-action="inf-comandante"] .option-icon i {
  color: var(--info);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="inf-alianca"] .option-icon i {
  color: var(--success);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="comparar-comandante"] .option-icon i {
  color: var(--danger);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="rank-aliancas"] .option-icon i,
  .info-option-card:hover[aria-label="Classificações"] .option-icon i {
  color: var(--warning);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="rank-comandantes"] .option-icon i,
  .info-option-card:hover[aria-label="Classificação de Comandantes"] .option-icon i {
  color: var(--accent-purple);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="avaliacao"] .option-icon i {
  color: var(--warning);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="gift-codes"] .option-icon i {
  color: var(--primary-light);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="calculators"] .option-icon i {
  color: var(--accent-teal);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="donate-bar"] .option-icon i {
  color: var(--accent-teal);
}
}

@media (hover: hover) {
  .info-option-card:hover[data-action="officer-gear"] .option-icon i {
  color: var(--warning);
}
}

.info-option-card .option-title {
  font-family: var(--font-card-title);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  text-align: center;
  margin-top: 2px;
  max-width: 100%;
}

.info-option-card .option-description {
  font-family: var(--font-body, "Source Sans 3", sans-serif) !important;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none !important;
  color: var(--modal-btn-color);
  text-align: center;
  margin-top: 5px;
  line-height: 1.3;
}

@media (hover: hover) {
  .info-option-card:hover .option-description {
  color: var(--modal-title-color);
}
}

/* Animação de entrada do modal */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsividade */
@media (max-width: 768px) {
  .info-modal-options {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-option-card {
    min-height: 110px;
  }

  #informacoesModal .info-modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #informacoesModal .info-option-card {
    min-height: 0;
    padding: 10px 12px;
  }

  .info-option-card .option-title {
    font-size: 0.88rem;
    letter-spacing: 0.035em;
  }

  .info-option-card .option-description {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  #informacoesModal .info-modal-content {
    width: 95%;
    padding: var(--modal-body-pad);
    margin: 10px;
  }

  .info-modal-options {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-option-card {
    padding: 18px 12px;
    min-height: 100px;
  }

  #informacoesModal .info-modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #informacoesModal .info-option-card {
    padding: 10px 12px;
    min-height: 0;
  }

  .info-option-card .option-icon {
    font-size: 1.8rem;
  }

  #informacoesModal .info-option-card .option-icon {
    font-size: 1.35rem;
    margin-bottom: 0;
  }

  .info-option-card .option-title {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
  }

  .info-option-card .option-description {
    font-size: 0.7rem;
  }

  #informacoesModal .info-modal-header h3 {
    font-size: 1.15rem;
  }
}

@media (max-width: 360px) {
  #informacoesModal .info-modal-content {
    padding: 20px 15px;
  }

  .info-modal-options {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-option-card {
    padding: 15px 10px;
    min-height: 90px;
  }

  #informacoesModal .info-option-card {
    padding: 10px 12px;
    min-height: 0;
  }

  .info-option-card .option-icon {
    font-size: 1.5rem;
  }

  #informacoesModal .info-option-card .option-icon {
    font-size: 1.35rem;
    margin-bottom: 0;
  }

  .info-option-card .option-title {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }

  .info-option-card .option-description {
    font-size: 0.65rem;
  }
}

/* ==============================================
   MODAL DE INPUT ID MEMBRO - INF.ALIANÇA
   ============================================== */

/* Modal de Input ID Membro - padronizado */
#inputIdMembroModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: var(--modal-overlay-blur);
  -webkit-backdrop-filter: var(--modal-overlay-blur);
  transition: opacity 0.3s ease;
  /* Melhorar comportamento com teclado virtual - sem scroll desnecessário */
  overflow: hidden;
}

#inputIdMembroModal .input-modal-content {
  background: var(--card);
  margin: auto;
  padding: 0;
  border: var(--modal-content-border);
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  box-shadow: var(--modal-content-shadow);
  animation: modalSlideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

#inputIdMembroModal .input-modal-header {
  background: var(--modal-header-bg);
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  border-bottom: var(--modal-header-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--primary-light);
  box-sizing: border-box;
}

#inputIdMembroModal .input-modal-header .input-modal-close {
  margin-left: auto;
  flex-shrink: 0;
}

#inputIdMembroModal .input-modal-header>.input-modal-titulo-icone {
  flex: 0 0 auto;
  font-size: var(--modal-icon-header);
  line-height: 1;
  margin: 0;
}

#inputIdMembroModal .input-modal-header:not(.input-modal-header--com-voltar) h3 {
  text-align: left;
}

#inputIdMembroModal .input-modal-header.input-modal-header--com-voltar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: auto;
}

/* Ícone do título (não confundir com o <i> da seta dentro de .input-modal-back) */
#inputIdMembroModal .input-modal-header.input-modal-header--com-voltar>.input-modal-titulo-icone {
  flex: 0 0 auto;
  font-size: var(--modal-icon-header);
  line-height: 1;
  margin: 0;
}

#inputIdMembroModal .input-modal-header.input-modal-header--com-voltar>h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  text-align: left;
  font-weight: 500;
  text-shadow: none;
}

#inputIdMembroModal .input-modal-header.input-modal-header--com-voltar .input-modal-back {
  flex: 0 0 var(--modal-header-btn);
}

#inputIdMembroModal .input-modal-back {
  flex-shrink: 0;
}

#inputIdMembroModal .input-modal-back>i.fas,
#inputIdMembroModal .input-modal-back>i.fa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

@media (hover: hover) {
  #inputIdMembroModal .input-modal-back:hover {
  color: var(--action-neutral);
  background: var(--toolbar-hover-neutral-bg);
  border-color: var(--toolbar-hover-neutral-border);
  transform: none;
}
}

#inputIdMembroModal .input-modal-back.is-concealed {
  visibility: hidden;
  pointer-events: none;
}

#inputIdMembroModal .input-modal-header.input-modal-header--com-voltar .input-modal-header-spacer {
  flex: 0 0 var(--modal-header-btn);
  width: var(--modal-header-btn);
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Só o ícone do modo INF.ALIANÇA — nunca o <i> dentro do botão Voltar */
#inputIdMembroModal .input-modal-header:not(.input-modal-header--com-voltar)>i {
  font-size: var(--modal-icon-header);
  margin-right: 8px;
  line-height: 1;
}

#inputIdMembroModal .input-modal-header h3 {
  font-size: 1.15rem;
  color: var(--modal-title-color);
  font-weight: 700;
  margin: 0;
  flex: 1;
  line-height: 1.2;
  text-shadow: none;
}

#inputIdMembroModal .input-modal-close {
  /* size/cor/hover: design-tokens toolbar (neutro) */
  position: relative;
  line-height: 1;
}

#inputIdMembroModal .input-modal-body {
  padding: var(--modal-body-pad);
  text-align: center;
}

#inputIdMembroModal .input-modal-body p {
  color: var(--modal-body-color);
  color: color-mix(in srgb, var(--modal-title-color) 88%, transparent);
  margin-bottom: var(--modal-body-gap);
  font-size: 1rem;
}

#inputIdMembroModal .input-alianca-recentes-wrap {
  display: none;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  gap: 0;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--white-10);
  text-align: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: visible;
}

/* Cabeçalho “recentes”: mesmo layout nos dois modais; overflow visible p/ não cortar borda do limpar */
#inputIdMembroModal .input-alianca-recentes-header,
.hist-comparacao-cabecalho-geral {
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  min-height: var(--btn-xs-height);
  padding-inline-end: 2px;
  box-sizing: border-box;
  overflow: visible;
}

#inputIdMembroModal .input-alianca-recentes-label,
.hist-comparacao-cabecalho-titulo {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-50);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#inputIdMembroModal .input-alianca-recentes-label .fa-history,
.hist-comparacao-cabecalho-titulo .fa-history {
  color: var(--primary-light);
  opacity: 0.85;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Botão limpar (ícone): xs quadrado — borda sempre dentro do box */
.wpc-recentes-limpar {
  flex: 0 0 auto;
  width: var(--btn-xs-height);
  height: var(--btn-xs-height);
  min-width: var(--btn-xs-height);
  min-height: var(--btn-xs-height);
  max-width: var(--btn-xs-height);
  max-height: var(--btn-xs-height);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  background: var(--subcard);
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  overflow: visible;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.wpc-recentes-limpar .fa-broom {
  font-size: 0.72rem;
  opacity: 0.88;
  pointer-events: none;
}

@media (hover: hover) {
  .wpc-recentes-limpar:hover {
  background: var(--btn-unlink-bg);
  border-color: var(--btn-unlink-border);
  color: var(--btn-unlink-color);
}
}

/* Só a lista de chips faz scroll */
#inputIdMembroModal .input-alianca-recentes-chips-scroll {
  width: 100%;
  max-height: 88px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--white-22) var(--black-25);
}

#inputIdMembroModal .input-alianca-recentes-chips-scroll::-webkit-scrollbar {
  width: 5px;
}

#inputIdMembroModal .input-alianca-recentes-chips-scroll::-webkit-scrollbar-thumb {
  background: var(--white-20);
  border-radius: 4px;
}

#inputIdMembroModal .input-alianca-recentes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-content: flex-start;
}

#inputIdMembroModal .input-alianca-rec-chip {
  appearance: none;
  max-width: 100%;
  border: 1px solid var(--white-12);
  background: var(--black-32);
  color: var(--modal-body-color);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 1px 2px var(--black-20);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  #inputIdMembroModal .input-alianca-rec-chip:hover {
  border-color: var(--primary-light-glow);
  background: var(--primary-light-glow-12);
  color: var(--modal-title-color);
  box-shadow: 0 2px 10px rgba(var(--warning-rgb), 0.15);
}
}

#inputIdMembroModal #inputIdMembro {
  width: 100%;
  padding: 12px 15px;
  border: var(--modal-content-border);
  border-radius: var(--input-radius);
  background: var(--modal-input-bg);
  color: var(--modal-body-color);
  font-size: 1rem;
  margin-bottom: 25px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

#inputIdMembroModal #inputIdMembro:focus {
  outline: none;
  border-color: var(--primary-light);
  background: var(--modal-input-bg-focus);
}

#inputIdMembroModal #inputIdMembro::placeholder {
  color: var(--text-muted);
}

#inputIdMembroModal .btn-cancelar,
#inputIdMembroModal .btn-buscar {
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (hover: hover) {
  #inputIdMembroModal .btn-cancelar:hover {
  transform: none;
}
}

@media (hover: hover) {
  #inputIdMembroModal .btn-buscar:hover {
  transform: none;
}
}

#inputIdMembroModal .btn-buscar:disabled {
  background: var(--modal-btn-bg);
  border: var(--modal-btn-border);
  color: var(--modal-btn-color);
  cursor: not-allowed;
  transform: none;
}

#inputIdMembroModal .btn-buscar.carregando {
  background: var(--info);
  color: var(--modal-title-color);
  cursor: wait;
  transform: none;
  box-shadow: 0 0 15px rgba(var(--info-rgb), 0.4);
  animation: pulse 1.5s infinite;
}

.mensagem-erro {
  background: linear-gradient(135deg, var(--danger), var(--danger));
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 2px 8px rgba(var(--danger-rgb), 0.3);
  animation: slideInError 0.3s ease-out;
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade para modal de input */
@media (max-width: 480px) {
  #inputIdMembroModal .input-modal-content {
    width: 95%;
    margin: 10px;
    /* Melhorar comportamento com teclado virtual */
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--modal-scrollbar-thumb) var(--modal-scrollbar-track);
    -webkit-overflow-scrolling: touch;
    /* Garantir que o modal seja sempre visível */
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

  #inputIdMembroModal .input-modal-header {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
  }

  #inputIdMembroModal .input-modal-header h3 {
    font-size: 1.15rem;
  }

  #inputIdMembroModal .input-modal-body {
    padding: var(--modal-body-pad);
  }

  #inputIdMembroModal .btn-cancelar,
  #inputIdMembroModal .btn-buscar {
    font-size: 14px;
  }

  /* Ajustes específicos para teclado virtual - posicionamento centralizado */
  #inputIdMembroModal {
    align-items: center;
    justify-content: center;
    /* Remover qualquer scroll do container principal */
    overflow: hidden;
    /* Garantir que o modal fique sempre visível */
    padding: 20px 0;
    /* Usar viewport units para melhor compatibilidade */
    min-height: 100dvh;
    /* Dynamic viewport height para mobile */
  }

  /* Quando o teclado estiver aberto, ajustar posicionamento (topo para ficar visível) */
  #inputIdMembroModal.keyboard-open {
    align-items: flex-start;
    padding: 10px 0;
  }

  #inputIdMembroModal.keyboard-open .input-modal-content {
    max-height: 70vh;
    transform: translateY(-20px);
  }

  /* Ajustes específicos para diferentes tipos de teclado */
  #inputIdMembroModal.keyboard-gboard .input-modal-content {
    max-height: 75vh;
    /* Gboard: posicionamento mais conservador */
  }

  #inputIdMembroModal.keyboard-swiftkey .input-modal-content {
    max-height: 65vh;
    /* SwiftKey: pode usar mais espaço */
  }

  #inputIdMembroModal.keyboard-generico .input-modal-content {
    max-height: 70vh;
    /* Teclado genérico: meio termo */
  }
}

/* ==============================================
   MODAL DE INPUT IDs COMANDANTES - COMPARAR COMANDANTE
   ============================================== */

/* Modal de Input IDs Comandantes - padronizado */
#inputIdsComandantesModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100003;
  backdrop-filter: var(--modal-overlay-blur);
  -webkit-backdrop-filter: var(--modal-overlay-blur);
  transition: opacity 0.3s ease;
  /* Melhorar comportamento com teclado virtual - sem scroll desnecessário */
  overflow: hidden;
}

#inputIdsComandantesModal .input-modal-content {
  background: var(--card);
  margin: auto;
  padding: 0;
  border: var(--modal-content-border);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: var(--modal-content-shadow);
  animation: modalSlideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

#inputIdsComandantesModal .input-modal-header {
  background: var(--modal-header-bg);
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  border-bottom: var(--modal-header-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--primary-light);
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: auto;
}

#inputIdsComandantesModal .input-modal-header>.input-modal-titulo-icone {
  flex: 0 0 auto;
  font-size: var(--modal-icon-header);
  line-height: 1;
  margin: 0;
}

#inputIdsComandantesModal .input-modal-header>h3 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

#inputIdsComandantesModal .input-modal-close {
  /* size/cor/hover: design-tokens toolbar (neutro) */
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

#inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: auto;
}

#inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar>.input-modal-titulo-icone {
  flex: 0 0 auto;
  font-size: var(--modal-icon-header);
  line-height: 1;
  margin: 0;
}

#inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar>h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  text-align: left;
  font-weight: 500;
  text-shadow: none;
}

#inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar .input-modal-back {
  flex: 0 0 var(--modal-header-btn);
}

#inputIdsComandantesModal .input-modal-back {
  flex-shrink: 0;
}

#inputIdsComandantesModal .input-modal-back>i.fas,
#inputIdsComandantesModal .input-modal-back>i.fa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

@media (hover: hover) {
  #inputIdsComandantesModal .input-modal-back:hover {
  color: var(--action-neutral);
  background: var(--toolbar-hover-neutral-bg);
  border-color: var(--toolbar-hover-neutral-border);
  transform: none;
}
}

#inputIdsComandantesModal .input-modal-back.is-concealed {
  visibility: hidden;
  pointer-events: none;
}

#inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar .input-modal-header-spacer {
  flex: 0 0 var(--modal-header-btn);
  width: var(--modal-header-btn);
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Não usar `.input-modal-header i` — apanha o <i> da seta dentro do botão e desalinha tudo */

#inputIdsComandantesModal .input-modal-header h3 {
  font-size: 1.15rem;
  color: var(--modal-title-color);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  flex: 1;
  text-shadow: none;
}

#inputIdsComandantesModal .input-modal-body {
  padding: var(--modal-body-pad);
  text-align: center;
}

#inputIdsComandantesModal .input-modal-body p {
  color: var(--modal-body-color);
  color: color-mix(in srgb, var(--modal-title-color) 88%, transparent);
  margin-bottom: var(--modal-body-gap);
  font-size: 1rem;
}

#inputIdsComandantesModal .input-group,
#inputIdMembroModal .input-group {
  margin-bottom: var(--modal-body-gap);
  text-align: left;
}

#inputIdsComandantesModal .input-group label,
#inputIdMembroModal .input-group label {
  display: block;
  color: var(--modal-title-color);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#inputIdsComandantesModal .input-group input,
#inputIdMembroModal .input-group input {
  width: 100%;
  padding: 12px 15px;
  border: var(--modal-content-border);
  border-radius: var(--input-radius);
  background: var(--modal-input-bg);
  color: var(--modal-body-color);
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

#inputIdsComandantesModal .input-group input:focus,
#inputIdMembroModal .input-group input:focus {
  outline: none;
  border-color: var(--primary-light);
  background: var(--modal-input-bg-focus);
}

#inputIdsComandantesModal .input-group input::placeholder,
#inputIdMembroModal .input-group input::placeholder {
  color: var(--text-muted);
}

#inputIdsComandantesModal .input-modal-buttons {
  margin-top: 25px;
}

#inputIdsComandantesModal .btn-cancelar,
#inputIdsComandantesModal .btn-buscar {
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (hover: hover) {
  #inputIdsComandantesModal .btn-cancelar:hover {
  transform: none;
}
}

#inputIdsComandantesModal .btn-buscar {
  text-align: center;
}

@media (hover: hover) {
  #inputIdsComandantesModal .btn-buscar:hover {
  transform: none;
  box-shadow: none;
}
}

#inputIdsComandantesModal .btn-buscar:disabled {
  background: var(--modal-btn-bg);
  border: var(--modal-btn-border);
  color: var(--modal-btn-color);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#inputIdsComandantesModal .btn-buscar.carregando {
  background: var(--info);
  color: var(--modal-title-color);
  cursor: wait;
  transform: none;
  box-shadow: 0 0 15px rgba(var(--info-rgb), 0.4);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 15px rgba(var(--info-rgb), 0.4);
  }

  50% {
    box-shadow: 0 0 25px rgba(var(--info-rgb), 0.6);
  }

  100% {
    box-shadow: 0 0 15px rgba(var(--info-rgb), 0.4);
  }
}

/* Responsividade para modal de input de comandantes */
@media (max-width: 768px) {
  #inputIdsComandantesModal .input-modal-content {
    width: 95%;
    margin: 20px;
    /* Melhorar comportamento com teclado virtual */
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--modal-scrollbar-thumb) var(--modal-scrollbar-track);
    -webkit-overflow-scrolling: touch;
    /* Garantir que o modal seja sempre visível */
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

  #inputIdsComandantesModal .input-modal-header {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
  }

  #inputIdsComandantesModal .input-modal-header h3 {
    font-size: 1.15rem;
  }

  #inputIdsComandantesModal .input-modal-body {
    padding: var(--modal-body-pad);
  }

  #inputIdsComandantesModal .btn-cancelar,
  #inputIdsComandantesModal .btn-buscar {
    font-size: 14px;
  }

  /* Ajustes específicos para teclado virtual */
  #inputIdsComandantesModal {
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }

  /* Quando o teclado estiver aberto, ajustar posicionamento */
  #inputIdsComandantesModal.keyboard-open {
    align-items: flex-start;
    padding-top: 10vh;
  }

  #inputIdsComandantesModal.keyboard-open .input-modal-content {
    max-height: 50vh;
  }
}

@media (max-width: 480px) {
  #inputIdsComandantesModal .input-modal-header {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
  }

  #inputIdsComandantesModal .input-modal-header h3 {
    font-size: 1.15rem;
  }

  #inputIdsComandantesModal .input-modal-body {
    padding: var(--modal-body-pad);
  }

  /* Ajustes adicionais para mobile pequeno */
  #inputIdsComandantesModal .input-modal-content {
    width: 95%;
    margin: 10px;
    max-height: 85vh;
  }
}

/* Scroll padronizado para modais de input (quando overflow-y: auto) */
#inputIdMembroModal .input-modal-content::-webkit-scrollbar,
#inputIdsComandantesModal .input-modal-content::-webkit-scrollbar {
  width: 8px;
}

#inputIdMembroModal .input-modal-content::-webkit-scrollbar-track,
#inputIdsComandantesModal .input-modal-content::-webkit-scrollbar-track {
  background: var(--modal-scrollbar-track);
  border-radius: 4px;
}

#inputIdMembroModal .input-modal-content::-webkit-scrollbar-thumb,
#inputIdsComandantesModal .input-modal-content::-webkit-scrollbar-thumb {
  background: var(--modal-scrollbar-thumb);
  border-radius: 4px;
}

@media (hover: hover) {
  #inputIdMembroModal .input-modal-content::-webkit-scrollbar-thumb:hover,
  #inputIdsComandantesModal .input-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--modal-scrollbar-thumb-hover);
}
}

/* ==============================================
   MODO DE TROCA - CAIXA DE MEMBRO FIXO
   ============================================== */

/* Estilos inline já aplicados no JS, mas garantindo consistência */
#inputIdsComandantesModal .input-group div[style*="background: var(--primary-light"] {
  transition: all 0.3s ease;
}

@media (hover: hover) {
  #inputIdsComandantesModal .input-group div[style*="background: var(--primary-light"]:hover {
  background: var(--primary-light-glow-15) !important;
  border-color: var(--primary-light-glow-40) !important;
}
}

/* ==============================================
   MODAL DE ESCOLHA DE TIPO DE COMPARAÇÃO
   (Comandante | Aliança) — reaproveita tokens dos demais modais
   ============================================== */

#modalEscolhaComparacao,
#modalEscolhaMetodoAlianca {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  /* Blur só no fundo; painel usa isolation para texto nítido (evita “borrado” no conteúdo) */
  backdrop-filter: var(--modal-overlay-blur);
  -webkit-backdrop-filter: var(--modal-overlay-blur);
  transition: opacity 0.3s ease;
  overflow: hidden;
}

/* Mesma largura máxima que #informacoesModal .info-modal-content (600px) */
#modalEscolhaComparacao .input-modal-content {
  background: var(--card);
  margin: auto;
  padding: 0;
  border: var(--modal-content-border);
  border-radius: 12px;
  width: 90%;
  max-width: var(--modal-width-md);
  box-shadow: var(--modal-content-shadow);
  animation: modalSlideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

#modalEscolhaMetodoAlianca .input-modal-content {
  background: var(--card);
  margin: auto;
  padding: 0;
  border: var(--modal-content-border);
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  box-shadow: var(--modal-content-shadow);
  animation: modalSlideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

#modalEscolhaComparacao .input-modal-header,
#modalEscolhaMetodoAlianca .input-modal-header {
  background: var(--modal-header-bg);
  padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
  min-height: var(--modal-header-height);
  border-bottom: var(--modal-header-border);
  display: flex;
  align-items: center;
  color: var(--primary-light);
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: auto;
}

#modalEscolhaComparacao .input-modal-header>i,
#modalEscolhaMetodoAlianca .input-modal-header>i {
  font-size: var(--modal-icon-header);
  margin-right: 0;
  line-height: 1;
  flex-shrink: 0;
}

#modalEscolhaComparacao .input-modal-header h3,
#modalEscolhaMetodoAlianca .input-modal-header h3 {
  font-size: 1.15rem;
  color: var(--modal-title-color);
  font-weight: 700;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  text-shadow: none;
  text-align: left;
}

#modalEscolhaComparacao .back-button,
#modalEscolhaMetodoAlianca .back-button {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0;
}


#modalEscolhaComparacao .back-button:active:not(:disabled),
#modalEscolhaMetodoAlianca .back-button:active:not(:disabled) {
  transform: none !important;
}
@media (hover: hover) {
  #modalEscolhaComparacao .back-button:hover:not(:disabled),
  #modalEscolhaMetodoAlianca .back-button:hover:not(:disabled) {
  transform: none !important;
}
}

#modalEscolhaComparacao .back-button.hidden,
#modalEscolhaMetodoAlianca .back-button.hidden {
  display: none !important;
}

#modalEscolhaComparacao .input-modal-header .input-modal-close,
#modalEscolhaMetodoAlianca .input-modal-header .input-modal-close {
  margin-left: auto;
  flex: 0 0 var(--modal-header-btn);
}

#modalEscolhaComparacao .input-modal-rodape-voltar {
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

/* Entre os cards e o bloco «Recentes» (Voltar acima do histórico) */
#modalEscolhaComparacao .input-modal-rodape-voltar--antes-historico {
  margin-bottom: 6px;
}

#modalEscolhaComparacao .input-modal-buttons--rodape-voltar {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 0;
}

#modalEscolhaComparacao .input-modal-buttons--rodape-voltar .btn-cancelar.btn-voltar-com-icone {
  flex: 0 1 auto;
  width: auto;
  max-width: 200px;
  min-width: 7.25rem;
  /* altura: tokens sm — não sobrescrever com padding 12px */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background: var(--modal-btn-bg);
  border: var(--modal-btn-border);
  color: var(--modal-btn-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

#modalEscolhaComparacao .input-modal-buttons--rodape-voltar .btn-cancelar.btn-voltar-com-icone .fa-arrow-left {
  font-size: 0.88em;
  opacity: 0.95;
}

@media (hover: hover) {
  #modalEscolhaComparacao .input-modal-buttons--rodape-voltar .btn-cancelar.btn-voltar-com-icone:hover {
  background: var(--primary-light-glow-08);
  border-color: var(--primary-light-glow);
  transform: translateY(-2px);
}
}

/* Ícone + texto nos «Voltar» dos modais de ID (lado a lado com Buscar/Comparar) */
#inputIdMembroModal .btn-voltar-com-icone,
#inputIdsComandantesModal .btn-voltar-com-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

#inputIdMembroModal .btn-voltar-com-icone .fa-arrow-left,
#inputIdsComandantesModal .btn-voltar-com-icone .fa-arrow-left {
  font-size: 0.88em;
  opacity: 0.95;
}

#modalEscolhaComparacao .input-modal-body {
  padding: var(--modal-body-pad);
  text-align: center;
}

#modalEscolhaMetodoAlianca .input-modal-body {
  padding: var(--modal-body-pad);
  text-align: center;
}

#modalEscolhaComparacao .input-modal-body p,
#modalEscolhaMetodoAlianca .input-modal-body p {
  color: var(--modal-body-color);
  color: color-mix(in srgb, var(--modal-title-color) 88%, transparent);
  margin: 0 0 var(--modal-body-gap);
  font-size: 1rem;
}

#modalEscolhaComparacao .input-modal-back,
#modalEscolhaMetodoAlianca .input-modal-back {
  flex-shrink: 0;
}

#modalEscolhaComparacao .input-modal-back i.fas,
#modalEscolhaComparacao .input-modal-back i.fa,
#modalEscolhaMetodoAlianca .input-modal-back i.fas,
#modalEscolhaMetodoAlianca .input-modal-back i.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

@media (hover: hover) {
  #modalEscolhaComparacao .input-modal-back:hover,
  #modalEscolhaMetodoAlianca .input-modal-back:hover {
  color: var(--action-neutral);
  background: var(--toolbar-hover-neutral-bg);
  border-color: var(--toolbar-hover-neutral-border);
  transform: none;
}
}

#modalEscolhaComparacao .input-modal-close,
#modalEscolhaMetodoAlianca .input-modal-close {
  /* size/cor/hover: design-tokens toolbar (neutro) */
  line-height: 1;
}

#modalEscolhaComparacao .escolha-comparacao-subtitle {
  margin: 0 0 20px;
  color: var(--modal-body-color);
  color: color-mix(in srgb, var(--modal-title-color) 92%, transparent);
  font-family: var(--font-body, "Source Sans 3", sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
}

/* Nome da aliança fixa na pergunta contextual (mesma família de cor do cartão Classificação) */
#modalEscolhaComparacao .escolha-comparacao-nome-ref {
  color: var(--warning);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #modalEscolhaComparacao .escolha-comparacao-nome-ref {
    white-space: normal;
  }
}

/* Mesma lista compacta do modal Ferramentas */
#modalEscolhaComparacao .info-modal-options.info-modal-options--comparacao {
  display: block;
  margin-top: 0;
  width: 100%;
}

#modalEscolhaComparacao .info-modal-options--comparacao-par {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

@media (min-width: 520px) {
  #modalEscolhaComparacao .info-modal-options--comparacao-par {
    grid-template-columns: 1fr 1fr;
  }
}

#modalEscolhaComparacao .info-modal-options--comparacao-par>.info-option-card {
  flex: none;
  width: 100%;
  max-width: none;
  min-height: 0;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  padding: 10px 12px;
}

@media (hover: hover) {
  #modalEscolhaComparacao .info-modal-options--comparacao-par>.info-option-card:hover {
  transform: none;
}
}

#modalEscolhaComparacao .info-modal-options--comparacao-par .option-icon {
  flex-shrink: 0;
  width: 1.6em;
  margin-bottom: 0;
  font-size: 1.35rem;
  text-align: center;
}

#modalEscolhaComparacao .info-modal-options--comparacao-par .option-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

#modalEscolhaComparacao .info-modal-options--comparacao-par .option-title,
#modalEscolhaComparacao .info-modal-options--comparacao-par .option-description {
  text-align: left;
  margin-top: 0;
}

#modalEscolhaComparacao .info-modal-options--comparacao-par .option-title {
  font-size: 0.82rem;
}

#modalEscolhaComparacao .info-modal-options--comparacao-par .option-description {
  font-size: 0.72rem;
}

#modalEscolhaComparacao button.info-option-card {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

#modalEscolhaComparacao .info-option-card:focus-visible {
  outline: none;
}

#modalEscolhaComparacao .info-option-card[data-metodo="id"] .option-icon i {
  color: var(--danger);
}

#modalEscolhaComparacao .info-option-card[data-metodo="classificacao"] .option-icon i {
  color: var(--warning);
}

@media (hover: hover) {
  #modalEscolhaComparacao .info-option-card:hover[data-metodo="id"] .option-icon i {
  color: var(--danger);
}
}

@media (hover: hover) {
  #modalEscolhaComparacao .info-option-card:hover[data-metodo="classificacao"] .option-icon i {
  color: var(--warning);
}
}

#modalEscolhaComparacao .info-option-card[data-escolha="comandante"] .option-icon i {
  color: var(--info);
}

#modalEscolhaComparacao .info-option-card[data-escolha="alianca"] .option-icon i {
  color: var(--success);
}

@media (hover: hover) {
  #modalEscolhaComparacao .info-option-card:hover[data-escolha="comandante"] .option-icon i {
  color: var(--info);
}
}

@media (hover: hover) {
  #modalEscolhaComparacao .info-option-card:hover[data-escolha="alianca"] .option-icon i {
  color: var(--success);
}
}

/* Agrupamento “Recentes” + separação cmd / aliança */
.hist-comparacao-agrupamento {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Cabeçalho / título / .wpc-recentes-limpar: ver bloco unificado acima (#inputIdMembroModal + .hist-comparacao) */

.hist-comparacao-corpo-scroll {
  width: 100%;
  max-height: 88px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--white-22) var(--black-25);
}

.hist-comparacao-corpo-scroll::-webkit-scrollbar {
  width: 5px;
}

.hist-comparacao-corpo-scroll::-webkit-scrollbar-thumb {
  background: var(--white-20);
  border-radius: 4px;
}

.hist-comparacao-separador-interno {
  height: 1px;
  margin: 10px 0 12px;
  background: linear-gradient(90deg,
      transparent,
      var(--white-14) 15%,
      var(--white-14) 85%,
      transparent);
}

.hist-chip-nome--entra {
  color: var(--info);
  font-weight: 700;
}

.hist-chip-nome--fora {
  opacity: 0.42;
  font-weight: 500;
}

.hist-chip-nome--escolher {
  opacity: 0.88;
  font-style: italic;
}

.hist-comparacao-chip--troca-bloqueada {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (hover: hover) {
  .hist-comparacao-chip--troca-bloqueada:hover {
  border-color: var(--white-14);
  background: var(--black-25);
}
}

#modalEscolhaComparacao .mensagem-erro--escolha-metodo {
  margin-bottom: 10px;
  text-align: center;
}

/* Histórico: scroll só em .hist-comparacao-corpo-scroll (cabecalho fixo) */
.hist-comparacao-raiz {
  max-height: none;
  /* visible: overflow-x:hidden cortava a borda direita do .wpc-recentes-limpar */
  overflow: visible;
}

/* Scrollbar discreta no tema escuro (WebKit / Chromium) */
.input-modal .hist-comparacao-raiz::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.input-modal .hist-comparacao-raiz::-webkit-scrollbar-track {
  background: var(--black-35);
  border-radius: 6px;
}

.input-modal .hist-comparacao-raiz::-webkit-scrollbar-thumb {
  background: var(--white-22);
  border-radius: 6px;
}

@media (hover: hover) {
  .input-modal .hist-comparacao-raiz::-webkit-scrollbar-thumb:hover {
  background: var(--white-35);
}
}

.hist-comparacao-raiz[hidden] {
  display: none !important;
}

.hist-comparacao-raiz--apos-grid {
  margin-top: 14px;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid var(--white-10);
}

.hist-comparacao-linha--vazio {
  margin-bottom: 0;
}

.hist-comparacao-msg-vazia {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--modal-btn-color);
  padding: 2px 0 0;
}

.hist-comparacao-raiz--input.hist-comparacao-raiz--apos-grid {
  max-height: none;
  margin-top: 12px;
  padding-top: 14px;
}

.hist-comparacao-linha {
  margin-bottom: 10px;
}

.hist-comparacao-linha:last-child {
  margin-bottom: 0;
}

.hist-comparacao-linha-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--modal-btn-color);
  margin-bottom: 6px;
  opacity: 0.9;
}

.hist-comparacao-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hist-comparacao-chip {
  appearance: none;
  border: 1px solid var(--white-12);
  background: var(--black-32);
  color: var(--modal-body-color);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 1px 2px var(--black-20);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

@media (hover: hover) {
  .hist-comparacao-chip:hover {
  border-color: var(--primary-light-glow);
  background: var(--primary-light-glow-12);
  color: var(--modal-title-color);
  box-shadow: 0 2px 10px rgba(var(--warning-rgb), 0.15);
}
}

.hist-comparacao-chip-txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(280px, 85vw);
}

/* Histórico dentro de modais de input (IDs): também centrado */
.input-modal .hist-comparacao-raiz--apos-grid {
  text-align: center;
}

.input-modal .hist-comparacao-cabecalho-geral {
  justify-content: space-between;
  text-align: left;
}

.input-modal .hist-comparacao-cabecalho-titulo {
  justify-content: flex-start;
}

.input-modal .hist-comparacao-linha-label {
  justify-content: center;
  text-transform: none;
  letter-spacing: 0.03em;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--white-50);
}

.input-modal .hist-comparacao-chips {
  justify-content: center;
}

.input-modal .hist-comparacao-msg-vazia {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 20rem;
}

/* ===== Tablet e mobile ===== */
@media (max-width: 600px) {
  #modalEscolhaComparacao .input-modal-content {
    width: 94%;
    max-width: 600px;
  }

  #modalEscolhaComparacao .input-modal-header,
  #modalEscolhaMetodoAlianca .input-modal-header {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
    gap: 8px;
  }

  #inputIdsComandantesModal .input-modal-header,
  #inputIdMembroModal .input-modal-header {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
    gap: 8px;
  }

  #inputIdsComandantesModal .input-modal-header.input-modal-header--com-voltar,
  #inputIdMembroModal .input-modal-header.input-modal-header--com-voltar {
    padding: var(--modal-header-pad-y) var(--modal-header-pad-x);
    min-height: var(--modal-header-height);
    gap: 8px;
  }

  #modalEscolhaComparacao .input-modal-header>i {
    font-size: var(--modal-icon-header);
    margin-right: 0;
  }

  #modalEscolhaComparacao .input-modal-header h3 {
    font-size: 1.15rem;
  }

  #modalEscolhaComparacao .input-modal-close {
    width: var(--modal-header-btn);
    height: var(--modal-header-btn);
    font-size: 0.95rem;
  }

  #modalEscolhaComparacao .input-modal-body {
    padding: var(--modal-body-pad);
  }

  #modalEscolhaComparacao .escolha-comparacao-subtitle {
    margin-bottom: 14px;
    font-size: 0.9rem;
  }

  #modalEscolhaComparacao .info-modal-options--comparacao-par>.info-option-card {
    min-height: 0;
    width: 100%;
    max-width: none;
  }

  .hist-comparacao-chip-txt {
    max-width: 72vw;
  }
}

/* ===== Telas muito estreitas ===== */
@media (max-width: 360px) {
  #modalEscolhaComparacao .info-modal-options--comparacao-par>.info-option-card {
    padding: 10px 12px;
  }
}

#modalEscolhaComparacao .hist-comparacao-raiz--escolha-metodo {
  max-height: none;
}

/* Escolha de aliança ao usar histórico na troca (par sem a mantida) */
.input-modal .hist-troca-escolha-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--black-55);
  border-radius: inherit;
  box-sizing: border-box;
}

.input-modal .hist-troca-escolha-box {
  width: 100%;
  max-width: 340px;
  padding: 16px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--modal-btn-border);
  box-shadow: 0 8px 32px var(--black-45);
  pointer-events: auto;
  text-align: center;
}

.input-modal .hist-troca-escolha-titulo {
  margin: 0 0 14px 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
}

.input-modal .hist-troca-escolha-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-modal .hist-troca-escolha-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--primary-light-glow-08);
  border-radius: 8px;
  background: var(--modal-input-bg);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
  pointer-events: auto;
}

@media (hover: hover) {
  .input-modal .hist-troca-escolha-btn:hover {
  border-color: var(--primary-light);
  background: var(--primary-light-glow-08);
}
}

.input-modal .hist-troca-escolha-tag {
  font-weight: 500;
  font-size: 0.95rem;
  word-break: break-word;
}

.input-modal .hist-troca-escolha-gid {
  font-size: 0.78rem;
  opacity: 0.75;
}

.input-modal .hist-troca-escolha-cancel {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.input-modal .hist-troca-escolha-cancel.btn-voltar-com-icone {
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 90%;
  min-width: unset;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  box-sizing: border-box;
}

.input-modal .hist-troca-escolha-cancel.btn-voltar-com-icone .fa-arrow-left {
  font-size: 0.88em;
  opacity: 0.95;
}

/* Fechar/Voltar no overlay de escolha — centralizado; não herdar inline-flex do rodapé do modal */
#inputIdsComandantesModal .hist-troca-escolha-overlay .hist-troca-escolha-fechar,
#inputIdMembroModal .hist-troca-escolha-overlay .hist-troca-escolha-fechar {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* Fechar no overlay «Qual aliança usar?» — mesmo padrão compacto do Voltar do modal de escolha */
.input-modal .hist-troca-escolha-fechar {
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 90%;
  min-width: unset;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
  background: var(--modal-btn-bg);
  border: var(--modal-btn-border);
  color: var(--modal-btn-color);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .input-modal .hist-troca-escolha-fechar:hover {
  background: var(--primary-light-glow-08);
  border-color: var(--primary-light-glow);
}
}

.input-modal .hist-troca-escolha-fechar:active {
  transform: translateY(1px);
}

.input-modal .hist-troca-escolha-fechar .fa-times {
  font-size: 0.82em;
  opacity: 0.88;
}