/* Tecnocafé · componentes */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--f-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-align: center; text-decoration: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .ico-btn { width: 22px; height: 22px; stroke-width: 2; flex: none; }
.btn-principal { background: var(--acao); color: var(--on-accent); min-height: 56px; width: 100%; font-size: 1.125rem; }
.btn-principal:active:not(:disabled) { filter: brightness(.94); }
.btn-secundario { background: var(--card); color: var(--ink); border-color: var(--ink-soft); }
.btn-folha { background: var(--leaf); color: var(--on-accent); }
.btn-link {
  background: transparent; color: var(--acao); padding-inline: 8px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; font-weight: 700;
}
.btn-bloco { width: 100%; }
.btn-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: transparent; border: 0; color: var(--ink);
  touch-action: manipulation;
}
.btn-icone .ico-ui { width: 24px; height: 24px; }
.btn-icone[aria-pressed="true"] { color: var(--leaf); }
.acoes { display: grid; gap: 10px; }
.acoes-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes-linha > .btn { flex: 1 1 140px; }

.ico { stroke-width: 2; }
.ico-ui { width: 24px; height: 24px; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 4px var(--gutter); margin-inline: calc(-1 * var(--gutter));
  scroll-padding-inline: var(--gutter);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; margin-block: 4px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--ink-soft);
  background: var(--card); color: var(--ink);
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
  touch-action: manipulation;
}
.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip[aria-pressed="true"], .chip.ativo, .chip-contar.ativo, .escolha input:checked + span, .achar-opcao input:checked + span,
.bussola-btn[aria-checked="true"], .mesa-marca[aria-pressed="true"] .mesa-caixa, .g-tique[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--on-accent); }
.chip .ico-ui { width: 18px; height: 18px; }
.chip-contagem { font-family: var(--f-stamp); font-weight: 800; }

.seletor {
  display: inline-grid; grid-template-columns: 56px minmax(64px, auto) 56px; align-items: center;
  height: 56px; border-radius: var(--r-btn); border: 1px solid var(--ink-soft); background: var(--card);
}
.seletor-btn {
  height: 100%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center;
  touch-action: manipulation; border-radius: var(--r-btn);
}
.seletor-btn:disabled { color: var(--rule-forte); cursor: not-allowed; }
.seletor-valor { font-size: 1.75rem; line-height: 1; text-align: center; padding-inline: 4px; }

.interruptor {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 0; cursor: pointer;
}
.int-texto { flex: 1; display: grid; gap: 2px; }
.int-rotulo { font-weight: 600; }
.int-desc { color: var(--ink-soft); font-size: .875rem; }
.int-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.int-trilho {
  flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px;
  background: var(--ink-soft); transition: background .15s;
}
.int-bola {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); transition: transform .15s;
}
.int-input:checked + .int-trilho { background: var(--leaf); }
.int-input:checked + .int-trilho .int-bola { transform: translateX(20px); }

/* Escolhas (rádio em pílulas) */
.escolhas { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.escolhas-rotulo { font-weight: 600; padding: 0; margin-bottom: 4px; }
.escolhas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros { display: grid; gap: 22px; } /* folha de filtros: respiro entre as perguntas */
.escolha { position: relative; }
.escolha span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ink-soft); background: var(--card); font-weight: 600; cursor: pointer;
}
.int-input:focus-visible + .int-trilho, .escolha input:focus-visible + span, .achar-opcao input:focus-visible + span,
input.sr-only:focus-visible + label.btn { outline: 3px solid var(--cherry); outline-offset: 3px; }

.carimbo-selo {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2.5px solid currentColor; border-radius: 4px;
  padding: 3px 9px 2px;
  font-family: var(--f-stamp); font-weight: 800; letter-spacing: .08em; line-height: 1.1;
  font-size: 1rem; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.carimbo-selo.girado { transform: rotate(-4deg); }
.carimbo-selo.cor-folha { color: var(--leaf); }
.carimbo-selo.costurado { border-style: dashed; }
.carimbo-selo.pequeno { font-size: .875rem; border-width: 2px; padding: 1px 6px 0; }
/* Selo que abre uma explicação: botão de 44 px em volta do carimbo. */
.selo-botao { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -8px -6px; padding: 0 6px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.selo-botao .selo-info { width: 15px; height: 15px; flex: none; }
.carimbo-cai { animation: carimbo-cai .25s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes carimbo-cai { from { transform: scale(1.3) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }

/* Nível (ramo de 3 pares) */
.lv { width: 30px; height: 24px; flex: none; --nv1: var(--rule); --nv2: var(--rule); --nv3: var(--rule); }
.lv[data-n="1"] { --nv1: var(--leaf); }
.lv[data-n="2"] { --nv1: var(--leaf); --nv2: var(--leaf); }
.lv[data-n="3"] { --nv1: var(--leaf); --nv2: var(--leaf); --nv3: var(--leaf); }

/* Ramo vivo */
.ramo .caule { fill: var(--leaf); }
.ramo .par {
  fill: var(--rule);
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(var(--cresce, 1));
  transition: transform .4s cubic-bezier(.2, .9, .25, 1.15), fill .4s;
}
.ramo .par.viva { fill: var(--leaf); }
.ramo .cereja {
  fill: var(--cherry); transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(0); transition: transform .35s cubic-bezier(.2, .9, .25, 1.3);
}
.ramo .cereja.acesa { transform: scale(1); }
.ramo .cereja.c2 { transition-delay: .12s; }
.ramo .cereja.c3 { transition-delay: .24s; }
.ramo-brota .caule, .ramo-brota .par, .ramo-brota .cereja { animation: brota .55s cubic-bezier(.2, .9, .25, 1.15) both; }
.ramo-brota .par1 { animation-delay: .1s; }
.ramo-brota .par2 { animation-delay: .25s; }
.ramo-brota .par3 { animation-delay: .4s; }
.ramo-brota .c1 { animation-delay: .6s; }
.ramo-brota .c2 { animation-delay: .7s; }
.ramo-brota .c3 { animation-delay: .8s; }
@keyframes brota { from { transform: scale(.2); opacity: .2; } to { transform: scale(var(--cresce, 1)); opacity: 1; } }

/* Cerejas */
.carregando { display: grid; justify-items: center; gap: 12px; padding: 48px 0; color: var(--ink-soft); }
.juta .carregando, .sobre-juta .carregando { color: var(--ink); } /* texto sobre juta usa sempre a tinta cheia (AA) */
.cerejas-pulo { display: flex; gap: 8px; }
.cerejas-pulo i { width: 14px; height: 14px; border-radius: 50%; background: var(--cherry); animation: pula 1.1s ease-in-out infinite; }
.cerejas-pulo i:nth-child(2) { animation-delay: .15s; }
.cerejas-pulo i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } }
.cerejas-contagem { display: inline-flex; gap: 8px; }
.cerejas-contagem i { width: 18px; height: 18px; border-radius: 50%; background: var(--rule); transition: background .15s, transform .15s; }
.cerejas-contagem i.acesa { background: var(--cherry); transform: scale(1.12); }
.nota-cerejas { display: inline-flex; gap: 4px; }
.nota-cerejas i { width: 12px; height: 12px; border-radius: 50%; background: var(--rule); }
.nota-cerejas i.acesa { background: var(--cherry); }

/* Trilho limão (sempre sobre o trilho carimbo) */
.trilho { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--trilho); overflow: hidden; }
.trilho-fill {
  position: absolute; inset: 0; background: var(--lime); border-radius: 4px;
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear;
}
.anel-trilho { fill: none; stroke: var(--trilho); stroke-width: 10; }
.anel-arco { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }

.secao { border-top: 2px dashed var(--rule); }
.secao summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem;
}
.secao summary::-webkit-details-marker { display: none; }
.secao-titulo { flex: 1; }
.secao-contagem { color: var(--ink-soft); font-size: 1rem; }
.secao-seta { transition: transform .15s; color: var(--ink-soft); }
.secao[open] .secao-seta { transform: rotate(180deg); }
.secao-corpo { padding: 0 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Assinatura */
.assinatura { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.assinatura-simbolo { width: 26px; height: 29px; flex: none; }
.assinatura .wm { font-size: .9375rem; }

.folha-veu {
  position: fixed; inset: 0; z-index: 60; background: var(--veu);
  display: flex; align-items: flex-end; justify-content: center;
  animation: veu .16s ease-out both;
}
@keyframes veu { from { opacity: 0; } to { opacity: 1; } }
.folha {
  width: 100%; max-width: 560px; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink);
  border-radius: 16px 16px 0 0; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--sombra);
  animation: sobe .2s cubic-bezier(.2, .9, .3, 1) both;
  outline: none;
}
@keyframes sobe { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.folha-alca { width: 44px; height: 4px; border-radius: 2px; background: var(--rule-forte); margin: 4px auto 8px; }
.folha-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.folha-titulo { flex: 1; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 1.375rem; line-height: 1.1; }
.folha-corpo { display: grid; gap: 14px; }
.folha-corpo > p { color: var(--ink); }
body.com-folha { overflow: hidden; }

/* Toast */
.toasts {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: max(calc(var(--abas) + 16px + env(safe-area-inset-bottom)), calc(var(--fixo-alt, 0px) + 12px));
  display: grid; justify-items: center; gap: 8px; padding: 0 var(--gutter); pointer-events: none;
}
/* Sem abas: o toast sobe acima do rodapé fixo (--fixo-alt). */
body.sem-abas .toasts { bottom: max(calc(88px + env(safe-area-inset-bottom)), calc(var(--fixo-alt, 0px) + 12px)); }
/* No guiado o toast desce do topo, sobre o cabeçalho: não cobre a instrução nem a zona de ação.
   O guiado tem as duas classes: esta regra vem por último. */
body.guiado.sem-abas .toasts, body.guiado .toasts { top: calc(4px + env(safe-area-inset-top)); bottom: auto; }
body.guiado .toast { animation-name: desce; }
@keyframes desce { from { transform: translateY(-24px); opacity: .6; } }
.toast {
  pointer-events: auto;
  width: 100%; max-width: 520px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 12px;
  background: var(--b-carimbo); color: var(--b-creme);
  border: 1px solid rgba(234, 219, 192, .22);
  box-shadow: var(--sombra);
  animation: sobe .18s ease-out both;
}
.toast p { flex: 1; font-weight: 500; }
.toast.saindo { opacity: 0; transition: opacity .15s; }
.toast-acao {
  flex: none; min-height: 48px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--b-creme); font-weight: 700;
  /* O limão fica só na linha, como no manual. */
  text-decoration: underline; text-decoration-color: var(--b-limao); text-underline-offset: 5px; text-decoration-thickness: 3px;
}
.toast-acao:focus-visible { outline-color: var(--b-limao); }
.toast.grande .toast-acao { min-height: 64px; font-size: 1.125rem; }
.toast.grande { padding-block: 4px; }

.pilula-lugar { position: fixed; left: 0; right: 0; bottom: calc(var(--abas) + 10px + env(safe-area-inset-bottom)); z-index: 25; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.pilula {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px; min-height: 52px; max-width: 520px; width: 100%;
  padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid var(--ink-soft);
  background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--sombra);
}
.pilula-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--cherry); flex: none; animation: pulso 1.6s ease-in-out infinite; }
.pilula-texto { flex: 1; min-width: 0; font-family: var(--f-stamp); font-weight: 800; letter-spacing: .04em; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pilula-ir { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 999px; background: var(--acao); color: var(--on-accent); font-weight: 700; font-size: .9375rem; }
body.com-pilula .tela { padding-bottom: calc(var(--abas) + 96px + env(safe-area-inset-bottom)); }
body.com-pilula .toasts { bottom: max(calc(var(--abas) + 76px + env(safe-area-inset-bottom)), calc(var(--fixo-alt, 0px) + 12px)); }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }

/* Lampejo */
body.lampejo::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--lampejo); animation: lampejo .25s ease-out both;
}
@keyframes lampejo { from { opacity: 1; } to { opacity: 0; } }
body.lampejo-borda::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  box-shadow: inset 0 0 0 6px var(--cherry);
}

/* Cartões */
.cartao { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; }
.cartao-aviso { border: 2px solid var(--leaf); border-radius: var(--r-card); padding: 12px 14px; background: var(--card); display: flex; gap: 10px; align-items: flex-start; }
.cartao-aviso .ico-ui { color: var(--leaf); flex: none; margin-top: 2px; }
.vazio { display: grid; gap: 12px; justify-items: start; padding: 24px 0; }
.vazio p { color: var(--ink-soft); }

.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; }
.entrada {
  min-height: 48px; width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--ink-soft); background: var(--card); color: var(--ink);
}
.entrada::placeholder { color: var(--ink-soft); opacity: 1; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.carimbo-selo { max-width: 100%; }
.btn-link { border: 0; background: transparent; }
/* Arquivo: o campo real fica escondido e o foco aparece no botão. */
.juta input.sr-only:focus-visible + label.btn { outline-color: var(--ink); }

/* Alto contraste forçado: bordas onde a cor sumiria. */
@media (forced-colors: active) {
  .btn, .btn-icone, .chip, .seletor-btn, .toast-acao, .escolha span, .segmento, .achar-opcao span, .ladrilho { border: 2px solid ButtonText; }
  .chip[aria-pressed="true"], .chip.ativo, .escolha input:checked + span, .segmento[aria-selected="true"],
  .achar-opcao input:checked + span, .ladrilho[aria-pressed="true"], .g-tique[aria-pressed="true"] {
    border: 4px double Highlight; outline: 2px solid Highlight; outline-offset: 1px;
  }
  .int-trilho { border: 2px solid ButtonText; }
  .int-input:checked + .int-trilho { border-color: Highlight; outline: 2px solid Highlight; }
  .cerejas-contagem i, .nota-cerejas i { forced-color-adjust: none; border: 2px solid CanvasText; }
  .cerejas-contagem i.acesa, .nota-cerejas i.acesa { background: Highlight; }
  .toast { border: 2px solid CanvasText; }
  .folha, .abas { background: Canvas; }
  .ramo .caule, .ramo .par, .ramo .par.viva { fill: CanvasText; forced-color-adjust: none; }
  .ramo .cereja { fill: Highlight; forced-color-adjust: none; }
}

.campo-alerta { color: var(--acao); font-weight: 600; font-size: .9375rem; }
.entrada[aria-invalid="true"] { border: 2px solid var(--acao); }