/* Hostbraza: peças de interface (botões, campos, etiquetas e os três vidros).
   Precisa do tokens.css carregado antes. Regras de uso: https://brand.hostbraza.com.br/llms.txt
   Gerado a partir do CSS da própria página da marca.

   Botões:   <button class="ui-btn ui-btn--principal">Enviar</button>
             variações: --marca (um por tela), --principal, --secundario, --discreto, --perigo, --sm, --block
   Campos:   <input class="ui-input">  ·  com erro: class="ui-input is-error"
             com ícone: <span class="ui-input-wrap"><svg class="ui-icon">…</svg><input class="ui-input ui-input--icon"></span>
   Etiqueta: <span class="tag">Novo</span>
   Deslizante: <input type="range" class="ui-range" style="--v: 50%">  (o script atualiza --v; veja o llms.txt)
   Tema:     <button type="button" class="ui-tema" data-tema></button> + tema.js (um por página, no topo)
   Vidros:   class="vidro" (fosco claro), "vidro-escuro", "vidro-liquido", "vidro-azul" */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Vidros ───────────────────────────────────────────────────────────────── */
.vidro,
.vidro-escuro {
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
}

.vidro {
  background: var(--vidro-claro);
  border: 1px solid var(--vidro-claro-borda);
}

.vidro-escuro {
  background: var(--vidro-escuro);
  border: 1px solid var(--vidro-escuro-borda);
}

.vidro-liquido {
  background: var(--liquido-tinta);
  -webkit-backdrop-filter: var(--liquido-filtro);
  backdrop-filter: var(--liquido-filtro);
  border: 1px solid var(--liquido-borda);
  box-shadow: var(--liquido-brilho);
  color: #fff;
}

.vidro-azul {
  background: var(--vidro-azul-tinta);
  -webkit-backdrop-filter: var(--vidro-azul-filtro);
  backdrop-filter: var(--vidro-azul-filtro);
  border: 1px solid var(--vidro-azul-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Sem suporte a desfoque de fundo, o vidro vira uma placa quase opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro {
    background: rgba(255, 255, 255, 0.94);
  }

  .vidro-escuro {
    background: rgba(10, 11, 15, 0.94);
  }

  .vidro-liquido {
    background: rgba(0, 16, 66, 0.5);
  }

  .vidro-azul {
    background: var(--gradiente);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--etiqueta-fundo);
  color: var(--azul-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--onblue {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Controle deslizante: trilho fino, a parte já percorrida em Gradiente Braza e uma bolinha branca com aro azul.
   A largura preenchida vem da variável --v (0% a 100%), que o script atualiza a cada movimento. */
.ui-range {
  --v: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.ui-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azul-claro), var(--azul-profundo)) 0 / var(--v) 100% no-repeat, var(--suave-fundo);
}

.ui-range::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azul-claro), var(--azul-profundo)) 0 / var(--v) 100% no-repeat, var(--suave-fundo);
}

.ui-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--azul), 0 4px 12px rgba(0, 16, 66, 0.28);
  transition: scale 0.2s var(--ease), box-shadow 0.2s;
}

.ui-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--azul), 0 4px 12px rgba(0, 16, 66, 0.28);
  transition: scale 0.2s var(--ease), box-shadow 0.2s;
}

.ui-range:hover::-webkit-slider-thumb,
.ui-range:active::-webkit-slider-thumb {
  scale: 1.12;
}

.ui-range:hover::-moz-range-thumb,
.ui-range:active::-moz-range-thumb {
  scale: 1.12;
}

.ui-range:focus-visible {
  outline: none;
}

.ui-range:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 0 0 2px var(--azul), 0 0 0 5px rgba(0, 96, 254, 0.22);
}

.ui-range:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px var(--azul), 0 0 0 5px rgba(0, 96, 254, 0.22);
}

/* Botão de tema: um por página, no topo. Um toque troca entre automático, claro e escuro. */
.ui-tema {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--suave-fundo);
  color: var(--suave-texto);
  cursor: pointer;
  transition: background 0.15s, rotate 0.3s var(--ease);
}

.ui-tema:hover {
  background: var(--suave-fundo-hover);
  rotate: 20deg;
}

.ui-tema svg {
  display: block;
}

/* Sobre o gradiente, azul ou foto: o botão vira branco translúcido. */
.ui-tema--sobre-azul {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.ui-tema--sobre-azul:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* Botões no estilo Suave. Altura 44, cantos de 10. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-btn);
  background: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, scale 0.3s var(--ease);
}

.ui-btn:active {
  scale: 0.97;
}

.ui-btn--marca {
  background: var(--gradiente-botao);
  color: #fff;
}

.ui-btn--principal {
  background: var(--azul);
  color: #fff;
}

.ui-btn--principal:hover {
  background: var(--azul-profundo);
}

.ui-btn--secundario {
  background: var(--suave-fundo);
  color: var(--suave-texto);
}

.ui-btn--secundario:hover {
  background: var(--suave-fundo-hover);
}

.ui-btn--discreto {
  color: var(--suave-texto);
}

.ui-btn--discreto:hover {
  background: rgba(0, 96, 254, 0.08);
}

.ui-btn--perigo {
  background: var(--erro-fundo);
  color: var(--erro);
}

.ui-btn--perigo:hover {
  background: var(--erro-forte);
  color: #fff;
}

.ui-btn--sm {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.ui-field label {
  font-size: 14px;
  font-weight: 600;
}

/* Campo com contorno: fundo branco e linha fina. O foco é sempre azul. */
.ui-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--cartao);
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  transition: box-shadow 0.15s;
}

.ui-input::placeholder {
  color: var(--texto-suave);
  opacity: 1;
}

.ui-input:focus,
.ui-input.is-focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--azul), 0 0 0 4px rgba(0, 96, 254, 0.18);
}

.ui-input.is-error {
  box-shadow: inset 0 0 0 2px var(--erro);
}

/* Campo com ícone: o desenho fica à esquerda, em Grafite. */
.ui-input-wrap {
  position: relative;
  display: block;
}

.ui-input-wrap .ui-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  color: var(--texto-suave);
  pointer-events: none;
}

.ui-input--icon {
  padding-left: 40px;
}

.ui-btn--block {
  width: 100%;
}

.ui-field__msg {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--erro);
  font-size: 13px;
}

/* ── Plugins e aplicativos (modelos) ──────────────────────────────────────── */
.ui-icon {
  display: block;
  flex: none;
}

.ui-range-demo {
  display: grid;
  gap: 6px;
  max-width: 440px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
}

.ui-range-demo label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
}

.ui-range-demo output {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Em link, o botão não ganha sublinhado. */
a.ui-btn {
  text-decoration: none;
}

/* Fundos da marca prontos para usar. Texto sempre branco por cima. */
.fundo-gradiente {
  background: var(--gradiente);
  color: #fff;
}

.fundo-brilho-horizonte {
  background: var(--brilho-horizonte);
  color: #fff;
}

.fundo-brilho-canto {
  background: var(--brilho-canto);
  color: #fff;
}

.fundo-brilho-feixe {
  background: var(--brilho-feixe);
  color: #fff;
}