/* Marca do Qubia nos cabeçalhos (assets/js/marca-qubia.js): logo tdsoft | [Q]UBIA + nome da tela.
   Serve em tela com marca-tdsoft.css (--tds-*) e nos painéis de SLA (--borda/--laranja próprios).
   .qu-barra = a barra do Studio, para tela que não tinha cabeçalho (chat, login). */
@font-face { font-family: 'Lato'; font-weight: 300; src: url('../fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); }

qu-marca { display: flex; align-items: center; gap: 20px; color: var(--tds-texto, var(--texto, #1A1A1A)); }
qu-marca .qu-logo { height: 30px; padding-right: 20px; border-right: 1px solid var(--tds-borda, var(--borda, #DCDCE2)); }
qu-marca .qu-texto { display: flex; flex-direction: column; }
/* Desce 5px para as letras assentarem na mesma linha do "tdsoft" (medido na captura) */
qu-marca .qu-linha { display: flex; align-items: center; gap: 20px; position: relative; top: 5px; }
qu-marca .com-sub .qu-linha { top: 0; }
qu-marca .qu-palavra { display: inline-flex; align-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 24px; letter-spacing: .14em; line-height: 1; white-space: nowrap; }
qu-marca .qu-q { width: .89em; height: .89em; margin-right: .08em; flex: none; }
qu-marca .qu-rabo { stroke: var(--tds-laranja, var(--laranja, #F35E22)); }

/* Só o símbolo (<qu-simbolo>): o tamanho vem do font-size de quem o contém */
qu-simbolo { display: inline-flex; align-items: center; color: var(--tds-texto, currentColor); }
qu-simbolo .qu-q { width: 1em; height: 1em; flex: none; }
qu-simbolo .qu-rabo { stroke: var(--tds-laranja, var(--laranja, #F35E22)); }
qu-marca .qu-tela { font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 300; white-space: nowrap; }
qu-marca .qu-ponto { color: var(--tds-laranja, var(--laranja, #F35E22)); }
qu-marca .qu-sub { margin: 4px 0 0; font-size: 12px; color: var(--tds-muted, var(--muted, #7F7F91)); }

.qu-barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 40px;
    background: var(--tds-superficie); border-bottom: 1px solid var(--tds-borda); flex: 0 0 auto; }

@media (max-width: 640px) {
    qu-marca { gap: 12px; }
    qu-marca .qu-logo { height: 24px; padding-right: 12px; }
    qu-marca .qu-linha { gap: 12px; }
    qu-marca .qu-palavra { font-size: 20px; }
    qu-marca .qu-tela { font-size: 17px; }
    .qu-barra { padding: 12px 16px; }
}