/* O widget `linha_titulo` (FeitoWeb.Widgets.LinhaTitulo, docs/telas.md §2; a fase L, docs/layout-bitrix.md §2.2). A
   linha do título com a disposição do Bitrix24 e os temas do Feito: o ícone e o título (.lt-tit) com o «?» da
   descrição (.lt-ajuda, .lt-dica), o «Criar ▾» (.lt-criar), o seletor (.lt-seletor), a busca que cresce e ocupa o
   meio (.lt-busca) e, na ponta direita, os botões secundários (.lt-fim). No celular, a busca desce para uma
   linha só dela. Novo na L1b (26/10/2026). Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs):
   cor só por token (var(--…), com a cor de hoje como reserva); cor nova é token novo, no style.css (claro) e no
   temas.css (escuro e acrílico). Ligado no layout raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0). Mudou
   este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

/* a linha: quebra quando falta lugar; nada dela fica mais largo que a página (min-width: 0, como a faixa) */
.lt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-3, 12px); min-width: 0;
  margin: 0 0 var(--v-esp-4, 16px); }
.lt > * { min-width: 0; }

/* o título: o ícone do item no menu na cor da marca, o h1 numa linha só (com reticências), o «?» ao lado */
.lt-tit { display: flex; align-items: center; gap: var(--v-esp-2, 8px); flex: 0 1 auto; }
.lt-tit > h1 { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lt-tit-svg { flex: none; color: var(--verde); stroke-width: 2; }

/* o «?»: a descrição da página aparece ao passar o mouse (e continua enquanto o mouse está nela) ou no clique (o
   aria-expanded, que o Esc fecha); a ponte (::before) cobre o vão entre o «?» e a dica. (L1g, 26/10/2026) Escondida,
   ela sai do desenho (display: none, e não só invisível): a dica invisível, posta à direita do «?», alargava a página
   no celular (achado pelo navegador de verdade quando a `pagina` passou a desenhar a linha do título) — o leitor de
   tela a ouve igual, pelo aria-describedby; e a entrada continua suave (@starting-style). */
.lt-ajuda { position: relative; display: inline-flex; flex: none; }
.lt-ajuda-bt { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0;
  box-sizing: border-box; border: 1px solid var(--e-linha-forte, var(--linha)); border-radius: 50%;
  background: var(--e-cartao, var(--branco)); color: var(--suave); font: inherit; font-size: 12px; font-weight: 700;
  line-height: 1; cursor: help; }
.lt-ajuda-bt:hover, .lt-ajuda-bt[aria-expanded="true"] { border-color: var(--verde); color: var(--verde-esc); }
.lt-ajuda-bt:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.lt-dica { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 830; box-sizing: border-box;
  width: max-content; max-width: min(380px, calc(100vw - 32px)); padding: 8px 12px;
  border: 1px solid var(--linha); border-radius: var(--v-raio, 10px); background: var(--e-cartao, var(--branco));
  color: var(--tinta); box-shadow: var(--v-sombra-1); font-size: .85rem; font-weight: 400; line-height: 1.45;
  white-space: normal; display: none; opacity: 0; pointer-events: none; transition: opacity .12s ease-out; }
.lt-dica::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.lt-ajuda:hover > .lt-dica, .lt-ajuda-bt[aria-expanded="true"] + .lt-dica { display: block; opacity: 1;
  pointer-events: auto; }
@starting-style {
  .lt-ajuda:hover > .lt-dica, .lt-ajuda-bt[aria-expanded="true"] + .lt-dica { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lt-dica { transition: none; } }

/* os grupos da linha: o «Criar», o seletor e a ponta direita não encolhem; a busca cresce e ocupa o meio */
.lt-criar, .lt-seletor, .lt-fim { display: flex; align-items: center; gap: var(--v-esp-2, 8px); flex: none; }
.lt-busca { flex: 1 1 260px; max-width: 640px; }
.lt-fim { margin-left: auto; }
/* na linha, os controles têm a altura dela (o «⋯», quadrado, com o botão do lado) */
.lt-fim .menu-acoes > .menu-acoes-bt:not(.menu-acoes-texto) { width: var(--ctl-h, 36px); height: var(--ctl-h, 36px); }

/* no celular: a busca desce para uma linha só dela, embaixo do título e dos botões; a dica aberta ocupa a largura da
   tela, logo abaixo do «?» (presa à tela: um título comprido a punha para fora dela) */
@media (max-width: 760px) {
  .lt-busca { order: 10; flex-basis: 100%; max-width: none; }
  .lt-tit { flex: 1 1 auto; }
  /* (E7) o seletor ocupa a linha e quebra (o período personalizado, com o de e o até, não passa da tela) */
  .lt-seletor { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .lt-dica { position: fixed; top: auto; left: 16px; right: 16px; width: auto; max-width: none; margin-top: 30px; }
}

/* o acrílico: a dica é vidro com o desfoque (como os menus que abrem por cima) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-acrilico="on"] .lt-dica {
    background: color-mix(in srgb, var(--acr-base) 84%, transparent); border-color: var(--acr-borda);
    -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat));
    backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); }
}