/* Escambo (DEV) — layout de computador. RDS 2.3, modo Operate.
   Tudo aqui fica dentro de @media (min-width:1024px): abaixo disso o app é o mesmo do celular, pixel a pixel.
   Shell: topo fixo de largura total + barra lateral (a doca vira trilho) + conteúdo com largura máxima.
   Camadas (sub e fluxo) viram painéis centrados de largura média sobre o app, que fica PARADO: no computador nada desliza
   para o lado; o painel só aparece com fade + escala curta (desktop.js troca os keyframes do app.js). */
@media (min-width:1024px){
 :root{--d-side:232px;--d-max:1120px;--d-gutter:40px;--d-top:64px;--d-ritmo:16px}

 /* ---------- ritmo único: 16 px entre quaisquer blocos (títulos de seção, cartões, linhas, listas) ---------- */
 #lista,#assin,#an,#an-sec,#cc,#ass-det,.split-scroll:has(> .pilha-ass){display:flex;flex-direction:column;gap:var(--d-ritmo)}
 #lista>*,#assin>*,#an>*,#an-sec>*,#cc>*,#ass-det>*,.split-scroll:has(> .pilha-ass)>*{margin-top:0!important;margin-bottom:0!important}
 #an .an-grade,#cc .duas-acoes{gap:var(--d-ritmo)}
 .secao{line-height:20px}

 /* ---------- shell ---------- */
 .shell{max-width:none;margin:0;display:grid;grid-template-columns:var(--d-side) minmax(0,1fr);grid-template-rows:var(--d-top) minmax(0,1fr)}
 .topbar{grid-column:1/-1;grid-row:1;padding:0 24px 0 20px;height:var(--d-top);background:var(--rv-canvas)}
 .brand-text{flex-direction:row;align-items:baseline;gap:12px}
 .brand-text strong{font-size:18px}
 .brand-text small{margin-top:0;font-size:var(--rv-text-sm);padding-left:12px;border-left:1px solid var(--rv-border)}
 .credits{height:40px}
 @media (hover:hover) and (pointer:fine){.credits:hover{border-color:var(--rv-border-strong);background:var(--rv-raised)}}
 .view-stage{grid-column:2;grid-row:2}

 /* doca -> trilho lateral (Solid, sem vidro) */
 .dock,.dock.hide{position:relative;grid-column:1;grid-row:2;left:auto;bottom:auto;transform:none;opacity:1;pointer-events:auto;
  height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;row-gap:4px;column-gap:0;padding:16px 12px;
  background:var(--rv-canvas);-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-right:1px solid var(--rv-border-subtle);border-radius:0;box-shadow:none;z-index:1}
 .dock-indicator{display:none}
 .dock-btn{width:100%;height:44px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 12px;border-radius:var(--rv-radius-md);
  color:var(--rv-text-2);font-size:var(--rv-text-md);font-weight:550;transition:background-color var(--rv-dur-fast) var(--rv-ease-standard),color var(--rv-dur-fast) var(--rv-ease-standard)}
 .dock-btn svg.lucide{width:20px;height:20px}
 .dock-btn::after{content:"";flex:1;text-align:left;white-space:nowrap}
 .dock-btn[data-tab="explorar"]::after{content:"Explorar"}
 .dock-btn[data-tab="painel"]::after{content:"Painel"}
 .dock-btn[data-tab="assinaturas"]::after{content:"Assinaturas"}
 .dock-btn[aria-current='page']{color:var(--rv-text);background:var(--rv-raised);box-shadow:var(--rv-highlight)}
 .dock-btn .bolinha{top:50%;right:14px;margin-top:-4px;box-shadow:none}
 .dock-btn:active svg.lucide{transform:none}
 .dock-btn:active{background:var(--rv-raised)}
 @media (hover:hover) and (pointer:fine){.dock-btn:hover{color:var(--rv-text);background:var(--rv-surface)}.dock-btn[aria-current='page']:hover{background:var(--rv-raised)}}
 html[data-theme='light'] .dock,html[data-theme='light'] .dock.hide{background:var(--rv-canvas);border-color:var(--rv-border-subtle);box-shadow:none}

 /* ---------- área de conteúdo: largura confortável, nunca esticada ---------- */
 .view,.page-ghost{padding:28px max(var(--d-gutter),calc((100% - var(--d-max))/2)) 56px}
 .view.split,.page-ghost.split{padding:28px 0 0}
 .split-top,.split-scroll{padding-left:max(var(--d-gutter),calc((100% - var(--d-max))/2));padding-right:max(var(--d-gutter),calc((100% - var(--d-max))/2))}
 .split-scroll{padding-top:16px;padding-bottom:56px;scroll-padding-bottom:24px}

 /* ---------- barra de rolagem: só o polegar, fino, sem setas nem trilho ---------- */
 :root{--d-thumb:color-mix(in srgb,var(--rv-text) 16%,transparent);--d-thumb-hover:color-mix(in srgb,var(--rv-text) 34%,transparent)}
 .view,.page-ghost,.split-scroll,.panel-scroll,.co2-scroll,.fotos,.fotos-edit,.tags-row,#rande-account .account-scroll{scrollbar-width:auto}
 .view::-webkit-scrollbar,.page-ghost::-webkit-scrollbar,.split-scroll::-webkit-scrollbar,.panel-scroll::-webkit-scrollbar,.co2-scroll::-webkit-scrollbar,
 .fotos::-webkit-scrollbar,.fotos-edit::-webkit-scrollbar,.tags-row::-webkit-scrollbar{display:block}
 ::-webkit-scrollbar{width:6px;height:6px;background:transparent}
 ::-webkit-scrollbar-button{display:none;width:0;height:0}
 ::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner{background:transparent;border:0}
 ::-webkit-scrollbar-thumb{background:var(--d-thumb);border-radius:3px;border:0}
 ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--d-thumb-hover)}

 /* ---------- Explorar: busca e ordem numa linha, catálogo em grade ---------- */
 .split-top:has(> .search){display:flex;align-items:center;gap:16px}
 .split-top>.search{flex:1;max-width:560px}
 .split-top>.ordem{margin:0 0 0 auto}
 .saas-list:has(> .saas-card){grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
 .saas-card{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;align-content:start;gap:14px;padding:18px;min-height:188px}
 .saas-card>.logo{grid-column:1;grid-row:1}
 .saas-card>.lado{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end}
 .saas-card>.meio{grid-column:1/-1;grid-row:2;align-self:stretch;grid-template-rows:auto 1fr auto;gap:6px}
 .saas-card .nome{font-size:var(--rv-text-lg);letter-spacing:-.01em}
 .saas-card .slogan{-webkit-line-clamp:3;line-height:20px}
 .saas-card .linha{margin-top:4px}
 .saas-card:active{transform:none}
 @media (hover:hover) and (pointer:fine){.saas-card:hover{border-color:var(--rv-border-strong);background:var(--rv-raised)}}
 .saas-card{transition:background-color var(--rv-dur-fast) var(--rv-ease-standard),border-color var(--rv-dur-fast) var(--rv-ease-standard)}
 .empty{max-width:520px;margin:0 auto;padding-top:72px}

 /* ---------- página do SaaS: ficha à esquerda, planos fixos à direita (desktop.js monta as colunas) ---------- */
 .corpo.d-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:40px;align-items:start}
 .d-ficha,.d-compra{min-width:0}
 .d-compra{position:sticky;top:0}
 .d-compra>.secao:first-child,.d-compra>.note:first-child{margin-top:0}
 .d-compra>.note+.secao{margin-top:16px}
 .d-compra>p.mini{display:flex;align-items:center;gap:8px;margin:12px 2px 0!important}
 .d-compra>p.mini svg.lucide{width:16px;height:16px}
 .saas-head h1{font:700 32px/36px var(--rv-font-display);letter-spacing:-.025em;text-wrap:balance}
 .fotos{margin:20px 0 0;padding:0;gap:12px}
 .fotos img{height:240px;max-width:78%}
 .desc{font-size:15px;line-height:24px;max-width:68ch}
 .back-link{margin-bottom:12px}
 @media (hover:hover) and (pointer:fine){.back-link:hover{color:var(--rv-text);background:var(--rv-surface)}}
 .plano-linha{padding:16px}
 button.plano-linha:active{background:transparent}

 /* ---------- Painel: gráfico grande à esquerda, seus SaaS à direita ---------- */
 .painel-bar{padding-bottom:16px}
 .painel-bar .mini-title{font-size:var(--rv-text-xl);line-height:28px;font-weight:650;letter-spacing:-.015em;color:var(--rv-text)}
 .split-scroll:has(> .grafico-card){display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,380px);column-gap:32px;row-gap:var(--d-ritmo);align-content:start;align-items:start;grid-auto-flow:row dense}
 .split-scroll:has(> .grafico-card)>*{grid-column:1/-1}
 .split-scroll:has(> .grafico-card)>.secao:has(+ .grafico-card),.split-scroll:has(> .grafico-card)>.grafico-card{grid-column:1}
 .split-scroll:has(> .grafico-card)>.secao:has(+ .saas-list),.split-scroll:has(> .grafico-card)>.saas-list{grid-column:2}
 .split-scroll:has(> .grafico-card)>*{margin-top:0!important;margin-bottom:0!important}
 .grafico-card{padding:18px}
 .meu-card{padding:14px 12px 14px 16px}
 @media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--rv-raised);border-color:var(--rv-border-strong)}.icon-btn.flat:hover{border-color:transparent}
  .meu-card .meio:hover .nome{text-decoration:underline;text-underline-offset:3px}}
 .meu-card .meio{border-radius:var(--rv-radius-md)}

 /* ---------- Assinaturas: cartões em duas colunas ---------- */
 .pilha-ass{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;align-items:start}
 .aviso-conta{max-width:760px}
 .card.ass:active{transform:none}

 /* ---------- camadas: painel centrado de largura média ---------- */
 .flow,.sub{align-items:center;pointer-events:auto}
 .flow::before,.sub::before{content:"";position:fixed;inset:0;background:var(--d-veu);animation:d-veu 180ms var(--rv-ease-standard) both}
 .sub.fechando::before{opacity:0;transition:opacity 160ms var(--rv-ease-exit)}
 /* cada camada nova escurece também a anterior (pedido do dono, 07/11): véu mais leve a partir da segunda */
 #flow:not([hidden]) ~ .sub::before,.sub ~ .sub::before{background:rgba(0,0,0,.38)}
 @keyframes d-veu{from{opacity:0}to{opacity:1}}
 /* véu preto atrás de toda camada e diálogo (camadas, conta, confirmação, doação, feedback) */
 :root{--d-veu:rgba(0,0,0,.55)}
 html[data-theme='light']{--d-veu:rgba(0,0,0,.40)}
 html dialog::backdrop,html dialog.confirm::backdrop,html dialog.doacao::backdrop,html .fb-dialog::backdrop{background:var(--d-veu)}
 html dialog.confirm::backdrop{animation:d-veu 180ms var(--rv-ease-standard) both}
 html dialog.confirm[open]{animation:d-surge 180ms var(--rv-ease-enter) both}
 .flow-frame{position:relative;max-width:680px;height:min(800px,calc(100dvh - 48px));border-radius:var(--rv-radius-lg);border:1px solid var(--rv-border);
  overflow:hidden;box-shadow:var(--rv-overlay-shadow)}
 .flow-frame:has(#an){max-width:920px}
 .flow-frame:has(.pe-lista){max-width:1040px}
 .flow-frame:has(.pe-lista) .pe-head .headline{font-size:36px;line-height:40px}
 .espera-lista,.aviso-conta{max-width:760px}
 .panel.co2-panel{padding:0}
 .flow-top{padding:12px 28px 0}
 .topline .icon-btn.flat{margin-left:-10px}
 .panel{padding:0 28px 20px}
 .panel-scroll{margin:0 -28px;padding:4px 28px 20px}
 .panel-foot{padding-top:16px}
 /* respiro: rótulo/campo/formulário logo abaixo de um cartão nunca encosta nele */
 .panel-scroll>.card+.form,.panel-scroll>.card+.field,.panel-scroll>.linha-card+.form,.panel-scroll>.card+form,.panel-scroll>.note+.form{margin-top:18px}
 .panel-scroll>.note+.card,.panel-scroll>.note+.linha-card{margin-top:12px}
 /* etapas do fluxo: troca com fade, sem deslizar */
 .flow-stage .panel{transform:none!important}
 .flow-stage .panel.sliding{transition:opacity 150ms var(--rv-ease-exit)}
 .flow-stage .panel:not(.leaving){animation:d-surge 180ms var(--rv-ease-enter) both}
 .flow-stage .panel.leaving{opacity:0;pointer-events:none}
 @keyframes d-surge{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
 .panel-foot .btn{min-height:48px}
 .co2-scroll,.co2-barra{padding-left:28px;padding-right:28px}
 .co2-resumo{padding-top:24px}
 .co2-barra{padding-bottom:20px}
 .centro{padding-bottom:24px}
 .topline .ttl{font-size:var(--rv-text-lg)}
 .analysis{border-radius:0}
 dialog.confirm{width:420px}

 /* conta Rande: diálogo centrado, mesmo papel da camada (conta.css usa !important, por isso o reforço) */
 html #rande-account:not([hidden]){display:flex;align-items:center;justify-content:center}
 html #rande-account::before{content:"";position:fixed;inset:0;background:var(--d-veu);animation:d-veu 180ms var(--rv-ease-standard) both}
 html #rande-account.rande-account-closing::before{opacity:0;transition:opacity 180ms var(--rv-ease-exit)}
 html #rande-account .account-shell{position:relative;width:560px!important;height:min(760px,calc(100dvh - 48px))!important;max-height:none!important;
  border:1px solid var(--rv-border)!important;border-radius:var(--rv-radius-lg)!important;box-shadow:var(--rv-overlay-shadow)!important}
 html[data-theme='light'] #rande-account .account-shell{border-color:var(--rid-line)!important}
 html #rande-account:not([hidden]) .account-shell{animation:d-entra 180ms var(--rv-ease-enter) both!important}
 html #rande-account.rande-account-closing .account-shell{animation:d-sai 150ms var(--rv-ease-exit) both!important}
 @media (hover:hover) and (pointer:fine){html #rande-account .account-option:hover{background:var(--rid-track)!important;border-radius:var(--rv-radius-sm)!important}html #rande-account .account-back:hover{background:var(--rid-track)!important}}
 @keyframes d-entra{from{opacity:0;transform:translate3d(0,8px,0) scale(.98)}to{opacity:1;transform:none}}
 @keyframes d-sai{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,8px,0) scale(.98)}}

 .toast{top:auto;bottom:24px}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.flow::before,.sub::before,html #rande-account::before,.flow-stage .panel:not(.leaving){animation:none}html #rande-account:not([hidden]) .account-shell,html #rande-account.rande-account-closing .account-shell{animation:none!important}}
/* Firefox não tem ::-webkit-scrollbar: usa o padrão fino com polegar neutro e trilho transparente. */
@supports not selector(::-webkit-scrollbar){@media (min-width:1024px){*,.view,.page-ghost,.split-scroll,.panel-scroll,.co2-scroll,.fotos,.fotos-edit,.tags-row,#rande-account .account-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rv-text) 22%,transparent) transparent}}}