@font-face {
  font-family: "Cantarell";
  src: url('../fontes/Cantarell.otf');
}
:root {
  --cor_fundo: #111111;
  --cor_grade: #222222;
  --cor_texto: #fffadf;
  --cor_primaria: #4096f5;
  --cor_erro: #ff7084;
  --cor_sucesso: #63c259;
  --cor_alerta: #efc72a;
  --cor_destaque: #ff8800;
  --altura_cabecalho: 3rem;
  --altura_rodape: 2.3rem;
  --largura_menu: 10rem;
  --largura_valorriedades: 12.5rem;
  --largura_campo: 5.625rem;
  --altura_botao: 2rem;
  --largura_botao_quadrado: 32px;
  --largura_botao_mapa: 1.875rem;
  --espaco_grande: 1.5rem;
  --espaco_medio: 0.75rem;
  --espaco_pequeno: 0.375rem;
  --espaco_micro: 0.1875rem;
  --margem_interna: 0.625rem;
  --margem_interna_botao: 0.5rem;
  --fonte_titulo: 1.25rem;
  --fonte_grande: 0.875rem;
  --fonte_base: 0.75rem;
  --fonte_pequena: 0.6875rem;
  --fonte_micro: 0.625rem;
  --espessura_linha: 0.0625rem;
  --raio_borda: 0rem;
  --borda_normal: var(--espessura_linha) solid var(--cor_texto);
  --borda_destaque: var(--espessura_linha) solid var(--cor_primaria);
  --borda_padrao: var(--espessura_linha) solid var(--cor_grade);
}
*,
*::before,
*::after {
  font-family: 'Cantarell', 'Segoe UI', 'Tahoma', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--cor_fundo);
  color: var(--cor_texto);
  font-size: 16px;
}
#barra {
  height: var(--altura_cabecalho);
  background: var(--cor_fundo);
  border-bottom: var(--borda_padrao);
  display: flex;
  align-items: center;
  padding: 0 var(--espaco_medio);
  gap: var(--espaco_pequeno);
  flex-shrink: 0;
}
.item_barra {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--altura_botao);
  background: transparent;
  color: var(--cor_texto);
  border: var(--borda_normal);
  border-radius: var(--raio_borda);
  font-size: var(--fonte_pequena);
  user-select: none;
  outline: none;
  padding: 0 var(--margem_interna_botao);
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.05em;
}
.item_barra:focus {
  border: var(--borda_normal);
}
.item_barra:hover,
.item_barra.ativo {
  border: var(--borda_destaque);
}
#botao_alinhar.ativo {
  background: var(--cor_texto);
  color: var(--cor_fundo);
  border-color: var(--cor_texto);
  -webkit-text-stroke: 1px var(--cor_fundo);
}

.item_barra.quadrado {
  width: var(--largura_botao_quadrado);
  padding: 0;
  flex-shrink: 0;
  font-size: var(--fonte_grande);
}
#botao_exportar {
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  padding: 0 var(--margem_interna_botao);
}
#tipo_vertice {
  padding: 0 var(--espaco_pequeno);
  cursor: pointer;
}
#tipo_vertice option {
  background: var(--cor_fundo);
  color: var(--cor_texto);
}
#ajuda_nome {
  position: relative;
  cursor: help;
}
.tooltip_ajuda {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 15rem;
  background: var(--cor_fundo);
  border: var(--borda_normal);
  padding: var(--margem_interna);
  z-index: 100;
  font-size: var(--fonte_micro);
  line-height: 1.4;
  text-transform: none;
  white-space: normal;
  text-align: left;
}
#ajuda_nome:hover .tooltip_ajuda,
#ajuda_nome:active .tooltip_ajuda {
  display: block;
}
#caracter:focus {
  border: var(--borda_destaque);
}
#caracter,
#exibicao_caracter {
  width: var(--largura_botao_quadrado);
  min-width: var(--largura_botao_quadrado);
  max-width: var(--largura_botao_quadrado);
  flex: 0 0 var(--largura_botao_quadrado);
  padding: 0;
  text-align: center;
  font-size: var(--fonte_titulo);
}
#exibicao_caracter {
  cursor: default;
  border: none;
  border-bottom: var(--borda_padrao);
}
.botao_perigo {
  color: var(--cor_erro);
  background: transparent;
  border: var(--borda_normal);
  border-color: rgba(255, 112, 132, 0.5);
  padding: var(--espaco_micro) var(--margem_interna_botao);
  font-size: var(--fonte_micro);
  text-transform: uppercase;
  cursor: pointer;
}
.botao_perigo:hover {
  border-color: var(--cor_erro);
}
#corpo {
  display: flex;
  height: calc(100vh - var(--altura_cabecalho) - var(--altura_rodape));
}
#painel_esquerdo,
#painel_direito {
  background: var(--cor_fundo);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#painel_esquerdo {
  width: var(--largura_menu);
  border-right: var(--borda_padrao);
  overflow: hidden;
}
#painel_direito {
  width: var(--largura_valorriedades);
  border-left: var(--borda_padrao);
  overflow-y: auto;
}
#mapa_titulo,
.titulo_painel {
  font-size: var(--fonte_micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor_texto);
}
#mapa_titulo {
  padding: var(--margem_interna_botao) var(--margem_interna) var(--espaco_pequeno);
  border-bottom: var(--borda_padrao);
}
#mapa_chars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco_micro);
  padding: var(--margem_interna_botao);
  overflow-y: auto;
  align-content: flex-start;
}
#mapa_chars::-webkit-scrollbar,
#painel_direito::-webkit-scrollbar {
  width: 0.25rem;
}
#mapa_chars::-webkit-scrollbar-thumb,
#painel_direito::-webkit-scrollbar-thumb {
  background: var(--cor_grade);
  border-radius: var(--raio_borda);
}
.botao_char {
  background: var(--cor_fundo);
  color: var(--cor_texto);
  border: var(--borda_normal);
  padding: var(--espaco_micro) 0;
  cursor: pointer;
  font-size: var(--fonte_base);
  border-radius: var(--raio_borda);
  width: var(--largura_botao_mapa);
  text-align: center;
}
.botao_char:hover,
.botao_char.ativo {
  border: var(--borda_destaque);
}
.botao_char.tem_dados {
  color: var(--cor_primaria);
}
.botao_char.tem_colorido {
  color: var(--cor_alerta);
  border: var(--borda_normal);
}
#envoltorio_canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--cor_fundo);
}
#canvas_base,
#canvas_desenho {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#canvas_base {
  pointer-events: none;
}
#canvas_desenho {
  outline: none;
}
#previa_svg_colorido {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12.5rem;
  height: 12.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.35;
}
#previa_svg_colorido svg {
  width: 100%;
  height: 100%;
}
.secao_painel {
  border-bottom: var(--borda_padrao);
  padding: var(--margem_interna);
}
.titulo_painel {
  margin-bottom: var(--margem_interna_botao);
}
.linha_painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco_pequeno);
  margin-bottom: 0.3125rem;
}
.linha_painel label,
.linha_painel span {
  width: 15%;
  color: var(--cor_texto);
  font-size: var(--fonte_pequena);
}
.linha_painel label {
  white-space: nowrap;
}
.linha_painel input[type="text"],
entrada-numerica {
  background: var(--cor_fundo);
  color: var(--cor_texto);
  border: var(--borda_normal);
  padding: var(--espaco_micro) var(--espaco_pequeno);
  font-size: var(--fonte_pequena);
  width: var(--largura_campo);
  border-radius: var(--raio_borda);
  outline: none;
}
.linha_painel input[type="text"]:focus,
entrada-numerica:focus-within {
  border-color: var(--cor_primaria);
}
entrada-numerica {
  padding: 0;
  border: var(--borda_normal);
  background: transparent;
}
.secao_painel_svg {
  flex: 1;
}
#editor_svg_atual {
  user-select: text;
  resize: none;
  width: 100%;
  min-height: 12rem;
  background: var(--cor_fundo);
  color: var(--cor_texto);
  border: var(--borda_normal);
  padding: var(--espaco_pequeno);
  outline: none;
}
#editor_svg_atual:focus {
  border-color: var(--cor_primaria);
}
#barra_rodape {
  height: var(--altura_rodape);
  background: var(--cor_fundo);
  border-top: var(--borda_padrao);
  display: flex;
  align-items: center;
  padding: 0 var(--espaco_medio);
  gap: var(--espaco_pequeno);
  flex-shrink: 0;
}
#barra_rodape span,
#barra_rodape b {
  font-size: var(--fonte_pequena);
  color: var(--cor_texto);
  font-variant-numeric: tabular-nums;
}
#status_glifo {
  display: flex;
  align-items: center;
  gap: var(--espaco_medio);
}
#status_glifo span {
  border-right: 1px solid var(--cor_grade);
  padding-right: var(--espaco_medio);
  display: inline-flex;
  gap: 0.25rem;
  min-width: 5rem;
}
#status_glifo span:last-of-type {
  border-right: none;
}
#status_glifo .botao_perigo {
  padding: 0 var(--espaco_pequeno);
  height: 1.25rem;
  font-size: var(--fonte_micro);
}
#status_coordenada {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#status_zoom {
  min-width: 3.5rem;
  text-align: right;
  cursor: pointer;
  user-select: none;
}
#status_zoom:hover {
  color: var(--cor_primaria);
}

.glifo_atual {
  padding: var(--margem_interna_botao);
  padding-right: var(--espaco_grande);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.botao_fonte {
  width: 100%;
}