/*
 * Marca Delcontrol — desenho único, usado no site, na tela de login da central, no console do
 * dono e no app do técnico.
 *
 * Existe como arquivo próprio porque a marca aparecia escrita à mão em cada HTML (um SVG inline
 * aqui, um PNG ali, um emoji acolá) e cada lugar envelhecia por conta própria. Aqui o desenho é
 * um só: quem quiser a marca inclui este CSS e escreve a estrutura abaixo.
 *
 * Uso:
 *   <span class="dc-marca">                        (fundo claro — padrão)
 *   <span class="dc-marca dc-marca--escuro">        (fundo escuro)
 *     <img class="dc-marca__icone" src="/delcontrol-icone-512.png" alt="">
 *     <span class="dc-marca__nome"><span class="dc-marca__del"><span class="dc-marca__d">D</span>el</span><span class="dc-marca__control">control</span></span>
 *   </span>
 *
 * O tamanho sai todo de `font-size` no elemento `.dc-marca` — o ícone e o contorno do D estão em
 * `em`, então a marca inteira escala junto sem precisar de uma regra por lugar onde aparece.
 */

.dc-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  /* Fundo claro é o padrão: "Del" na tinta escura da marca. */
  color: #1f2a37;
}

.dc-marca:hover { text-decoration: none; }

.dc-marca__icone {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.32em;
  display: block;
  flex: none;
}

.dc-marca__nome { display: inline-block; }

/*
 * Contorno cinza só no "D". Espessura em `em` (não px) para acompanhar o tamanho: num cabeçalho
 * pequeno, 1.5px fixo engrossaria a letra a ponto de fechar o vão do D.
 *
 * `-webkit-text-stroke` é suportado em Chrome, Edge, Safari e Firefox (desde a v49). Onde não
 * for, o D simplesmente aparece sem contorno — nada quebra.
 */
.dc-marca__d { -webkit-text-stroke: 0.045em #9aa4b2; }

/* "control" sempre na cor da marca, nos dois fundos — é o que dá o padrão do logotipo. */
.dc-marca__control { color: #ff3860; }

/* Fundo escuro: "Del" vira branco. O contorno clareia junto para não sumir contra o branco. */
.dc-marca--escuro { color: #fff; }
.dc-marca--escuro .dc-marca__d { -webkit-text-stroke-color: #8a94a3; }