<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pipeline · Caio Caprioli</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta property="og:title" content="Pipeline · Caio Caprioli" />
    <meta property="og:description" content="Gestão comercial de propostas, clientes e oportunidades — Estadão." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.carteira.caiocaprioli.com/" />
    <meta property="og:image" content="https://www.carteira.caiocaprioli.com/og.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Pipeline · Caio Caprioli" />
    <meta name="twitter:image" content="https://www.carteira.caiocaprioli.com/og.png" />

    <!-- PWA: instalável com ícone e tela cheia -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#26282E" />
    <link rel="icon" href="/favicon-32.png?v=19fd18" sizes="32x32" type="image/png" />
    <link rel="icon" href="/icon-192.png?v=5e4652" sizes="192x192" type="image/png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=d058a1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Pipeline" />
    <meta name="mobile-web-app-capable" content="yes" />


    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one@5.2.5/400.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one@5.2.5/500.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one@5.2.5/600.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one@5.2.5/700.css" rel="stylesheet" />
    <style>
      /* trava o zoom automático do iOS Safari ao focar campos: exige >=16px */
      @media (max-width: 640px){
        input:not([type="checkbox"]):not([type="radio"]), textarea { font-size: 16px !important; }
      }

      :root{
        --papel:#FFFFFF; --cartao:#FFFFFF; --tinta:#3F3F46; --azul:#1B5FAA;
        --ceu:#DFEAF6; --linha:#E5E5EA; --suave:#F5F5F7; --grana:#0E7A4B; --alerta:#C4491D;
        --sec:#75757E; --link:#5B5D66; --borda-forte:var(--btn-borda); --verde-feito:#DCEFE4;
        --roxo:#7A4FA3;--rosa:#B0416B;--rosa-suave:#FBE4EE;--rosa-pastel:#F2A9C4;--btn:#E5E5EA;--btn-borda:#C9CAD2;--txt1:#B4B4BC;--txt2:#9A9AA2;--txt3:#6B6E76;--txt4:#5A5A62; --roxo-suave:#EEE6F7; --azul-pastel:#5B9BD5; --roxo-pastel:#A98BD4;
      }
      html.dark{
        /* Grafite quente: cinza com fundo amarelado, ecoando o greige do modo claro.
           O azul de ação dá lugar ao âmbar; verde, alerta e roxo mantêm o significado. */
        --papel:#151412; --cartao:#1E1C19; --tinta:#E6DAC4; --azul:#C8A05A;
        --ceu:#33291A; --linha:#3A3937; --suave:#282521; --grana:#7FB069; --alerta:#D97757;
        --sec:#A6977E; --link:#C6B69A; --borda-forte:#4E4B47; --verde-feito:#1E2E1E;
        --roxo:#B99BD8;--rosa:#E79BBB;--rosa-suave:#3A2A30;--rosa-pastel:#D194AE;--btn:#E6DAC4;--btn-borda:#C7B99F;--txt1:#B8AB94;--txt2:#9E9282;--txt3:#6E655A;--txt4:#5C5348; --roxo-suave:#2E2438; --azul-pastel:#D9A05B; --roxo-pastel:#B99BD8;
      }
      /* ---- entrada do cabeçalho, acompanhando o logo ---- */
      @keyframes zTituloEntra{
        from{ opacity:0; transform: translateY(10px) scale(.985); filter: blur(3px); }
        to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
      }
      @keyframes zSubEntra{ from{ opacity:0; transform: translateY(5px);} to{ opacity:1; transform: translateY(0);} }
      .titulo-entra{
        animation: zTituloEntra .85s cubic-bezier(.2,.75,.3,1) both;
        animation-delay: .22s;
      }
      .sub-entra{
        animation: zSubEntra .6s ease both;
        animation-delay: 1.5s;
      }
      @media (prefers-reduced-motion: reduce){
        .titulo-entra, .sub-entra{ animation: none; opacity:1; transform:none; filter:none; }
      }
      /* ---- abas: linha que expande no hover, preenchimento no clique ---- */
      /* a barra tem altura fixa (a da aba selecionada) pra nada abaixo se mexer */
      .aba-barra{ min-height: 46px; }
      @media (min-width: 640px){ .aba-barra{ min-height: 56px; } }
      .aba-nova{
        position: relative;
        background: var(--suave);
        border: 0;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
        overflow: hidden;
        color: var(--sec);
        align-self: end;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
        transition: color .22s ease, height .26s cubic-bezier(.3,.8,.4,1), background .22s ease;
        -webkit-tap-highlight-color: transparent;
      }
      @media (min-width: 640px){ .aba-nova{ height: 46px; } }
      /* selecionada é mais alta — o texto, centralizado, sobe junto */
      .aba-nova[aria-selected="true"]{ height: 46px; }
      @media (min-width: 640px){ .aba-nova[aria-selected="true"]{ height: 56px; } }
      /* linha de base, cinza clara */
      .aba-nova::before{
        content:"";
        position:absolute; left:0; right:0; bottom:0; height:3px;
        background: var(--linha);
      }
      /* linha colorida que cresce do centro */
      .aba-nova .aba-linha{
        position:absolute; left:50%; right:50%; bottom:0; height:3px;
        background: var(--cor-aba);
        transition: left .26s cubic-bezier(.3,.8,.4,1), right .26s cubic-bezier(.3,.8,.4,1);
        z-index:1;
      }
      .aba-nova:hover .aba-linha,
      .aba-nova[aria-selected="true"] .aba-linha{ left:0; right:0; }
      /* preenchimento chapado ao selecionar */
      .aba-nova .aba-fundo{
        position:absolute; inset:0;
        background: var(--cor-aba);
        opacity:0;
        transition: opacity .3s ease;
        z-index:0;
      }
      .aba-nova[aria-selected="true"] .aba-fundo{ opacity:1; }
      .aba-nova[aria-selected="true"]{ color:#fff; }
      .aba-nova .aba-texto{ position:relative; z-index:2; }
      @media (hover:none){
        .aba-nova:hover .aba-linha{ left:50%; right:50%; }
        .aba-nova[aria-selected="true"] .aba-linha{ left:0; right:0; }
      }
      /* fonte das abas — no CSS próprio porque o Tailwind compilado não tem esses tamanhos */
      .aba-fonte{ font-size: 10.5px; }
      @media (min-width: 640px){ .aba-fonte{ font-size: 13.5px; } }
      /* logo: traços se desenham do meio pra fora, como uma cobrinha formando o C */
      @keyframes zDesenhaLogo{ to { stroke-dashoffset: 0; } }
      @keyframes zPontoLogo{ from{ opacity:0; transform:scale(.3);} to{ opacity:1; transform:scale(1);} }
      .logo-traco{
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: zDesenhaLogo 1.5s cubic-bezier(.25,.85,.35,1) forwards;
      }
      .logo-ponto{
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation: zPontoLogo .55s cubic-bezier(.34,1.4,.64,1) forwards;
        animation-delay: 1.85s;
      }
      @media (prefers-reduced-motion: reduce){
        .logo-traco, .logo-ponto { animation: none; stroke-dashoffset: 0; opacity: 1; }
      }
      /* o pulso herda a cor da própria bolinha (--gl), a ~30% de opacidade */
      @keyframes pulso-cinza{
        0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl,#15171B) 26%, transparent),
                               0 0 8px color-mix(in srgb, var(--gl,#15171B) 22%, transparent); }
        50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gl,#15171B) 32%, transparent),
                               0 0 14px color-mix(in srgb, var(--gl,#15171B) 28%, transparent); }
      }
      .glow-pulsante{ animation: pulso-cinza 2.2s ease-in-out infinite;
        line-height: 1; padding-bottom: 1px; }
      @supports not (color: color-mix(in srgb, red 30%, transparent)){
        @keyframes pulso-cinza{
          0%, 100% { box-shadow: 0 0 0 3px rgba(21,23,27,0.12); }
          50%      { box-shadow: 0 0 0 5px rgba(21,23,27,0.18); }
        }
      }

      /* fundo fixo da página inteira — genuinamente position:fixed, não rola com o conteúdo.
         Substitui o background-attachment:fixed do body, que é instável no Safari/iOS. */
      .fundo-fixo-app{
        background:
          linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 70%, #F2F2F4 100%),
          radial-gradient(#EDEDF0 1px, transparent 1px);
        background-size: 100% 100%, 32px 32px;
        background-position: center, top left;
        background-repeat: no-repeat, repeat;
      }
      html.dark .fundo-fixo-app{
        background:
          linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,0.12) 62%, rgba(0,0,0,0.28) 100%),
          linear-gradient(135deg, #1F1D1A 0%, #151412 100%),
          radial-gradient(#221F1B 1px, transparent 1px);
        background-size: 100% 100%, 100% 100%, 32px 32px;
        background-position: center, center, top left;
        background-repeat: no-repeat, no-repeat, repeat;
      }

      /* título do header: efeito metálico sutil (bandas suaves de brilho/sombra), mantendo boa legibilidade */
      .titulo-metalico{
        background: linear-gradient(100deg,
          #26262A 0%, #3D3D42 18%, #56565C 32%, #3A3A3F 46%,
          #26262A 58%, #45454A 72%, #2E2E33 86%, #26262A 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      html.dark .titulo-metalico{
        background: linear-gradient(100deg,
          #E6DAC4 0%, #C5B69C 18%, #A8997F 32%, #C2B49A 46%,
          #E6DAC4 58%, #B0A187 72%, #D6C9AF 86%, #E6DAC4 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }

      /* menu fixo do topo: força o vidro de verdade — caso algo tente sobrescrever o background inline */
      .menu-vidro{
        background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%), rgba(242,242,244,0.88) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        border: 1px solid var(--linha) !important;
        box-shadow: 0 1px 1px rgba(16,20,32,0.05), 0 8px 20px rgba(16,20,32,0.13), 0 18px 44px rgba(16,20,32,0.09) !important;
      }
      html.dark .menu-vidro{
        /* o desfoque tinha sido removido: sem ele o degradê some e a barra
           vira um bege chapado. Aqui o efeito espelha o do modo claro. */
        background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0) 45%), rgba(40,37,33,0.94) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        box-shadow: 0 1px 1px rgba(0,0,0,0.30), 0 8px 20px rgba(0,0,0,0.42), 0 18px 44px rgba(0,0,0,0.30),
                    inset 0 1px 0 rgba(255,255,255,0.06) !important;
      }

      /* botão-ícone pequeno (Notas, Nova Proposta rápida etc): sem degradê de brilho —
         numa caixa pequena esse degradê corta estranho, parece "metade escura" */
      .icone-menu{
        background: rgba(255,255,255,0.72) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        border: 1px solid var(--linha) !important;
      }
      html.dark .icone-menu{
        background: rgba(40,37,33,0.92) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
      }

      /* abas: vidro fosco com o brilho do topo em fade da cor própria de cada aba (--cor-aba, definida inline) */
      .aba-vidro{
        background: linear-gradient(180deg, var(--cor-aba, #fff) 0%, transparent 55%), rgba(242,242,244,0.7) !important;
        backdrop-filter: blur(16px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
      }
      html.dark .aba-vidro{
        background: linear-gradient(180deg, var(--cor-aba, #fff) 0%, transparent 55%), rgba(40,42,48,0.6) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
      }

      /* popups e chat do Caíque: claro no modo claro, escuro no modo escuro */
      .vidro-painel{
        background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 35%), rgba(240,240,237,0.95) !important;
        backdrop-filter: blur(24px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
        border: 1px solid #D3D4DC !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 24px 60px rgba(0,0,0,0.16) !important;
      }
      .vidro-painel, .vidro-painel * { color: #26262A !important; }
      .vidro-painel input, .vidro-painel select, .vidro-painel textarea{
        background: rgba(255,255,255,0.85) !important; color: #26262A !important; border-color: var(--btn-borda) !important;
      }
      html.dark .vidro-painel{
        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 35%), rgba(24,26,31,0.92) !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 24px 60px rgba(0,0,0,0.55) !important;
      }
      html.dark .vidro-painel, html.dark .vidro-painel * { color: #E6DAC4 !important; }
      html.dark .vidro-painel input, html.dark .vidro-painel select, html.dark .vidro-painel textarea{
        background: rgba(255,255,255,0.08) !important; color: #E6DAC4 !important; border-color: rgba(255,255,255,0.18) !important;
      }
      .vidro-painel input::-moz-placeholder, .vidro-painel textarea::-moz-placeholder { color: #9A9AA2 !important; opacity: 1 !important; }
      .vidro-painel input::placeholder, .vidro-painel textarea::placeholder { color: #9A9AA2 !important; opacity: 1 !important; }
      /* botão de destaque (fundo bege claro) dentro de popups de vidro — precisa de texto escuro sempre,
         mesmo no modo escuro, senão fica texto claro sobre fundo claro (ilegível).
         especificidade igual/maior que a regra do modo escuro (que tem "html.dark" no seletor). */
      .vidro-painel .botao-destaque, .vidro-painel .botao-destaque * { color: #3F3F46 !important; }
      html.dark .vidro-painel .botao-destaque, html.dark .vidro-painel .botao-destaque * { color: #3F3F46 !important; }

      /* card Nova Proposta: vidro de verdade (blur) + degradê branco->bege/cinza + sombra ao redor */
      .nova-proposta-glass{
        background: var(--cartao) !important;
        border: 1px solid var(--linha) !important;
        box-shadow: none !important;
      }
      .nova-proposta-glass, .nova-proposta-glass * { color: #17191E; }
      .nova-proposta-glass input, .nova-proposta-glass select, .nova-proposta-glass textarea{
        background: rgba(255,255,255,0.85) !important; color: #17191E !important; border-color: #D3D4DC !important;
      }
      html.dark .nova-proposta-glass{
        background: var(--cartao) !important;
        border: 1px solid var(--linha) !important;
        box-shadow: none !important;
      }
      html.dark .nova-proposta-glass, html.dark .nova-proposta-glass * { color: #E6DAC4; }
      html.dark .nova-proposta-glass input, html.dark .nova-proposta-glass select, html.dark .nova-proposta-glass textarea{
        background: rgba(255,255,255,0.06) !important; color: #E6DAC4 !important; border-color: rgba(255,255,255,0.18) !important;
      }
      /* botões do formulário Nova Proposta: cores fixas garantidas nos dois temas */
      .nova-proposta-glass .botao-escuro-fixo, .nova-proposta-glass .botao-escuro-fixo * { color: #fff !important; }
      html.dark .nova-proposta-glass .botao-escuro-fixo, html.dark .nova-proposta-glass .botao-escuro-fixo * { color: #fff !important; }
      .nova-proposta-glass .botao-claro-fixo, .nova-proposta-glass .botao-claro-fixo * { color: #3F3F46 !important; }
      html.dark .nova-proposta-glass .botao-claro-fixo, html.dark .nova-proposta-glass .botao-claro-fixo * { color: #3F3F46 !important; }
      body{ margin:0; background-color:var(--papel);
        color:var(--tinta);
        font-family:"IBM Plex Sans",system-ui,sans-serif; }
      .display{ font-family:"IBM Plex Sans Condensed",sans-serif; }
      .mono{ font-family:"Open Sauce One",sans-serif; font-variant-numeric:tabular-nums; }
      .bg-white{ background-color:var(--cartao) !important; }
      input,select,textarea{ outline:none; }
      input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
        box-shadow:0 0 0 2px var(--azul); }
      ::-moz-selection{ background:var(--ceu); }
      ::selection{ background:var(--ceu); }
      .no-scrollbar::-webkit-scrollbar{ display:none; }
      .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
      @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

      /* balao de resposta do Caique: no modo claro precisa seguir o tema */
      html:not(.dark) .chat-balao-escuro.chat-balao-escuro.chat-balao-escuro,
      html:not(.dark) .chat-balao-escuro.chat-balao-escuro.chat-balao-escuro *{
        color: var(--tinta) !important;
      }
      html:not(.dark) .chat-balao-escuro.chat-balao-escuro.chat-balao-escuro{
        background: var(--suave) !important;
        border-color: var(--linha) !important;
      }

      /* meses da proposta: no celular some o "/26" pra caber tudo numa linha */
      .mes-curto{ display: none; }
      @media (max-width: 640px){
        .mes-longo{ display: none; }
        .mes-curto{ display: inline; }
        .meses-linha{ justify-content: center; }
      }

      /* colunas do box do mês: no celular aperta o respiro pra caber Meta · Aprovado · BG */
      .colunas-mes{ gap: 16px; }
      @media (max-width: 640px){
        .colunas-mes{ gap: 9px; }
        .colunas-mes .text-\[11\.5px\]{ font-size: 10.5px; }
      }

      /* propostas surgem em fade conforme entram na tela */
      [data-fade]{ opacity:0; transform:translateY(10px); }
      [data-fade].fade-on{ opacity:1; transform:none;
        transition:opacity .42s ease, transform .42s ease; }
      @media (prefers-reduced-motion: reduce){
        [data-fade]{ opacity:1 !important; transform:none !important; transition:none !important; }
      }

      /* barras horizontais de porcentagem crescem da esquerda para a direita */
      @keyframes barra-cresce{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
      /* a animação só existe com a classe presente: se o observer falhar,
         a barra aparece normalmente em vez de sumir */
      [data-bar]{ transform-origin:left center; transform:scaleX(0); }
      [data-bar].anim-vis{ animation:barra-cresce .85s cubic-bezier(.22,1,.36,1) both; }
      /* colunas verticais dos graficos crescem de baixo para cima (Recharts) */
      .recharts-bar-rectangle{ transform-origin:center bottom; transform:scaleY(0); }
      .recharts-bar-rectangle.anim-vis{ animation:barra-sobe .8s cubic-bezier(.22,1,.36,1) both; }
      /* barras animadas não capturam toque: o Recharts já calcula o tooltip
         pela posição no gráfico, e barras em scaleY(0) estavam disparando
         o balão sozinhas — e sem mouseleave no celular ele não saía mais */
      .recharts-bar-rectangle, .recharts-bar-rectangle *{ pointer-events:none; }
      .recharts-tooltip-wrapper{ pointer-events:none; }
      /* barras horizontais (projetos em massa) crescem da esquerda para a direita.
         O shorthand precisa estar na .anim-vis: a regra genérica vem depois e
         sobrescreveria só o animation-name, aplicando a animação vertical. */
      .graf-horizontal .recharts-bar-rectangle{
        transform-origin:left center; transform:scaleX(0); }
      .graf-horizontal .recharts-bar-rectangle.anim-vis{
        animation:barra-cresce .85s cubic-bezier(.22,1,.36,1) both; }
      @keyframes barra-sobe{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
      @media (prefers-reduced-motion: reduce){
        [data-bar], .recharts-bar-rectangle{ animation:none !important; transform:none !important; }
      }

      /* box do mês (Best Guess): régua de atingimento na base, sem sombra nem degradê */
      .regua-mes{ position:relative; }
      .aba-bg details.regua-mes > summary{ position:relative; }
      .aba-bg details.regua-mes > *:not(summary){ padding:0 14px 12px; }
      .regua-mes > *{ position:relative; }
      .regua-mes::after{
        content:""; position:absolute; left:0; top:0; height:3px;
        width:var(--p,0%);
        background:linear-gradient(90deg, var(--btn-borda), #8E8E99); opacity:.9;
        border-radius:9px 0 0 0;
        transform-origin:left center;
      }
      .regua-mes.anim-vis::after{ animation:barra-cresce .85s cubic-bezier(.22,1,.36,1) both; }
      /* divisores entre as colunas do box do mês */
      .colunas-mes > div + div{
        border-left:1px solid var(--linha); padding-left:14px;
      }
      @media (max-width: 640px){
        .colunas-mes > div + div{ padding-left:9px; }
      }
      @media (prefers-reduced-motion: reduce){
        .regua-mes::after{ animation:none !important; }
      }

      /* legenda "Perdida": o bege quase some no fundo claro */
      html:not(.dark) .recharts-legend-icon[fill="#ECEAE4"],
      html:not(.dark) .recharts-legend-item path[fill="#ECEAE4"]{ fill:#A9A396 !important; }
      html:not(.dark) .recharts-legend-item-text{ color:var(--tinta) !important; }

      /* tabela do pipeline: cabe inteira no celular, sem rolagem lateral */
      .tabela-pipe{ table-layout:fixed; width:100%; }
      .tabela-pipe .col-cliente{ padding-left:16px; padding-right:6px; }
      .tabela-pipe td:first-child{ padding-left:16px; padding-right:6px; }
      .tabela-pipe .col-dado{ padding-left:3px; padding-right:3px; }
      .tabela-pipe .col-seta{ padding-left:10px; padding-right:16px; }
      .tabela-pipe td:last-child{ padding-right:16px; }
      /* as 7 colunas somam exatamente 100% — inclusive a da seta */
      .tabela-pipe th:nth-child(1){ width:24%; }
      .tabela-pipe th:nth-child(2){ width:18%; }
      .tabela-pipe th:nth-child(3){ width:13%; }
      .tabela-pipe th:nth-child(4){ width:9%; }
      .tabela-pipe th:nth-child(5){ width:14%; }
      .tabela-pipe th:nth-child(6){ width:14%; }
      .tabela-pipe th:nth-child(7){ width:8%; }
      .tabela-pipe td, .tabela-pipe th{ overflow:hidden; text-overflow:ellipsis; }
      @media (max-width: 640px){
        .tabela-pipe{ font-size:11.5px; }
        .tabela-pipe .col-cliente, .tabela-pipe td:first-child{ padding-left:10px; padding-right:2px; }
        .tabela-pipe .col-dado{ padding-left:2px; padding-right:2px; }
        .tabela-pipe .col-seta{ padding-left:6px; padding-right:10px; }
        .tabela-pipe td:last-child{ padding-right:10px; }
        .tabela-pipe td{ padding-top:10px; padding-bottom:10px; }
        /* no celular Projeto e Follow-up somem: as 5 restantes somam 100% */
        .tabela-pipe th:nth-child(1){ width:31%; }
        .tabela-pipe th:nth-child(3){ width:25%; }
        .tabela-pipe th:nth-child(4){ width:14%; }
        .tabela-pipe th:nth-child(5){ width:21%; }
        .tabela-pipe th:nth-child(7){ width:9%; }
        /* valor nunca quebra nem vira reticencias */
        .tabela-pipe td:nth-child(3){ white-space:nowrap; font-size:11px; }
      }

      /* slider da calculadora de propostas */
      .slider-calc{ -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
        background:var(--linha); outline:none; }
      .slider-calc::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
        width:24px; height:24px; border-radius:50%; background:var(--azul);
        border:3px solid var(--cartao); box-shadow:0 1px 4px rgba(16,20,32,.28); cursor:grab; }
      .slider-calc::-webkit-slider-thumb:active{ cursor:grabbing; }
      .slider-calc::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
        background:var(--azul); border:3px solid var(--cartao); cursor:grab; }
      .slider-calc::-moz-range-track{ height:6px; border-radius:999px; background:var(--linha); }

      .slider-calc{ -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
        background:var(--linha); outline:none; }
      .slider-calc::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
        width:24px; height:24px; border-radius:50%; background:var(--azul);
        border:3px solid var(--cartao); box-shadow:0 1px 4px rgba(16,20,32,.28); cursor:grab; }
      .slider-calc::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
        background:var(--azul); border:3px solid var(--cartao); cursor:grab; }

      /* botões de ação do formulário: 2 por linha e menores no celular,
         para o campo de Notas continuar visível */
      .botoes-acao{ display:flex; gap:8px; flex-wrap:wrap; }
      @media (max-width: 640px){
        .botoes-acao{ display:grid; grid-template-columns:1fr 1fr; gap:6px;
          padding-top:6px !important; margin-bottom:10px; }
        .botoes-acao > *{ width:100%; font-size:11.5px !important;
          padding:7px 8px !important; }
      }

      /* legenda do tooltip: o pastel da barra não tem contraste no fundo branco,
         então cada um assume a versão escura correspondente do mesmo status */
      .recharts-tooltip-item[style*="rgb(183, 214, 171)"]{ color:#0E7A4B !important; }
      .recharts-tooltip-item[style*="rgb(255, 105, 97)"]{ color:#C4491D !important; }
      .recharts-tooltip-item[style*="rgb(245, 162, 90)"]{ color:#B8560C !important; }
      .recharts-tooltip-item[style*="rgb(132, 182, 244)"]{ color:#1B5FAA !important; }
      .recharts-tooltip-item[style*="rgb(236, 234, 228)"]{ color:#8A8578 !important; }
      .recharts-tooltip-item[style*="rgb(91, 155, 213)"]{ color:#1B5FAA !important; }
      .recharts-tooltip-item[style*="rgb(169, 139, 212)"]{ color:#7A4FA3 !important; }
      .recharts-tooltip-item[style*="rgb(140, 172, 126)"]{ color:#0E7A4B !important; }
      .recharts-tooltip-item[style*="rgb(240, 200, 122)"]{ color:#B8560C !important; }
      .recharts-tooltip-item[style*="rgb(245, 160, 138)"]{ color:#C4491D !important; }
      .recharts-tooltip-item{ font-weight:600; }

      /* rótulo do tooltip (o mês) vinha em cinza claro herdado, sem contraste */
      .recharts-tooltip-label{ color:var(--tinta) !important; font-weight:700 !important;
        margin-bottom:2px !important; }
      .recharts-default-tooltip{ background:var(--cartao) !important;
        border-color:var(--linha) !important; }

      /* o risco do fim da régua corre junto com a barra, em vez de esperar parado */
      @keyframes marcador-corre{ from{ left:0; } to{ left:var(--p,0%); } }
      .marcador-regua.anim-vis{ animation:marcador-corre .85s cubic-bezier(.22,1,.36,1) both; }
      @media (prefers-reduced-motion: reduce){
        .marcador-regua{ animation:none !important; }
      }

      /* balão do Caíque: desenhado para painel escuro, mas o .vidro-painel força
         a cor do texto pelo tema — estas regras vencem essa herança */
      .balao-caique .balao-fechar{
        background: var(--cartao) !important; color: var(--tinta) !important;
        border: 1px solid var(--borda-forte) !important;
      }
      .balao-caique .balao-ouvir{
        background: var(--suave) !important; color: var(--tinta) !important;
        border: 1px solid var(--borda-forte) !important;
      }
      .balao-caique .balao-dica{ color: var(--sec) !important; }
      /* respiro do topo e folga à direita, pra o texto não passar sob o ✕ */
      .balao-caique .balao-corpo{ padding: 26px 38px 0 16px; }

      /* tamanho do Caíque flutuante — ajustar aqui os dois valores */
      .caique-fig{ height: 158px; }
      @media (min-width: 640px){ .caique-fig{ height: 126px; } }

      /* Visão geral: todo card ganha a linha superior, mesmo os sem cor própria.
         Os que já têm tom (Rt/tj) desenham a linha por dentro — o ::before só
         aparece nos demais, em cinza. */
      .visao-geral > div,
      .visao-geral > div > div{ position: relative; }
      .visao-geral [class*="rounded-xl"]{ position: relative; }
      .visao-geral [class*="rounded-xl"]:not([style*="linear-gradient"])::before{
        content:""; position:absolute; left:0; right:0; top:0; height:4px;
        border-radius:12px 12px 0 0; pointer-events:none;
        background:linear-gradient(180deg, var(--borda-forte), transparent);
        opacity:.55;
      }
      /* destaque suave nesses dois: fade de cima para baixo */
      .visao-geral .box-fade{
        background-image:linear-gradient(180deg, rgba(120,124,136,0.09), rgba(120,124,136,0) 42%);
      }
      html.dark .visao-geral .box-fade{
        background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 42%);
      }

      /* barra de ações em massa: flutua no rodapé enquanto houver seleção,
         senão ficava fora da vista, longe da tabela */
      .barra-massa{
        position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
        box-shadow: 0 6px 24px rgba(16,20,32,.22);
      }
      @media (min-width: 640px){
        .barra-massa{ left: 50%; right: auto; transform: translateX(-50%);
          min-width: 460px; max-width: 720px; }
      }

      /* versão light: some com e-mail, calendário, reuniões, Caíque,
         resumo do chefe, oportunidades do Ataque e follow-ups */
      .modo-light [data-full]{ display:none !important; }
      .modo-light .caique-fig,
      .modo-light .balao-caique{ display:none !important; }

      /* notas + botões: lado a lado no desktop, empilhados no celular.
         (sm:flex-row não existe no CSS compilado — por isso a classe própria) */
      .linha-notas{ display:flex; flex-direction:row; }
      .linha-notas > *:first-child{ flex:1 1 auto; min-width:0; }
      .botoes-acao{ padding-top:22px; }
      @media (max-width: 640px){
        .linha-notas{ flex-direction:column; }
        .botoes-acao{ padding-top:6px !important; }
      }

      /* aba Ataque: mesma linha superior colorida dos demais boxes */
      .aba-ataque [class*="rounded-xl"]{ position:relative; }
      .aba-ataque [class*="rounded-xl"]::before{
        content:""; position:absolute; left:0; right:0; top:0; height:4px;
        border-radius:12px 12px 0 0; pointer-events:none; opacity:.55;
        background:linear-gradient(180deg, var(--borda-forte), transparent);
      }
      .aba-ataque .box-oportunidade::before{
        background:linear-gradient(180deg, var(--rosa), transparent); opacity:.75;
      }
      /* kanban com seis colunas */
      .kanban-6{ display:grid; gap:8px; grid-template-columns:repeat(6, minmax(0,1fr)); }
      @media (max-width: 1100px){ .kanban-6{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
      @media (max-width: 640px){ .kanban-6{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
      /* projetos em massa na Visão geral: colunas, não empilhado */
      .massa-cols{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); }
      /* e-mails esperando: duas colunas */
      .emails-2col{ display:grid; gap:10px 18px; grid-template-columns:repeat(2, minmax(0,1fr)); }
      @media (max-width: 720px){ .emails-2col{ grid-template-columns:1fr; } }

      /* mobile: aperta mês e valor para o status caber inteiro */
      @media (max-width: 640px){
        /* colunas visíveis no celular: 1 cliente · 3 valor · 4 mês · 5 status · 7 seta
           (2 projeto e 6 follow-up ficam ocultos) */
        /* larguras do celular. As colunas 2 (projeto) e 6 (follow-up) ficam ocultas,
           então as visíveis são 1 cliente · 3 valor · 4 mês · 5 status · 7 seta. */
        .tabela-pipe td, .tabela-pipe th{ padding-left:4px !important; padding-right:4px !important; }
        .tabela-pipe .col-cliente, .tabela-pipe td:nth-of-type(1), .tabela-pipe th:nth-of-type(1){
          width:29% !important; padding-left:14px !important; }
        .tabela-pipe td:nth-of-type(3), .tabela-pipe th:nth-of-type(3){ width:21% !important; }
        .tabela-pipe td:nth-of-type(4), .tabela-pipe th:nth-of-type(4){
          width:15% !important; text-align:left; }
        .tabela-pipe td:nth-of-type(5), .tabela-pipe th:nth-of-type(5){ width:26% !important; }
        /* a seta recua o mesmo tanto que o cliente avança, para as margens baterem */
        .tabela-pipe td:nth-of-type(7), .tabela-pipe th:nth-of-type(7){
          width:9% !important; padding-right:14px !important; text-align:right; }
        .tabela-pipe .col-dado{ white-space:nowrap; }
        .tabela-pipe select{ font-size:10px !important; padding-left:5px !important;
          padding-right:5px !important; }
        /* legenda dos gráficos em uma linha só */
        .recharts-legend-wrapper{ font-size:9.5px !important; }
        .recharts-legend-item{ margin-right:6px !important; }
        .recharts-legend-item-text{ font-size:9.5px !important; }
        .recharts-surface{ overflow:visible; }
      }

      /* agenda ocupa a largura toda; a lista de reuniões cresce com o box */
      .agenda-full > *{ min-width:0; }
      .agenda-full{ align-items:stretch; }
      /* Modo Chefe: funil e maiores negociações com a mesma altura,
         e a lista preenchendo o espaço em vez de deixar vazio embaixo */
      .chefe-par{ display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:stretch; }
      @media (max-width: 900px){ .chefe-par{ grid-template-columns:1fr; } }
      .chefe-par > *{ display:flex; flex-direction:column; }
      .chefe-par .lista-cresce{ flex:1 1 auto; }

      /* cabeçalho da coluna não quebra em várias linhas no celular */
      .kanban-6 .display{ white-space: nowrap; }
      @media (max-width: 640px){
        .kanban-6 .display{ font-size: 11px !important; letter-spacing: .04em !important; }
      }

      /* modo escuro: legenda e tooltip dos gráficos precisam de contraste.
         O Recharts escreve cores claras fixas, que somem no fundo escuro. */
      html.dark .recharts-legend-item-text{ color: var(--tinta) !important; }
      html.dark .recharts-cartesian-axis-tick-value{ fill: var(--sec) !important; }
      html.dark .recharts-default-tooltip{
        background: var(--cartao) !important; border-color: var(--borda-forte) !important; }
      html.dark .recharts-tooltip-label{ color: var(--tinta) !important; }
      html.dark .recharts-tooltip-item{ color: var(--tinta) !important; }
      html.dark .recharts-tooltip-item-name,
      html.dark .recharts-tooltip-item-separator,
      html.dark .recharts-tooltip-item-value{ color: var(--tinta) !important; }

      /* legenda dos gráficos em uma linha só, inclusive no celular */
      .recharts-legend-wrapper{ line-height:1.2; }
      .recharts-default-legend{ display:flex !important; flex-wrap:nowrap !important;
        justify-content:center; gap:2px; overflow:hidden; }
      .recharts-legend-item{ margin-right:4px !important; white-space:nowrap; }
      @media (max-width: 640px){
        .recharts-legend-wrapper, .recharts-legend-item-text{ font-size:8.5px !important; }
        .recharts-legend-item{ margin-right:2px !important; }
        .recharts-legend-item .recharts-surface{ width:8px !important; height:8px !important; }
      }

      /* lista de oportunidades em colunas, para não virar uma coluna longa */
      .op-cols{ display:grid; gap:2px 20px; grid-template-columns:repeat(3, minmax(0,1fr)); }
      @media (max-width: 900px){ .op-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
      @media (max-width: 480px){ .op-cols{ grid-template-columns:1fr; } }

      /* Best Guess: os boxes estavam encostando um no outro na vertical */
      .aba-bg > *{ margin-bottom:14px; }
      .aba-bg > *:last-child{ margin-bottom:0; }
      .aba-bg .grid{ row-gap:14px; }
      /* dentro do bloco de cada mês os boxes encostavam um no outro:
         o espaçamento do container não alcançava esse nível */
      .aba-bg .bloco-bg{ margin-top:14px; }
      .aba-bg [class*="rounded-xl"] + [class*="rounded-xl"]{ margin-top:14px; }
      .aba-bg .grid > [class*="rounded-xl"] + [class*="rounded-xl"]{ margin-top:0; }
      /* o kanban e as demais grades tambem sao lado a lado: a margem entre
         irmaos empurrava a segunda coluna para baixo */
      .aba-bg .kanban-6 > * + *,
      .aba-bg [class*="grid-cols"] > [class*="rounded-xl"] + [class*="rounded-xl"]{ margin-top:0 !important; }

      /* troca de página no kanban: os cards saem e entram com fade */
      .kanban-lista > div{ animation: card-entra .28s ease both; }
      @keyframes card-entra{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
      @media (prefers-reduced-motion: reduce){ .kanban-lista > div{ animation:none; } }

      /* animações do Caíque */
      @keyframes cc-sobe{ from{ opacity:0; transform:translate(-50%,-50%) translateY(14px) scale(.7); }
        25%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) translateY(-26px) scale(1.05); } }
      @keyframes cc-cai{ from{ opacity:0; transform:translate(-50%,-50%) translateY(-14px); }
        20%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) translateY(60px); } }
      @keyframes cc-balao{ from{ opacity:0; transform:translate(-50%,-50%) translateY(12px) scale(.6); }
        18%{ opacity:1; transform:translate(-50%,-50%) translateY(-4px) scale(1.06); }
        30%{ transform:translate(-50%,-50%) translateY(0) scale(1); }
        80%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) translateY(-6px); } }
      @keyframes cc-pisca{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
        20%{ opacity:1; transform:translate(-50%,-50%) scale(1.3); }
        40%{ opacity:.3; } 60%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
        to{ opacity:0; transform:translate(-50%,-50%) scale(.8); } }
      @keyframes cc-voa{ from{ opacity:0; transform:translate(-50%,-50%) translateX(-40px) rotate(-12deg); }
        15%{ opacity:1; } 50%{ transform:translate(-50%,-50%) translateX(60px) translateY(-22px) rotate(8deg); }
        to{ opacity:0; transform:translate(-50%,-50%) translateX(150px) translateY(-40px) rotate(16deg); } }
      @keyframes cc-deriva{ from{ opacity:0; transform:translate(-50%,-50%) translateX(-30px); }
        12%{ opacity:.8; } 88%{ opacity:.8; }
        to{ opacity:0; transform:translate(-50%,-50%) translateX(70px); } }
      @keyframes cc-brilha{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(0); }
        20%{ opacity:1; } 50%{ transform:translate(-50%,-50%) scale(1.12) rotate(20deg); }
        80%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) scale(.9) rotate(40deg); } }
      @keyframes cc-orbita{ from{ opacity:0; transform:translate(-50%,-50%) rotate(0) translateX(46px) rotate(0); }
        12%{ opacity:1; } 88%{ opacity:1; }
        to{ opacity:0; transform:translate(-50%,-50%) rotate(360deg) translateX(46px) rotate(-360deg); } }
      @keyframes cc-treme{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
        15%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-10deg); }
        40%{ transform:translate(-50%,-50%) rotate(10deg); }
        65%{ transform:translate(-50%,-50%) rotate(-6deg); }
        to{ opacity:0; transform:translate(-50%,-50%) scale(.9); } }
      @keyframes cc-entra{ from{ opacity:0; transform:translate(-50%,-50%) translateX(46px) scale(.6); }
        20%{ opacity:1; transform:translate(-50%,-50%) translateX(0) scale(1); }
        78%{ opacity:1; transform:translate(-50%,-50%) translateX(0) scale(1); }
        to{ opacity:0; transform:translate(-50%,-50%) translateX(30px) scale(.8); } }
      @keyframes cc-decola{ from{ opacity:0; transform:translate(-50%,-50%) translateY(20px) rotate(-30deg) scale(.7); }
        20%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) translateY(-70px) translateX(26px) rotate(-30deg) scale(1.1); } }

      /* follow-ups na Visão geral: 3 colunas no desktop, 1 no celular */
      .fup-cols{ display:grid; gap:10px;
        grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); }
      @media (max-width: 640px){
        .fup-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
        .fup-cols .text-\[13px\]{ font-size:12px; }
      }

      /* rótulos pequenos em caixa alta: um ponto menor e menos espaçados.
         Os títulos grandes (17px+) ficam como estão. */
      .display.text-\[10px\]{ font-size:9px !important; }
      .display.text-\[11px\]{ font-size:10px !important; }
      .display.text-\[11\.5px\]{ font-size:10.5px !important; }
      .display.text-\[12px\]{ font-size:11px !important; }
      .display.text-\[13px\]{ font-size:12px !important; }
      .display.text-\[14px\]{ font-size:13px !important; }
      .display.text-\[15px\]{ font-size:14px !important; }
      .display.text-\[16px\]{ font-size:15px !important; }
      /* o espaçamento vem em style inline, então precisa de !important */
      .display.uppercase{ letter-spacing:0.045em !important; }
      .display.text-\[10px\], .display.text-\[11px\]{ letter-spacing:0.05em !important; }

      /* trilho das barras de progresso: no tema escuro o preto translúcido
         desaparece no fundo, e não dá para ver que existe barra a preencher */
      /* o navegador serializa o estilo inline com espaços: rgba(0, 0, 0, 0.06).
         O seletor precisa cobrir as duas formas. */
      html.dark [style*="rgba(0, 0, 0, 0.06)"],
      html.dark [style*="rgba(0, 0, 0, 0.08)"],
      html.dark [style*="rgba(0, 0, 0, 0.05)"],
      html.dark [style*="rgba(0, 0, 0, 0.1)"],
      html.dark [style*="rgba(0,0,0,0.06)"],
      html.dark [style*="rgba(0,0,0,0.08)"],
      html.dark [style*="rgba(0,0,0,0.05)"],
      html.dark [style*="rgba(0,0,0,0.1)"]{
        background: rgba(255,255,255,0.15) !important;
      }

      /* marca do ano nos meses que já viraram (ex.: 27 sobre "jan") */
      /* o ano ficava para fora da pílula: agora vive dentro dela */
      .ano-marca{
        position:absolute; top:2px; right:5px;
        font-size:7.5px; font-weight:700; line-height:1;
        opacity:.6; letter-spacing:0;
      }
      .meses-linha button{ position:relative; }
      .meses-linha button:has(.ano-marca){ padding-top:9px; padding-bottom:5px; }
      /* uma linha só, com rolagem lateral se faltar largura */
      .meses-linha{ flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden;
        -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
      .meses-linha::-webkit-scrollbar{ display:none; }
      .meses-linha > button{ flex:0 0 auto; }

      /* e-mails pendentes: em duas colunas estreitas o assunto empurrava
         o prazo e o X para fora do card */
      .emails-2col{ min-width:0; }
      .emails-2col > div{ min-width:0; overflow:hidden; }
      .emails-2col .truncate{ min-width:0; }
      .emails-2col .shrink-0{ flex:0 0 auto; white-space:nowrap; }

      /* Linha superior e degradê nos boxes grandes — radar, gráficos, listas.
         Feito só por CSS: mexer no componente derrubou a aplicação antes.
         Os cards de KPI já trazem o próprio efeito colorido e ficam de fora
         pelo :not(), que os identifica pelo padding característico deles. */
      .visao-geral > .border.rounded-xl,
      .aba-bg .border.rounded-xl,
      .aba-pipeline .border.rounded-xl{
        position:relative; overflow:hidden;
      }
      .visao-geral > .border.rounded-xl:not(.px-4)::before,
      .aba-bg .border.rounded-xl:not(.px-4)::before,
      .aba-pipeline .border.rounded-xl:not(.px-4)::before{
        content:""; position:absolute; left:0; right:0; top:0; height:4px;
        border-radius:12px 12px 0 0; pointer-events:none; z-index:0;
        background:linear-gradient(180deg, rgba(120,120,128,0.5), transparent);
      }
      html.dark .visao-geral > .border.rounded-xl:not(.px-4)::before,
      html.dark .aba-bg .border.rounded-xl:not(.px-4)::before,
      html.dark .aba-pipeline .border.rounded-xl:not(.px-4)::before{
        background:linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
      }

      /* Best Guess: a busca ficava colada no box de cima */
      .aba-bg input[placeholder*="Buscar cliente"]{ margin-top:14px; }

      /* Ataque: as linhas coloridas dos eventos ficavam na lateral;
         o padrão do site é linha no topo */
      .radar-evento{ position:relative; border-left:0 !important; padding-top:14px !important; }
      .radar-evento::before{
        content:""; position:absolute; left:0; right:0; top:0; height:3px;
        border-radius:8px 8px 0 0; background:var(--cor-evento,var(--sec));
      }

      /* kanban: colunas com alturas diferentes no celular */
      .kanban-6 > *{ align-self:start; }
      @media (max-width: 640px){ .kanban-6{ align-items:start; } }

      /* os 4 cards do topo do Pipeline ocupam a largura toda no desktop,
         e as barras alinham na mesma altura */
      .aba-pipeline .lg\:grid-cols-4{ width:100%; }
      @media (min-width: 1024px){
        .aba-pipeline .lg\:grid-cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
      }
      .aba-pipeline .lg\:grid-cols-4 > *{ display:flex; flex-direction:column; }
      .aba-pipeline .lg\:grid-cols-4 > * > *:last-child{ margin-top:auto; }

      /* Best Guess: % ao fim da linha de cada mês, no topo do box */
      .bg-mes-pct{
        position:absolute; top:3px; font-size:9px; font-weight:700;
        color:var(--sec); letter-spacing:0; transform:translateX(-50%);
        pointer-events:none; white-space:nowrap;
      }
      /* o mês precisa de folga acima para a % não encostar no box anterior */
      .aba-bg details{ margin-top:18px; }
      .aba-bg details:first-of-type{ margin-top:6px; }

      /* Raio-X: duas colunas no celular e no desktop, como pedido */
      .raiox-cols{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
      @media (min-width: 1100px){ .raiox-cols{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
      .aba-raiox a:hover{ text-decoration:underline !important; }
      /* sete abas cabem na linha: fonte um pouco menor no celular */
      @media (max-width: 640px){ .aba-nova{ padding-left:2px; padding-right:2px; } }

      /* o título leva de volta ao início; o brilho indica que é clicável */
      .titulo-link{ transition:opacity .18s ease, filter .18s ease; }
      .titulo-link:hover{ opacity:.82; filter:saturate(1.1); }
      .titulo-link:active{ opacity:.7; }
      .titulo-link:focus-visible{ outline:2px solid var(--azul); outline-offset:4px; border-radius:6px; }

      /* itens do radar de follow-up levam até a proposta na lista */
      .fup-item{ border-radius:8px; padding:3px 5px; margin:0 -5px;
        transition:background .18s ease, transform .18s ease; }
      .fup-item:hover{ background:var(--suave); transform:translateX(2px); }
      .fup-item:active{ opacity:.75; }
    </style>
    <script>
      // Safari/iOS às vezes restaura um "instantâneo" congelado da página (bfcache) ao voltar
      // uma página ou reabrir o app instalado — isso pode mostrar uma versão antiga depois de
      // um deploy novo. Detecta isso e força um reload de verdade, buscando o app atual.
      window.addEventListener("pageshow", (event) => {
        if (event.persisted) window.location.reload();
      });
    </script>
    <script type="module" crossorigin src="/assets/index-d96926c6.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CB874ef7fe.css">
  <!-- Cloudflare Web Analytics --><script type='module' src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "03182c3714dd4f878abdd7c03b194663"}'></script><!-- End Cloudflare Web Analytics -->
  </head>
  <body>
    <div id="root"></div>
  <script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a21357af1d306af6',t:'MTc4NTA2ODI1OQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
  <script>
  // coleta própria de uso: id anônimo no navegador, pageview por aba e ping de 30s
  (function(){
    var VID_K = "cc_vid";
    var vid = localStorage.getItem(VID_K);
    if (!vid) { vid = (Date.now().toString(36) + Math.random().toString(36).slice(2, 10)); 
                localStorage.setItem(VID_K, vid); }
    var env = function(tipo, extra){
      try {
        fetch("/api/track", { method: "POST", keepalive: true,
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(Object.assign({ vid: vid, tipo: tipo }, extra || {})) });
      } catch (e) {}
    };
    var abaAtual = function(){
      var b = document.querySelector('[class*="aba-vidro"][aria-current="true"], .aba-ativa');
      if (b && b.textContent) return b.textContent.trim().slice(0, 24);
      return (location.hash || "pipeline").replace("#", "") || "pipeline";
    };
    var ultima = "";
    var marcarPv = function(){
      var a = abaAtual();
      if (a === ultima) return;
      ultima = a; env("pv", { aba: a });
    };
    marcarPv();
    setInterval(marcarPv, 2000);
    setInterval(function(){ if (document.visibilityState === "visible") env("ping", { dur: 30 }); }, 30000);
    document.addEventListener("visibilitychange", function(){
      if (document.visibilityState === "visible") { ultima = ""; marcarPv(); }
    });
  })();
  (function(){
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    var io = new IntersectionObserver(function(ents){
      ents.forEach(function(en, i){
        if (!en.isIntersecting) return;
        var el = en.target, fade = el.hasAttribute("data-fade");
        // cada elemento anima uma unica vez: para de observar assim que dispara,
        // entao subir e descer a pagina nao reanima nada
        io.unobserve(el);
        var cls = fade ? "fade-on" : "anim-vis";
        var atraso = fade ? Math.min(i, 8) * 45 : 0;
        setTimeout(function(){ el.classList.add(cls); }, atraso);
      });
    }, { rootMargin: "0px 0px -22% 0px", threshold: 0.55 });

    function varrer(raiz){
      var alvos = (raiz.querySelectorAll ? raiz.querySelectorAll("[data-fade],[data-bar],.recharts-bar-rectangle,.regua-mes,.marcador-regua") : []);
      for (var i = 0; i < alvos.length; i++){
        var el = alvos[i];
        if (el.dataset.fadeObs) continue;
        el.dataset.fadeObs = "1";
        // ja visivel no primeiro paint: mostra sem esperar rolagem
        io.observe(el);
      }
    }
    // React recria a lista a cada render: observa o que aparecer
    new MutationObserver(function(muts){
      muts.forEach(function(m){
        m.addedNodes.forEach(function(n){ if (n.nodeType === 1) varrer(n); });
      });
    }).observe(document.documentElement, { childList: true, subtree: true });
    document.addEventListener("DOMContentLoaded", function(){ varrer(document); });
    varrer(document);

    // rede de seguranca: se por qualquer motivo o observer nao disparar,
    // nada pode ficar invisivel. Passados 2s, mostra o que sobrou.
    setInterval(function(){
      // nada pode ficar recolhido: se em 2s o observer nao marcou e o
      // elemento ja passou pela tela (ou nem tem caixa), libera na marra
      var pend = document.querySelectorAll("[data-fade]:not(.fade-on),[data-bar]:not(.anim-vis),.recharts-bar-rectangle:not(.anim-vis),.regua-mes:not(.anim-vis),.marcador-regua:not(.anim-vis)");
      for (var i = 0; i < pend.length; i++){
        var r = pend[i].getBoundingClientRect();
        if ((r.height === 0 && r.width === 0) || r.top < innerHeight * 0.95) {
          pend[i].classList.add(pend[i].hasAttribute("data-fade") ? "fade-on" : "anim-vis");
        }
      }
    }, 2000);
  })();
  </script>
  <script>
  // ---------------------------------------------------------------- confete
  // Canvas por cima de tudo, sem dependência. Some sozinho quando acaba.
  (function(){
    var CORES = ["#0E7A4B","#4FBF8B","#B7D6AB","#D9A514","#7A4FA3","#A98BD4","#1B5FAA","#84B6F4"];

    function confete(opts){
      opts = opts || {};
      var n = opts.n || 90, dourado = opts.dourado;
      var cores = dourado ? ["#D9A514","#F0C87A","#B8860B","#FFD700","#E8C36A"] : CORES;
      if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;

      var cv = document.createElement("canvas");
      cv.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:9999";
      cv.width = innerWidth; cv.height = innerHeight;
      document.body.appendChild(cv);
      var ctx = cv.getContext("2d"), pecas = [], fim = Date.now() + 3200;

      for (var i = 0; i < n; i++){
        pecas.push({
          x: innerWidth * (0.15 + Math.random() * 0.7),
          y: -20 - Math.random() * innerHeight * 0.4,
          w: 6 + Math.random() * 6, h: 9 + Math.random() * 7,
          cor: cores[(Math.random() * cores.length) | 0],
          vy: 2.2 + Math.random() * 3.2,
          vx: -1.6 + Math.random() * 3.2,
          rot: Math.random() * Math.PI, vr: -0.16 + Math.random() * 0.32
        });
      }

      (function quadro(){
        ctx.clearRect(0, 0, cv.width, cv.height);
        var vivos = 0;
        for (var i = 0; i < pecas.length; i++){
          var p = pecas[i];
          p.x += p.vx; p.y += p.vy; p.rot += p.vr; p.vy += 0.045;
          if (p.y < cv.height + 40) vivos++;
          ctx.save();
          ctx.translate(p.x, p.y); ctx.rotate(p.rot);
          ctx.fillStyle = p.cor;
          ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
          ctx.restore();
        }
        if (vivos > 0 && Date.now() < fim) requestAnimationFrame(quadro);
        else cv.remove();
      })();
    }
    window.ccConfete = confete;

    // proposta aprovada — o app já dispara esse evento
    window.addEventListener("cc-venda-fechada", function(){ confete({ n: 110 }); });

    // ---------------------------------------------------------------- easter egg
    // digitar "dudaduda" três vezes em qualquer lugar
    var buf = "", vezes = 0, ultimo = 0;
    document.addEventListener("keydown", function(ev){
      if (!ev.key || ev.key.length !== 1) return;
      if (Date.now() - ultimo > 4000) { vezes = 0; }
      buf = (buf + ev.key.toLowerCase()).slice(-8);
      if (buf !== "dudaduda") return;
      buf = ""; vezes++; ultimo = Date.now();
      if (vezes < 3) return;
      vezes = 0;
      confete({ n: 160, dourado: true });
      var aviso = document.createElement("div");
      aviso.textContent = "🐴 dudaduda dudaduda dudaduda";
      aviso.style.cssText = "position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);" +
        "z-index:10000;background:#26262A;color:#FFF;padding:14px 22px;border-radius:14px;" +
        "font-family:'IBM Plex Sans Condensed',sans-serif;font-size:22px;font-weight:700;" +
        "text-transform:uppercase;letter-spacing:.08em;box-shadow:0 10px 40px rgba(0,0,0,.3)";
      document.body.appendChild(aviso);
      setTimeout(function(){ aviso.remove(); }, 2600);
    });
  })();
  </script>
  <script>
  /* ------------------------------------------------------------------
     Animações do Caíque. Uma camada por cima do avatar, que solta
     bichinhos e emojis conforme o que acontece no app. Nada aqui pode
     quebrar a página: tudo dentro de try, e o efeito some sozinho.
  ------------------------------------------------------------------ */
  (function(){
    var LENTO = matchMedia("(prefers-reduced-motion: reduce)").matches;

    function alvo(){
      return document.querySelector(".caique-fig");
    }

    function camada(){
      var el = alvo();
      if (!el) return null;
      var c = document.getElementById("cc-anim");
      if (!c){
        c = document.createElement("div");
        c.id = "cc-anim";
        c.style.cssText = "position:fixed;pointer-events:none;z-index:60;overflow:visible";
        document.body.appendChild(c);
      }
      var r = el.getBoundingClientRect();
      // a figura fica colada no rodapé; a camada sobe 180px acima dela para
      // os efeitos aparecerem no campo de visão, não atrás do avatar
      var alturaExtra = 34;
      // o avatar fica colado na borda direita: a camada só cresce para a
      // esquerda, senão os efeitos saem da tela
      var folgaEsq = 34;
      var esq = Math.max(0, r.left - folgaEsq);
      var larg = Math.min(r.right, innerWidth) - esq;
      c.style.left = esq + "px";
      c.style.top = (r.top - alturaExtra) + "px";
      c.style.width = larg + "px";
      c.style.height = (r.height + alturaExtra) + "px";
      return c;
    }

    // solta um elemento com posição, animação e duração
    function solta(html, opts){
      if (LENTO) return;
      var c = camada();
      if (!c) return;
      var o = opts || {};
      var e = document.createElement("div");
      e.innerHTML = html;
      e.style.cssText = "position:absolute;left:" + (o.x != null ? o.x : 50) + "%;top:"
        + (o.y != null ? o.y : 50) + "%;transform:translate(-50%,-50%);"
        + "font-size:" + (o.tam || 22) + "px;line-height:1;white-space:nowrap;"
        + "animation:" + (o.anim || "cc-sobe") + " " + (o.dur || 1800) + "ms ease-out both;"
        + (o.extra || "");
      c.appendChild(e);
      setTimeout(function(){ e.remove(); }, (o.dur || 1800) + 120);
    }

    function balao(texto, dur){
      solta('<span style="background:var(--tinta);color:var(--papel);padding:5px 11px;'
        + 'border-radius:12px;font-family:\'IBM Plex Sans Condensed\',sans-serif;font-weight:700;'
        + 'text-transform:uppercase;letter-spacing:.06em;font-size:15px;'
        + 'box-shadow:0 6px 18px rgba(0,0,0,.22)">' + texto + '</span>',
        { x: 50, y: 6, anim: "cc-balao", dur: dur || 2400, tam: 15 });
    }

    function chuva(emojis, n, opts){
      var o = opts || {};
      for (var i = 0; i < n; i++){
        (function(k){
          setTimeout(function(){
            solta(emojis[(Math.random() * emojis.length) | 0], {
              x: 38 + Math.random() * 24,
              y: o.y != null ? o.y : (26 + Math.random() * 12),
              tam: o.tam || (24 + Math.random() * 14),
              anim: o.anim || "cc-sobe",
              dur: (o.dur || 1600) + Math.random() * 700
            });
          }, k * (o.passo || 110));
        })(i);
      }
    }

    // ---------------------------------------------------------------- efeitos
    var EFEITOS = {
      oie:      function(){
        // format() devolve só o número da hora ("13"); passar isso para new Date()
        // gera Invalid Date e toda comparação vira falsa
        var hh = Number(new Intl.DateTimeFormat("en-US",{timeZone:"America/Sao_Paulo",
          hour:"2-digit",hour12:false}).format(new Date()).replace(/\D/g,"")) % 24;
        var frases;
        if (hh < 6)       frases = ["ainda acordado?","boa madrugada","vai dormir, Caio"];
        else if (hh < 12) frases = ["bom dia!","opa, bom dia","fala, Caio","e aí?","bora?"];
        else if (hh < 18) frases = ["boa tarde!","opa","fala, Caio","e aí?","tamo junto"];
        else if (hh < 22) frases = ["boa noite!","opa, boa noite","fala, Caio","e aí?"];
        else              frases = ["boa noite!","ainda por aqui?","vai com calma"];
        balao(frases[(Math.random()*frases.length)|0]);
      },
      lua:      function(){ solta("🌙", { x: 64, y: 24, tam: 24, anim: "cc-brilha", dur: 5000 });
                            chuva(["✨"], 3, { y: 18, dur: 2600, tam: 13, passo: 320 }); },
      estrelas: function(){ chuva(["✨","⭐"], 4, { y: 20, dur: 2800, tam: 14, passo: 280 }); },
      raio:     function(){ chuva(["⚡"], 5, { anim: "cc-pisca", dur: 900, tam: 26 });
                            balao("proposta nova", 1800); },
      positivo: function(){ chuva(["👍","✅","🙌"], 5, { dur: 1700 }); },
      carta:    function(){ solta("✉️", { x: 34, y: 34, tam: 24, anim: "cc-voa", dur: 2200 }); },
      dinheiro: function(){ chuva(["💸","💰","🤑","💵"], 12, { dur: 2200, passo: 90 });
                            balao("meta batida!", 2600); },
      nuvem:    function(){ solta('<span style="opacity:.75">☁️</span>',
                            { x: 40, y: 26, tam: 26, anim: "cc-deriva", dur: 9000 });
                            solta('<span style="opacity:.6">☁️</span>',
                            { x: 62, y: 34, tam: 20, anim: "cc-deriva", dur: 11000 }); },
      chuvinha: function(){ chuva(["💧"], 8, { y: 18, anim: "cc-cai", dur: 1500, tam: 14, passo: 130 }); },
      sol:      function(){ solta("☀️", { x: 64, y: 24, tam: 24, anim: "cc-brilha", dur: 4000 }); },
      // ociosas
      pensando: function(){ solta("💭", { x: 62, y: 22, tam: 22, anim: "cc-balao", dur: 2600 }); },
      passaros: function(){ chuva(["🐦"], 3, { y: 28, anim: "cc-orbita", dur: 3200, tam: 18, passo: 260 }); },
      confuso:  function(){ chuva(["❌"], 5, { y: 30, anim: "cc-treme", dur: 1500, tam: 16, passo: 90 });
                            solta("❓", { x: 62, y: 20, tam: 22, anim: "cc-balao", dur: 2000 }); },
      pet:      function(){ solta("🐕", { x: 62, y: 44, tam: 26, anim: "cc-entra", dur: 3400 }); },
      cafe:     function(){ solta("☕", { x: 40, y: 44, tam: 22, anim: "cc-entra", dur: 3000 });
                            solta("💨", { x: 42, y: 34, tam: 15, anim: "cc-sobe", dur: 2200 }); },
      musica:   function(){ chuva(["🎵","🎶"], 4, { y: 30, anim: "cc-sobe", dur: 2400, passo: 220 }); },
      sono:     function(){ chuva(["💤"], 3, { x: 64, y: 26, anim: "cc-sobe", dur: 2600, tam: 20, passo: 400 }); },
      borboleta:function(){ solta("🦋", { x: 50, y: 34, tam: 20, anim: "cc-orbita", dur: 4200 }); },
      foguete:  function(){ solta("🚀", { x: 60, y: 42, tam: 24, anim: "cc-decola", dur: 2200 }); },
      raiovoo:  function(){ solta("🛸", { x: 32, y: 26, tam: 22, anim: "cc-voa", dur: 3600 }); },
    };
    var OCIOSAS = ["pensando","passaros","confuso","pet","cafe","musica","sono","borboleta","foguete","raiovoo"];

    function roda(nome){
      try { if (EFEITOS[nome]) EFEITOS[nome](); } catch(e){}
    }
    window.ccCaiqueAnim = roda;

    // ---------------------------------------------------------------- gatilhos do app
    addEventListener("cc-proposta-nova", function(){ roda("raio"); });
    addEventListener("cc-tarefa-feita",  function(){ roda("positivo"); });
    addEventListener("cc-email-add",     function(){ roda("carta"); });
    addEventListener("cc-meta-batida",   function(){ roda("dinheiro"); });

    // ---------------------------------------------------------------- entrada
    function aoEntrar(){
      if (!alvo()) return setTimeout(aoEntrar, 900);
      setTimeout(function(){ roda("oie"); }, 1200);
      setTimeout(function(){ roda(OCIOSAS[(Math.random() * OCIOSAS.length) | 0]); }, 6000);
      clima();
    }
    aoEntrar();

    // ---------------------------------------------------------------- clima real
    function clima(){
      try {
        // São Paulo, sem chave de API
        fetch("https://api.open-meteo.com/v1/forecast?latitude=-23.55&longitude=-46.63&current=weather_code")
          .then(function(r){ return r.json(); })
          .then(function(d){
            var c = d && d.current && d.current.weather_code;
            if (c == null) return;
            function agora(){
              var hh = Number(new Intl.DateTimeFormat("en-US",{timeZone:"America/Sao_Paulo",
                hour:"2-digit",hour12:false}).format(new Date()).replace(/\D/g,"")) % 24;
              var noite = hh >= 18 || hh < 6;
              if (c >= 51) return noite ? "chuvinha" : "chuvinha";   // chuva é chuva a qualquer hora
              if (noite)   return Math.random() < 0.6 ? "lua" : "estrelas";
              if (c === 0 || c === 1) return "sol";
              return "nuvem";
            }
            roda(agora());
            setInterval(function(){
              if (document.visibilityState === "visible") roda(agora());
            }, 150000);
          }).catch(function(){});
      } catch(e){}
    }

    // ---------------------------------------------------------------- ociosas
    setInterval(function(){
      if (document.visibilityState !== "visible") return;
      if (Math.random() > 0.85) return;
      roda(OCIOSAS[(Math.random() * OCIOSAS.length) | 0]);
    }, 18000);

    // clicar no Caíque também solta uma
    addEventListener("click", function(ev){
      var el = alvo();
      if (!el) return;
      var r = el.getBoundingClientRect();
      if (ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top && ev.clientY <= r.bottom){
        roda(OCIOSAS[(Math.random() * OCIOSAS.length) | 0]);
      }
    }, true);
  })();
  </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "03182c3714dd4f878abdd7c03b194663"}'></script><!-- Cloudflare Pages Analytics --><script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a2c36ca83d9360a2',t:'MTc4NjkxNDYxMg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "03182c3714dd4f878abdd7c03b194663"}'></script><!-- Cloudflare Pages Analytics --><script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a2c9e4ca2b721090',t:'MTc4Njk4MjQ0Nw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>

</html>
