/* ══════════════════════════════════════════════
   GERADOR DE REPETIDORES — TEMA ESCURO
   Fundo base: #101927
   ══════════════════════════════════════════════ */

/* ── Wrapper ── */
.grm-wrap {
  max-width: 660px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e8edf2;
  background: #101927;
  padding: 2rem;
  border-radius: 14px;
  border: 1px solid #2a3f5a;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

.grm-titulo {
  font-size: 1.5rem;
  margin-bottom: .25rem;
  color: #ffffff;
}

.grm-subtitulo {
  color: #8fa8c0;
  font-size: .93rem;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.grm-subtitulo code {
  background: #1c2d40;
  color: #5bc4f5;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-size: .88rem;
  border: 1px solid #2a3f5a;
}

.grm-subtitulo strong {
  color: #f0c040;
}

/* ── Grupos ── */
.grm-grupo {
  margin-bottom: 1.4rem;
}

.grm-grupo label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  font-size: .97rem;
  color: #c8d8e8;
}

.grm-obrigatorio { color: #f05060; margin-left: 2px; }
.grm-opcional    { font-weight: 400; font-size: .82rem; color: #5a7a95; }

.grm-grupo input[type="text"] {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid #2a3f5a;
  border-radius: 8px;
  font-size: .97rem;
  box-sizing: border-box;
  background: #0d1e2e;
  color: #e8edf2;
  transition: border-color .2s, box-shadow .2s;
}

.grm-grupo input[type="text"]::placeholder {
  color: #3a5570;
}

.grm-grupo input[type="text"]:focus {
  border-color: #3a8fc4;
  outline: none;
  box-shadow: 0 0 0 3px rgba(58,143,196,.18);
  background: #0f2234;
}

.grm-hint {
  font-size: .81rem;
  color: #5a7a95;
  margin-top: .38rem;
}

/* ── Autocomplete ── */
.grm-autocomplete-wrap { position: relative; }

.grm-suggestions {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #0f1f30;
  border: 1.5px solid #2a3f5a;
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.grm-suggestions li {
  padding: .65rem 1rem;
  cursor: pointer;
  font-size: .93rem;
  border-bottom: 1px solid #1a2e42;
  display: flex;
  align-items: center;
  gap: .5rem;
  outline: none;
  transition: background .15s;
  color: #c8d8e8;
}

.grm-suggestions li:last-child { border-bottom: none; }

.grm-suggestions li:hover,
.grm-suggestions li:focus {
  background: #1a2e42;
}

.grm-sug-nome { font-weight: 600; flex: 1; color: #e8edf2; }

.grm-sug-uf {
  background: #1a4a6e;
  color: #5bc4f5;
  font-size: .74rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 4px;
  border: 1px solid #2a5a80;
}

.grm-sug-cod {
  background: #1c2d40;
  color: #8fa8c0;
  font-size: .74rem;
  font-family: monospace;
  padding: .18rem .5rem;
  border-radius: 4px;
  border: 1px solid #2a3f5a;
}

/* ── Card cidade selecionada ── */
.grm-cidade-selecionada { margin-bottom: 1.4rem; }

.grm-cidade-sel-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #0f2234;
  border: 1.5px solid #2a5a80;
  border-radius: 8px;
  padding: .8rem 1rem;
  flex-wrap: wrap;
}

.grm-cidade-sel-label {
  font-size: .78rem;
  color: #5a7a95;
  display: block;
  margin-bottom: .12rem;
}

.grm-cidade-sel-nome {
  font-size: 1.05rem;
  font-weight: 700;
  color: #5bc4f5;
}

.grm-cidade-sel-info  { flex: 1; }
.grm-cidade-sel-badges { display: flex; gap: .4rem; }

.grm-badge {
  font-size: .78rem;
  font-weight: 700;
  padding: .22rem .6rem;
  border-radius: 5px;
}

.grm-badge-uf  {
  background: #1a4a6e;
  color: #5bc4f5;
  border: 1px solid #2a5a80;
}

.grm-badge-cod {
  background: #1c2d40;
  color: #a0c4e0;
  font-family: monospace;
  border: 1px solid #2a3f5a;
}

.grm-btn-trocar {
  background: transparent;
  border: 1px solid #2a5a80;
  color: #5bc4f5;
  border-radius: 6px;
  padding: .32rem .85rem;
  font-size: .83rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.grm-btn-trocar:hover {
  background: #1a4a6e;
  color: #ffffff;
}

/* ── Preview em tempo real ── */
.grm-preview-wrap {
  background: #080f18;
  border: 1.5px solid #2a3f5a;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.3rem;
}

.grm-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: #5a7a95;
  margin-bottom: .55rem;
}

.grm-preview-contador                    { font-weight: 700; color: #5a7a95; }
.grm-preview-contador.grm-contador-ok    { color: #2ecc71; }
.grm-preview-contador.grm-contador-erro  { color: #e74c3c; }

.grm-preview-nome {
  font-family: "Courier New", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: .65rem;
  min-height: 2rem;
  word-break: break-all;
  color: #fff;
}

.grm-preview-vazio {
  color: #2a3f5a;
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
}

/* Cores das partes no preview */
.grm-ph-cod { color: #5bc4f5; }
.grm-ph-sep { color: #2a3f5a; }
.grm-ph-reg { color: #2ecc71; }
.grm-ph-ind { color: #f39c12; }
.grm-ph-key { color: #e05c6e; }

/* Badges das partes */
.grm-preview-partes {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.grm-parte {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 5px;
  font-family: monospace;
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.grm-parte small {
  font-family: sans-serif;
  font-size: .63rem;
  font-weight: 400;
  margin-top: .1rem;
  opacity: .75;
}

.grm-parte-cod {
  background: #0e2d45;
  color: #5bc4f5;
  border-color: #1a4a6e;
}

.grm-parte-reg {
  background: #0e2e1a;
  color: #2ecc71;
  border-color: #1a5a30;
}

.grm-parte-ind {
  background: #2e1e08;
  color: #f39c12;
  border-color: #5a3a10;
}

.grm-parte-key {
  background: #2e0e14;
  color: #e05c6e;
  border-color: #5a1a24;
}

/* ── Aviso ── */
.grm-aviso {
  background: #2a1e08;
  border: 1px solid #5a3a10;
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .9rem;
  margin-bottom: 1rem;
  color: #f0c040;
}

/* ── Botões ── */
.grm-botoes {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.grm-btn {
  padding: .68rem 1.6rem;
  border: none;
  border-radius: 8px;
  font-size: .97rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
}

.grm-btn:active { transform: scale(.97); }

.grm-btn-primario {
  background: #1a6fa0;
  color: #fff;
  border: 1px solid #2a8fc8;
  box-shadow: 0 2px 10px rgba(26,111,160,.35);
}

.grm-btn-primario:hover {
  background: #2080b8;
  box-shadow: 0 4px 16px rgba(26,111,160,.5);
}

.grm-btn-secundario {
  background: #1c2d40;
  color: #8fa8c0;
  border: 1px solid #2a3f5a;
}

.grm-btn-secundario:hover {
  background: #243548;
  color: #c8d8e8;
}

/* ── Resultado ── */
.grm-resultado-wrap {
  background: #0a1520;
  border: 1.5px solid #2a5a80;
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.3rem;
}

.grm-resultado-wrap h3 {
  margin: 0 0 .8rem;
  font-size: 1rem;
  color: #5bc4f5;
}

.grm-resultado-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #080f18;
  border: 1px solid #2a3f5a;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .8rem;
}

#grm-resultado-texto {
  font-family: "Courier New", monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
  word-break: break-all;
  letter-spacing: .04em;
}

.grm-btn-copiar {
  background: transparent;
  border: 1.5px solid #2a5a80;
  color: #5bc4f5;
  border-radius: 6px;
  padding: .38rem .9rem;
  cursor: pointer;
  font-size: .88rem;
  white-space: nowrap;
  font-weight: 600;
  transition: background .2s, color .2s;
}

.grm-btn-copiar:hover {
  background: #1a4a6e;
  color: #fff;
  border-color: #3a8fc4;
}

.grm-copiado-msg {
  font-size: .85rem;
  color: #2ecc71;
  margin-top: .4rem;
  font-weight: 600;
}

/* ── Tabela de detalhes ── */
.grm-det-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.grm-det-tabela td {
  padding: .35rem .5rem;
  border-bottom: 1px solid #1a2e42;
  color: #8fa8c0;
}

.grm-det-tabela td:first-child {
  color: #5a7a95;
  white-space: nowrap;
  width: 115px;
}

.grm-det-tabela tr:last-child td { border-bottom: none; }

.grm-det-tabela code {
  background: #0d1e2e;
  color: #5bc4f5;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-size: .9rem;
  border: 1px solid #2a3f5a;
}

.grm-det-tabela strong { color: #e8edf2; }

.grm-trunc-aviso {
  color: #f0c040;
  font-size: .82rem;
}

/* ── Instruções ── */
.grm-instrucoes {
  background: #1a1408;
  border: 1px solid #5a3a10;
  border-left: 4px solid #f0c040;
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: #c8b060;
}

.grm-instrucoes h4 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: #f0c040;
}

.grm-instrucoes ol {
  margin: 0;
  padding-left: 1.25rem;
  color: #a89050;
}

.grm-instrucoes li  { margin-bottom: .4rem; }
.grm-instrucoes strong { color: #f0c040; }

/* ── Responsivo ── */
@media (max-width: 500px) {
  .grm-wrap            { padding: 1.25rem; }
  .grm-resultado-box   { flex-direction: column; align-items: flex-start; }
  #grm-resultado-texto { font-size: 1rem; }
  .grm-cidade-sel-box  { flex-direction: column; align-items: flex-start; }
  .grm-preview-nome    { font-size: 1rem; }
}