/* =====================================================================
   BLUHUB · ESTILO APPLE (aprovado pelo Arthur em 17/10/2026)
   Vale no sistema: index.html tem <html class="estilo-apple"> + js/apple.js.
   Tudo fica dentro de .estilo-apple: tirar a classe volta ao visual antigo.

   O que veio das Human Interface Guidelines / Apple Design Resources
   (só PRINCÍPIOS — nenhum arquivo, fonte ou ícone da Apple é usado):
   1. Materiais de vidro (Liquid Glass) só na camada de navegação
      (menu, barra de abas, topo, janelas, abas segmentadas, aviso).
   2. Cantos concêntricos: canto de dentro = canto de fora − espaçamento.
   3. Escala de texto no estilo Dynamic Type (em rem: acompanha o
      tamanho de letra escolhido no aparelho).
   4. Fundo "agrupado" + listas agrupadas com separador fino recuado.
   5. Botões preenchido / tingido / cinza.
   6. Controle segmentado com "pílula" deslizando sobre trilho.
   7. Janela vira "folha" (sheet) no celular, com alça de arrastar.
   8. Movimento de mola (spring) em vez de curva fixa.
   9. Acessibilidade: reduzir transparência e aumentar contraste.
   Cores, Poppins/Inter e a cor de cada empresa continuam as da BLUHUB.
   ===================================================================== */

.estilo-apple {
  /* --- Escala tipográfica (Large Title → Caption 2), base 17px --- */
  --ap-large-title: 2.125rem;  /* 34 */
  --ap-title-1: 1.75rem;       /* 28 */
  --ap-title-2: 1.375rem;      /* 22 */
  --ap-title-3: 1.25rem;       /* 20 */
  --ap-headline: 1.0625rem;    /* 17 semibold */
  --ap-body: 1.0625rem;        /* 17 */
  --ap-callout: 1rem;          /* 16 */
  --ap-subhead: .9375rem;      /* 15 */
  --ap-footnote: .8125rem;     /* 13 */
  --ap-caption: .75rem;        /* 12 */

  /* --- Cantos concêntricos --- */
  --ap-raio-externo: 26px;
  --ap-folga: 6px;
  --ap-raio-interno: calc(var(--ap-raio-externo) - var(--ap-folga));

  /* --- Materiais --- */
  --ap-vidro: color-mix(in oklch, var(--superficie) 62%, transparent);
  --ap-vidro-forte: color-mix(in oklch, var(--superficie) 78%, transparent);
  --ap-vidro-borda: rgba(255, 255, 255, .55);
  --ap-vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .15);
  --ap-desfoque: blur(24px) saturate(180%);
  --ap-sombra-vidro: 0 8px 32px rgba(16, 38, 74, .14), 0 1px 3px rgba(16, 38, 74, .08);

  /* --- Fundo agrupado e separador fino --- */
  --ap-fundo-agrupado: color-mix(in oklch, var(--cor-primaria) 3%, #F2F2F7);
  --ap-separador: color-mix(in oklch, var(--texto) 14%, transparent);
  --ap-cinza-preenchimento: color-mix(in oklch, var(--texto) 8%, transparent);

  /* --- Mola (aprox. de uma mola com leve "quique") --- */
  --ap-mola: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --ap-mola-suave: cubic-bezier(.32, .72, 0, 1);  /* a curva das folhas do iOS */
  --ap-dur-mola: 520ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]).estilo-apple {
    --ap-vidro-borda: rgba(255, 255, 255, .12);
    --ap-vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .12);
    --ap-sombra-vidro: 0 8px 32px rgba(0, 0, 0, .45);
    --ap-fundo-agrupado: color-mix(in oklch, var(--cor-primaria) 4%, #000000);
  }
}
:root[data-tema="escuro"].estilo-apple {
  --ap-vidro-borda: rgba(255, 255, 255, .12);
  --ap-vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .12);
  --ap-sombra-vidro: 0 8px 32px rgba(0, 0, 0, .45);
  --ap-fundo-agrupado: color-mix(in oklch, var(--cor-primaria) 4%, #000000);
}

/* ---------- Base ---------- */
.estilo-apple body { background: var(--ap-fundo-agrupado); -webkit-font-smoothing: antialiased; }
.estilo-apple .app { background: var(--ap-fundo-agrupado); }
.estilo-apple :focus-visible { outline: 3px solid color-mix(in oklch, var(--cor-primaria) 60%, transparent); outline-offset: 2px; }

/* ---------- 3. Tipografia ---------- */
.estilo-apple .topo h2 { font-size: var(--ap-large-title); font-weight: 700; letter-spacing: -.02em; }
.estilo-apple .inicio-ola h1, .estilo-apple .saudacao h1, .estilo-apple main h1 { letter-spacing: -.02em; }
.estilo-apple .card-titulo h3 { font-size: var(--ap-title-3); font-weight: 600; letter-spacing: -.01em; }
.estilo-apple .item strong { font-size: var(--ap-headline); font-weight: 500; }
.estilo-apple .suave, .estilo-apple .item .meta { font-size: var(--ap-subhead); }
.estilo-apple .menu-grupo { font-size: var(--ap-footnote); text-transform: none; letter-spacing: 0; font-weight: 600; }
.estilo-apple .tabela th { font-size: var(--ap-footnote); text-transform: none; letter-spacing: 0; }

/* ---------- 2. Cantos concêntricos ---------- */
.estilo-apple .card, .estilo-apple .resumo, .estilo-apple .resumo-dentro, .estilo-apple .tabela-caixa { border-radius: var(--ap-raio-externo); }
.estilo-apple .destaque { border-radius: var(--ap-raio-externo); }
.estilo-apple .lateral { border-radius: calc(var(--ap-raio-externo) + 6px); }
.estilo-apple .lateral-topo { border-radius: var(--ap-raio-externo); }
.estilo-apple .menu a { border-radius: var(--ap-raio-interno); }

/* ---------- 1. Vidro na camada de navegação ---------- */
.estilo-apple .lateral,
.estilo-apple .nav-inferior,
.estilo-apple .segmentado,
.estilo-apple .aviso {
  background: var(--ap-vidro);
  -webkit-backdrop-filter: var(--ap-desfoque); backdrop-filter: var(--ap-desfoque);
  box-shadow: var(--ap-vidro-brilho), var(--ap-sombra-vidro);
  border: 1px solid var(--ap-vidro-borda);
}
.estilo-apple .aviso { color: var(--texto); }
.estilo-apple .aviso-acao { background: var(--ap-cinza-preenchimento); color: var(--cor-marca-texto); }
.estilo-apple .menu a.ativo::after { display: none; }
.estilo-apple .menu a.ativo { background: color-mix(in oklch, var(--cor-primaria) 16%, transparent); }

/* Topo do celular: vidro tingido pela cor da empresa, preso no alto */
@media (max-width: 860px) {
  .estilo-apple .topo-mobile {
    position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 20;
    background: color-mix(in oklch, var(--cor-botao) 78%, transparent);
    -webkit-backdrop-filter: var(--ap-desfoque); backdrop-filter: var(--ap-desfoque);
    border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--ap-raio-externo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--ap-sombra-vidro);
  }
  /* Barra de abas flutuante (tab bar): ícone + rótulo, a aba ativa vira uma "gota" */
  .estilo-apple .nav-inferior { padding: 5px; border-radius: var(--raio-pilula); }
  .estilo-apple .nav-inferior a, .estilo-apple .nav-inferior button { min-height: 52px; font-size: 10px; transition: background var(--dur-rapida), transform var(--ap-dur-mola) var(--ap-mola); }
  .estilo-apple .nav-inferior a:active, .estilo-apple .nav-inferior button:active { transform: scale(.92); }
  .estilo-apple .nav-inferior .ativo { background: color-mix(in oklch, var(--cor-primaria) 16%, transparent); box-shadow: var(--ap-vidro-brilho); }
}

/* ---------- 4. Listas agrupadas (inset grouped) ---------- */
.estilo-apple .itens { gap: 0; background: var(--superficie); border-radius: var(--ap-raio-interno); overflow: hidden; }
.estilo-apple .itens > .item { background: transparent; border-radius: 0; position: relative; padding: 12px 16px; min-height: 52px; }
.estilo-apple .itens > .item + .item::before {
  content: ""; position: absolute; top: 0; right: 0; left: 68px; height: 1px;
  background: var(--ap-separador); transform: scaleY(.5); transform-origin: top;
}
.estilo-apple .card .itens { background: var(--superficie-2); }
.estilo-apple .tabela td { background: var(--superficie); }

/* ---------- 5. Botões: preenchido / tingido / cinza ---------- */
.estilo-apple .btn { transition: transform var(--ap-dur-mola) var(--ap-mola), filter var(--dur-rapida), background var(--dur-rapida); }
.estilo-apple .btn:active { transform: scale(.96); transition-duration: 80ms; }
.estilo-apple .btn-primario { box-shadow: none; font-weight: 600; }
.estilo-apple .btn-contorno { border-color: transparent; background: var(--ap-cinza-preenchimento); }
.estilo-apple .btn-contorno:hover { background: color-mix(in oklch, var(--cor-primaria) 14%, transparent); border-color: transparent; }
.estilo-apple .btn-tingido { background: color-mix(in oklch, var(--cor-primaria) 15%, transparent); color: var(--cor-marca-texto); border-color: transparent; }
.estilo-apple .btn-perigo { border-color: transparent; background: var(--sel-vermelho-fundo); }
.estilo-apple .btn-icone { background: var(--ap-cinza-preenchimento); box-shadow: none; }

/* Campos: preenchimento cinza, sem borda forte (como os campos do iOS) */
.estilo-apple input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .estilo-apple select, .estilo-apple textarea {
  background: var(--ap-cinza-preenchimento); border-color: transparent; border-radius: 12px;
}
.estilo-apple .campo-busca input { border-radius: 12px; background: var(--ap-cinza-preenchimento); }

/* ---------- 6. Controle segmentado ---------- */
.estilo-apple .segmentado { padding: 3px; gap: 0; border-radius: 12px; background: var(--ap-cinza-preenchimento); box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.estilo-apple .segmentado button { border-radius: 9px; padding: 8px 16px; transition: background var(--ap-dur-mola) var(--ap-mola), box-shadow var(--dur-rapida); }
.estilo-apple .segmentado button[aria-pressed="true"] {
  background: var(--superficie); color: var(--texto); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}

:root[data-tema="escuro"].estilo-apple .segmentado button[aria-pressed="true"] { background: color-mix(in oklch, var(--superficie) 80%, #FFFFFF); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]).estilo-apple .segmentado button[aria-pressed="true"] { background: color-mix(in oklch, var(--superficie) 80%, #FFFFFF); }
}

/* Interruptor (switch) opcional: <input type="checkbox" class="interruptor"> */
.estilo-apple input.interruptor { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 31px; border-radius: 16px; background: var(--ap-cinza-preenchimento); position: relative; cursor: pointer; transition: background var(--dur-padrao); border: 0; }
.estilo-apple input.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform var(--ap-dur-mola) var(--ap-mola); }
.estilo-apple input.interruptor:checked { background: var(--alta); }
.estilo-apple input.interruptor:checked::after { transform: translateX(20px); }

/* ---------- 7. Janelas: vidro forte; no celular viram folha com alça ---------- */
.estilo-apple .modal { border-radius: var(--ap-raio-externo); background: var(--ap-vidro-forte); -webkit-backdrop-filter: var(--ap-desfoque); backdrop-filter: var(--ap-desfoque); border: 1px solid var(--ap-vidro-borda); box-shadow: var(--ap-vidro-brilho), var(--sombra-2); }
.estilo-apple .modal::backdrop { background: rgba(0, 0, 0, .28); backdrop-filter: none; }
.estilo-apple .modal[open] { animation: ap-janela var(--ap-dur-mola) var(--ap-mola); }
@keyframes ap-janela { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .estilo-apple .modal { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: var(--ap-raio-externo) var(--ap-raio-externo) 0 0; border-bottom: 0; padding-top: 14px; }
  .estilo-apple .modal::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ap-separador); }
  .estilo-apple .modal[open] { animation: ap-folha 460ms var(--ap-mola-suave); }
  @keyframes ap-folha { from { transform: translateY(100%); } to { transform: none; } }
}

/* ---------- 8. Destaques com brilho de vidro por cima do degradê ---------- */
.estilo-apple .destaque { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px color-mix(in oklch, var(--cor-primaria) 22%, transparent); }
.estilo-apple .destaque .ic-circulo { background: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------- 9. Acessibilidade ---------- */
@media (prefers-reduced-transparency: reduce) {
  .estilo-apple .lateral, .estilo-apple .nav-inferior, .estilo-apple .aviso, .estilo-apple .modal, .estilo-apple .topo-mobile {
    background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .estilo-apple .topo-mobile { background: var(--cor-botao); }
}
@media (prefers-contrast: more) {
  .estilo-apple { --ap-separador: color-mix(in oklch, var(--texto) 40%, transparent); --ap-vidro: var(--superficie); --ap-vidro-forte: var(--superficie); --ap-vidro-borda: var(--texto-apoio); }
  .estilo-apple .btn-contorno, .estilo-apple input, .estilo-apple select, .estilo-apple textarea { border-color: var(--texto-apoio) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .estilo-apple { --ap-dur-mola: 1ms; }
  .estilo-apple .modal[open] { animation: none; }
}
/* Navegador sem vidro: fundo sólido (nunca texto sem contraste) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .estilo-apple { --ap-vidro: var(--superficie); --ap-vidro-forte: var(--superficie); }
}

/* =====================================================================
   VERSÃO 2 (mais marcante) — o Arthur notou pouca diferença na 1ª
   ===================================================================== */

/* Fonte do próprio aparelho (no iPhone/Mac é a San Francisco; no Windows
   Segoe UI; no Android Roboto). Não baixamos fonte da Apple: é a do sistema. */
.estilo-apple {
  --fonte-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --peso-titulo: 700;
  --ap-vermelho: #FF3B30; --ap-laranja: #FF9500; --ap-verde: #34C759; --ap-cinza: #8E8E93;
  --ap-fundo-agrupado: #F2F2F7;
}
:root[data-tema="escuro"].estilo-apple { --ap-fundo-agrupado: #000; --ap-vermelho: #FF453A; --ap-laranja: #FF9F0A; --ap-verde: #30D158; --superficie: #1C1C1E; --superficie-2: #2C2C2E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]).estilo-apple { --ap-fundo-agrupado: #000; --ap-vermelho: #FF453A; --ap-laranja: #FF9F0A; --ap-verde: #30D158; --superficie: #1C1C1E; --superficie-2: #2C2C2E; }
}
.estilo-apple body { font-family: var(--fonte-texto); letter-spacing: -.01em; }

/* Fundo "papel de parede": cinza agrupado + brilho da cor da empresa no alto.
   É o que faz o vidro do menu/topo/abas aparecer de verdade. */
.estilo-apple body, .estilo-apple .app {
  background:
    radial-gradient(60% 45% at 15% -5%, color-mix(in oklch, var(--cor-primaria) 38%, transparent), transparent 70%),
    radial-gradient(50% 40% at 95% 5%, color-mix(in oklch, var(--grad-c) 30%, transparent), transparent 70%),
    var(--ap-fundo-agrupado);
  background-attachment: fixed;
}

/* Títulos grandes (Large Title) */
.estilo-apple .saudacao h1 { font-size: var(--ap-large-title); font-weight: 800; letter-spacing: -.03em; }
.estilo-apple .saudacao p { font-size: var(--ap-subhead); color: var(--ap-cinza); }
.estilo-apple .card-titulo h3, .estilo-apple .resumo-dentro h3 { font-size: var(--ap-title-3); font-weight: 700; letter-spacing: -.02em; }
.estilo-apple .topo h2 { font-weight: 800; letter-spacing: -.03em; }

/* Cartões: brancos e lisos sobre o cinza (sem sombra), como no Ajustes/Saúde */
.estilo-apple .card, .estilo-apple .resumo, .estilo-apple .tabela-caixa { box-shadow: none; background: var(--superficie); }
.estilo-apple .resumo-dentro .ic-circulo { background: var(--cor-botao); }

/* Ícones em "squircle" (quadrado arredondado) preenchido, glifo branco */
.estilo-apple .ic-circulo { border-radius: 30%; background: var(--cor-botao); color: #fff; }
.estilo-apple .ic-circulo.vermelho { background: var(--ap-vermelho); color: #fff; }
.estilo-apple .ic-circulo.laranja { background: var(--ap-laranja); color: #fff; }
.estilo-apple .ic-circulo.verde { background: var(--ap-verde); color: #fff; }
.estilo-apple .item .ic-circulo, .estilo-apple .check-linha .ic-circulo { width: 30px; height: 30px; }
.estilo-apple .item .ic-circulo svg.ic, .estilo-apple .check-linha .ic-circulo svg.ic { width: 18px; height: 18px; }

/* Destaques viram "widgets": fundo claro, ícone colorido, número grande */
.estilo-apple .destaque {
  background: var(--superficie); color: var(--texto);
  box-shadow: none; min-height: 132px; padding: 16px;
}
.estilo-apple .destaque .ic-circulo { position: static; width: 32px; height: 32px; background: var(--cor-botao); color: #fff; backdrop-filter: none; box-shadow: none; }
.estilo-apple .destaque { grid-template-columns: auto 1fr; align-content: start; column-gap: 10px; row-gap: 10px; }
.estilo-apple .destaque .rotulo { align-self: center; padding: 0; text-shadow: none; opacity: 1; color: var(--cor-marca-texto); font-size: var(--ap-subhead); font-weight: 600; }
.estilo-apple .destaque .valor, .estilo-apple .destaque .variacao { grid-column: 1 / -1; }
.estilo-apple .destaque .valor { font-weight: 700; font-size: 34px; letter-spacing: -.03em; text-shadow: none; }
.estilo-apple .destaque .variacao { background: transparent; padding: 0; color: var(--ap-cinza); font-size: var(--ap-footnote); }
.estilo-apple .destaque .variacao.alta { color: var(--ap-verde); }
.estilo-apple .destaque .variacao.queda { color: var(--ap-vermelho); }
.estilo-apple .destaque .variacao svg { color: inherit !important; }

/* Selos: só texto colorido e mais discreto (iOS quase não usa "pílulas") */
.estilo-apple .selo { background: transparent; padding: 0; font-size: var(--ap-footnote); font-weight: 600; }
.estilo-apple .selo-vermelho { color: var(--ap-vermelho); }
.estilo-apple .selo-laranja { color: var(--ap-laranja); }
.estilo-apple .selo-verde { color: var(--ap-verde); }
.estilo-apple .selo-cinza { color: var(--ap-cinza); }
.estilo-apple .selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estilo-apple .selo-cinza::before { display: none; }

/* Linha da lista: botão "Abrir" vira tingido pequeno; separador recuado */
.estilo-apple .item .btn-primario.btn-pequeno { background: color-mix(in oklch, var(--cor-primaria) 14%, transparent); color: var(--cor-marca-texto); min-height: 32px; padding: 0 12px; }
.estilo-apple .itens > .item + .item::before { left: 62px; }
.estilo-apple .card .itens { background: transparent; margin: 0 calc(-1 * var(--esp-5)); border-radius: 0; }
.estilo-apple .check-linha { background: transparent; border-radius: 0; padding: 10px 0; border-bottom: .5px solid var(--ap-separador); }
.estilo-apple .progresso span { background: var(--cor-botao); }

/* Gráfico: barras sólidas e arredondadas, sem degradê */
.estilo-apple .barra .trilho { border-radius: 8px; max-width: 28px; background: var(--ap-cinza-preenchimento); }
.estilo-apple .barra .trilho span { border-radius: 8px; background: var(--cor-botao); }

/* Menu lateral (computador) estilo barra lateral do Mac */
.estilo-apple .lateral-topo { background: transparent; color: var(--texto); box-shadow: none; }
.estilo-apple .lateral-topo .empresa-logo { border-radius: 30%; }
.estilo-apple .menu a { color: var(--texto); font-weight: 500; }
.estilo-apple .menu a .ic { color: var(--cor-marca-texto); }
.estilo-apple .menu a.ativo { background: var(--cor-botao); color: var(--cor-botao-texto); }
.estilo-apple .menu a.ativo .ic { color: inherit; }
.estilo-apple .menu-grupo { color: var(--ap-cinza); }

/* Topo do celular estilo barra de navegação: vidro claro, título ao centro */
@media (max-width: 860px) {
  .estilo-apple .topo-mobile {
    background: color-mix(in oklch, var(--superficie) 55%, transparent); color: var(--texto);
    border: 1px solid var(--ap-vidro-borda); box-shadow: var(--ap-vidro-brilho), var(--ap-sombra-vidro);
  }
  .estilo-apple .topo-mobile .empresa-nome { flex: 1; text-align: center; font-weight: 700; }
  .estilo-apple .topo-mobile [data-acao="abrir-menu"] { color: var(--cor-marca-texto) !important; }
  .estilo-apple .topo-mobile .avatar.avatar-iniciais { background: var(--cor-botao); color: var(--cor-botao-texto); }
  .estilo-apple .nav-inferior a, .estilo-apple .nav-inferior button { color: var(--texto); }
  .estilo-apple .nav-inferior .ativo { color: var(--cor-marca-texto); }
}
.estilo-apple .lateral-topo .empresa-logo:not(.com-imagem) { background: var(--cor-botao); color: var(--cor-botao-texto); }
.estilo-apple .lateral-topo .avatar.avatar-iniciais { background: var(--ap-cinza-preenchimento); color: var(--texto); }

/* =====================================================================
   PROTÓTIPO NAVEGÁVEL (previa-app.html): animações do estilo Apple
   ===================================================================== */
/* Abas segmentadas: "pílula" que desliza com mola até a opção escolhida */
.ap-polegar { display: none; }
.estilo-apple .segmentado { position: relative; isolation: isolate; }
.estilo-apple .segmentado .ap-polegar {
  display: block; position: absolute; z-index: -1; top: 0; left: 0; border-radius: 9px;
  background: var(--superficie); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  transition: transform var(--ap-dur-mola) var(--ap-mola), width var(--ap-dur-mola) var(--ap-mola), height var(--ap-dur-mola) var(--ap-mola);
}
.estilo-apple .segmentado:has(.ap-polegar) button[aria-pressed="true"] { background: transparent !important; box-shadow: none; }

/* Troca de tela: a nova entra deslizando, a antiga recua e esmaece (View Transitions) */
.estilo-apple .conteudo, .estilo-apple .topo { view-transition-name: tela; }
::view-transition-old(tela) { animation: ap-sai 320ms var(--ap-mola-suave) both; }
::view-transition-new(tela) { animation: ap-entra 420ms var(--ap-mola-suave) both; }
@keyframes ap-sai { to { opacity: 0; transform: translateX(-12%) scale(.98); } }
@keyframes ap-entra { from { opacity: 0; transform: translateX(18%); } }
.estilo-apple .conteudo { view-transition-name: tela; }
.estilo-apple .topo { view-transition-name: titulo; }
::view-transition-new(titulo) { animation: ap-entra 420ms var(--ap-mola-suave) both; }
::view-transition-old(titulo) { animation: ap-sai 260ms var(--ap-mola-suave) both; }

/* Linha que muda: "pulinho" de mola */
.estilo-apple .mov-item-novo { animation: ap-pulo 520ms var(--ap-mola) both; }
@keyframes ap-pulo { from { opacity: 0; transform: scale(.94); } }

/* Aviso: sobe de baixo com mola */
.estilo-apple .aviso:not([hidden]) { animation: ap-aviso 560ms var(--ap-mola); }
@keyframes ap-aviso { from { opacity: 0; transform: translate(-50%, 40px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Folha no celular: altura do conteúdo (não tela cheia), sai descendo */
@media (max-width: 600px) {
  .estilo-apple .modal { height: auto !important; max-height: 92dvh !important; inset: auto 0 0 0; margin: 0; touch-action: none; background: var(--superficie); }
  .estilo-apple .modal form { height: auto !important; max-height: 92dvh; touch-action: pan-y; padding-top: 18px; }
  .estilo-apple .modal-topo, .estilo-apple .modal-acoes { background: color-mix(in oklch, var(--superficie) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-color: var(--ap-separador); }
  .estilo-apple .modal::before { z-index: 3; }
  .estilo-apple .modal.fechando { animation: ap-folha-sai 160ms var(--ap-mola-suave) forwards; }
  @keyframes ap-folha-sai { to { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(tela), ::view-transition-new(tela), ::view-transition-old(titulo), ::view-transition-new(titulo) { animation: none; }
  .estilo-apple .segmentado .ap-polegar { transition: none; }
}

/* "Scroll edge effect" (HIG · Materials): o conteúdo que passa por baixo do
   topo e da barra de abas fica desfocado e some aos poucos, para manter a leitura */
@media (max-width: 860px) {
  .estilo-apple .principal::before, .estilo-apple .principal::after {
    content: ""; position: fixed; left: 0; right: 0; z-index: 15; pointer-events: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .estilo-apple .principal::before { top: 0; height: 96px; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
  .estilo-apple .principal::after { bottom: 0; height: 110px; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
}
@media (prefers-reduced-transparency: reduce) { .estilo-apple .principal::before, .estilo-apple .principal::after { display: none; } }

/* Barra de seleção em lote (Clientes): fica abaixo do topo de vidro preso no alto */
@media (max-width: 860px) { .estilo-apple .barra-lote { top: 80px; z-index: 16; } }