/* Aplicativo do cliente no padrão CD Pro UI v2.
   Carregada depois de app.css: troca as variáveis antigas pelos tokens de cdpro-ui.css e unifica os componentes.
   A estrutura das telas continua em app.css. Não usar cores soltas aqui: só tokens. */
body[data-cdpro-ui]{
 --navy:var(--cd-navy);--gold:var(--cd-yellow);--ink:var(--cd-text);--muted:var(--cd-muted);--menu-muted:var(--cd-muted);
 --line:var(--cd-border);--paper:var(--cd-white);--bg:var(--cd-canvas);--green:var(--cd-whatsapp);--display:var(--cd-font-heading);
 font-family:var(--cd-font-body);background:var(--cd-canvas);color:var(--cd-text)}
body[data-cdpro-ui] :is(h1,h2,h3){font-family:var(--cd-font-heading);font-weight:800;letter-spacing:-.03em;color:var(--cd-navy)}
body[data-cdpro-ui] .icon{stroke-width:1.8}

/* topo e navegação */
body[data-cdpro-ui] .app-header{background:#FFFFFFF2;border-bottom:1px solid var(--cd-border)}
body[data-cdpro-ui] .app-header .preview-label{padding:4px 10px;border-radius:var(--cd-radius-pill);background:var(--cd-warning-soft);color:var(--cd-warning);font-weight:800;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
body[data-cdpro-ui] .account-button img{border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--cd-yellow)}
body[data-cdpro-ui] .app-nav a{font-weight:700;color:var(--cd-muted)}
body[data-cdpro-ui] .app-nav a[aria-current=page]{background:var(--cd-navy);color:#fff;box-shadow:inset 3px 0 var(--cd-yellow);border-radius:var(--cd-radius-control)}
body[data-cdpro-ui] .app-nav a[aria-current=page] .icon{color:var(--cd-yellow)}
@media (max-width:760px){
 body[data-cdpro-ui] .app-nav{background:#FFFFFFF5;border-top:1px solid var(--cd-border)}
 body[data-cdpro-ui] .app-nav a{font-size:.8125rem;border-radius:0;position:relative}
 body[data-cdpro-ui] .app-nav a[aria-current=page]{background:transparent;color:var(--cd-navy);box-shadow:none}
 body[data-cdpro-ui] .app-nav a[aria-current=page]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--cd-yellow)}
 body[data-cdpro-ui] .app-nav a[aria-current=page] .icon{color:var(--cd-navy)}
}

/* títulos de página */
body[data-cdpro-ui] .page-heading h1,body[data-cdpro-ui] .back-heading h1{font-size:clamp(1.5rem,4vw,1.875rem)}
body[data-cdpro-ui] .back-heading button,body[data-cdpro-ui] .icon-button{border-radius:var(--cd-radius-control)}
body[data-cdpro-ui] .back-heading button{background:var(--cd-white);border:1px solid var(--cd-border);color:var(--cd-navy)}
body[data-cdpro-ui] .text-link{font-weight:800;color:var(--cd-blue)}
body[data-cdpro-ui] :is(.section-label,.edit-group>h2){font-weight:800;font-size:var(--cd-text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--cd-muted)}
body[data-cdpro-ui] .section-label{margin-bottom:12px}

/* botões */
body[data-cdpro-ui] .button{border-radius:var(--cd-radius-control);font-weight:800;min-height:var(--cd-touch);transition:transform var(--cd-motion),box-shadow var(--cd-motion),background var(--cd-motion)}
body[data-cdpro-ui] .button.primary{background:linear-gradient(var(--cd-yellow-light),var(--cd-yellow) 80%);color:#172B43;border:0;box-shadow:inset 0 2px 0 #FFF7D7,0 4px 0 var(--cd-yellow-edge)}
body[data-cdpro-ui] .button.primary:not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 2px 0 #FFF7D7,0 1px 0 var(--cd-yellow-edge)}
body[data-cdpro-ui] .button.blue{background:var(--cd-navy);color:#fff;box-shadow:0 4px 0 var(--cd-navy-deep)}
body[data-cdpro-ui] .button.secondary{background:var(--cd-white);border:2px solid var(--cd-border);color:var(--cd-navy)}
body[data-cdpro-ui] .button.green{background:var(--cd-whatsapp);color:#fff;box-shadow:0 4px 0 var(--cd-whatsapp-edge)}
body[data-cdpro-ui] :is(.button.blue,.button.green):not(:disabled):active{transform:translateY(3px);box-shadow:none}
body[data-cdpro-ui] .button.primary:disabled{background:var(--cd-yellow-soft);color:#8C7A4A;box-shadow:none;opacity:1}

/* início: identidade, link e compartilhar */
body[data-cdpro-ui] .identity-card{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .identity-person img{border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--cd-yellow)}
body[data-cdpro-ui] .identity-person h2{font-size:1.125rem}
body[data-cdpro-ui] .identity-person p{color:var(--cd-muted);font-weight:600}
body[data-cdpro-ui] .identity-card .card-link{background:var(--cd-surface-soft);border-top:1px solid var(--cd-border)}
body[data-cdpro-ui] .identity-card .card-link small{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem}
body[data-cdpro-ui] .identity-card .card-link strong{font-weight:700;color:var(--cd-navy)}
body[data-cdpro-ui] .identity-card .card-link .icon-button{border:1px solid var(--cd-border);border-radius:12px}
body[data-cdpro-ui] .share-action{border:0;border-radius:var(--cd-radius-card);min-height:64px;box-shadow:inset 0 2px 0 #FFF7D7,0 4px 0 var(--cd-yellow-edge)}
body[data-cdpro-ui] .share-action:hover{background:linear-gradient(var(--cd-yellow-light),var(--cd-yellow) 80%);box-shadow:inset 0 2px 0 #FFF7D7,0 4px 0 var(--cd-yellow-edge)}
body[data-cdpro-ui] .share-action-icon{background:#FFFFFF66;border:0;border-radius:12px}

/* atalhos e blocos de edição: um só estilo, ícone em caixa azul com traço dourado */
body[data-cdpro-ui] .shortcut{--action:var(--cd-navy);--action-line:var(--cd-border);border:1px solid var(--cd-border);border-left:1px solid var(--cd-border);border-radius:var(--cd-radius-card);background:var(--cd-white);box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .shortcut:hover{border-color:var(--cd-border-strong);box-shadow:0 10px 24px #112D4E14;transform:none}
body[data-cdpro-ui] .shortcut-icon,body[data-cdpro-ui] .edit-tile-art:not(.has-photos),body[data-cdpro-ui] :is(.visual-symbol,.help-intro>span){background:var(--cd-navy);color:var(--cd-yellow);box-shadow:none;border-radius:14px}
body[data-cdpro-ui] .shortcut-top>.icon,body[data-cdpro-ui] .edit-tile-arrow{color:var(--cd-subtle);opacity:1}
body[data-cdpro-ui] .shortcut strong,body[data-cdpro-ui] .edit-tile-copy strong{font-weight:800;color:var(--cd-navy);letter-spacing:-.02em}
body[data-cdpro-ui] .shortcut small,body[data-cdpro-ui] .edit-tile-copy small{color:var(--cd-muted);font-weight:500}
body[data-cdpro-ui] .edit-tile{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .edit-tile:hover{border-color:var(--cd-border-strong)}
body[data-cdpro-ui] .edit-tile-art.has-photos{background:none}
body[data-cdpro-ui] .edit-tile-art>img{border-radius:14px}
body[data-cdpro-ui] .edit-art-mark{background:var(--cd-navy);color:var(--cd-yellow)}

/* painéis, seções que abrem e listas */
body[data-cdpro-ui] .panel{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .visual-fold{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .visual-fold[open]>summary{background:var(--cd-surface-tint);border-bottom:1px solid var(--cd-border)}
body[data-cdpro-ui] .visual-fold-copy strong{font-weight:800;color:var(--cd-navy)}
body[data-cdpro-ui] .visual-section-head h2{font-size:1.125rem}
body[data-cdpro-ui] .list,body[data-cdpro-ui] .faq-list{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);background:var(--cd-white);box-shadow:var(--cd-shadow-card);overflow:hidden}
body[data-cdpro-ui] .list-row strong,body[data-cdpro-ui] .faq-list summary{font-weight:800;color:var(--cd-navy)}
body[data-cdpro-ui] .list-row>.icon:first-child{box-sizing:content-box;padding:10px;background:var(--cd-surface-tint);border-radius:12px;color:var(--cd-navy)}
body[data-cdpro-ui] .edit-group .list-row{border:1px solid var(--cd-border);border-radius:var(--cd-radius-card)}

/* campos */
body[data-cdpro-ui] .app-field>span{font-weight:700;color:var(--cd-navy)}
body[data-cdpro-ui] :is(.app-field input:not([type=color]),.app-field select,.app-field textarea,.copy-field){border:2px solid var(--cd-border);border-radius:var(--cd-radius-control);min-height:52px;padding:12px 16px;font-weight:600;color:var(--cd-text)}
body[data-cdpro-ui] :is(.app-field input,.app-field select,.app-field textarea):focus{outline:0;border-color:var(--cd-navy)!important;box-shadow:0 0 0 4px #112D4E14}
body[data-cdpro-ui] .app-field small,body[data-cdpro-ui] .help-text{color:var(--cd-muted);font-weight:500}
body[data-cdpro-ui] .form-error{border-radius:var(--cd-radius-control);font-weight:700}
body[data-cdpro-ui] .switch-row{font-weight:700;color:var(--cd-navy)}

/* Pix */
body[data-cdpro-ui] .pix-type-grid button{border:2px solid var(--cd-border);border-radius:16px}
body[data-cdpro-ui] .pix-type-grid button>.icon{color:var(--cd-navy)}
body[data-cdpro-ui] .pix-type-grid button[aria-pressed=true]{border:2px solid var(--cd-navy);background:var(--cd-surface-tint);padding:12px}

/* plano, ajuda e equipe */
body[data-cdpro-ui] .membership-label--pro,body[data-cdpro-ui] .plan-label{background:var(--cd-yellow);color:var(--cd-navy);border-radius:var(--cd-radius-pill)}
body[data-cdpro-ui] .team-access{border:1px solid var(--cd-border);border-left:1px solid var(--cd-border);border-radius:var(--cd-radius-control);font-weight:700;box-shadow:var(--cd-shadow-card)}
body[data-cdpro-ui] .team-access:hover{background:var(--cd-surface-soft);border-color:var(--cd-border-strong)}
body[data-cdpro-ui] .support-box{background:var(--cd-navy);border:0;border-radius:var(--cd-radius-panel)}
body[data-cdpro-ui] .support-box h2{color:#fff}
body[data-cdpro-ui] .support-box p{color:var(--cd-on-navy-muted)}
body[data-cdpro-ui] .support-box .button{background:linear-gradient(var(--cd-yellow-light),var(--cd-yellow) 80%);color:#172B43;box-shadow:inset 0 2px 0 #FFF7D7,0 4px 0 var(--cd-yellow-edge)}
body[data-cdpro-ui] .demo-note{color:var(--cd-subtle);font-weight:500}

/* barra de salvar e aviso rápido */
body[data-cdpro-ui] .save-bar{background:var(--cd-white);border-top:0;box-shadow:var(--cd-shadow-bar)}
body[data-cdpro-ui] .save-bar>span{font-weight:700;color:var(--cd-muted)}
body[data-cdpro-ui] .app-toast{border-radius:14px;font-weight:700;background:var(--cd-navy)}

/* janelas */
body[data-cdpro-ui] #appDialog{border:1px solid var(--cd-border);border-radius:var(--cd-radius-panel);box-shadow:var(--cd-shadow-float);padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){
 body[data-cdpro-ui] #appDialog{margin:auto 0 0;width:100%;max-width:none;max-height:92dvh;border-radius:26px 26px 0 0;border-bottom:0}
}

/* Cores por assunto nos menus do app (pedido do Vitor em 28/09): cada assunto tem sempre a mesma cor, no início e em Editar meu cartão */
body[data-cdpro-ui] :is(.shortcut,.edit-tile){--topic:var(--cd-topic-perfil)}
body[data-cdpro-ui] :is(.shortcut,.edit-tile):is([data-go=editar],[data-go=perfil]){--topic:var(--cd-topic-perfil)}
body[data-cdpro-ui] .edit-tile[data-go=aparencia]{--topic:var(--cd-topic-visual)}
body[data-cdpro-ui] .edit-tile[data-go=servicos]{--topic:var(--cd-topic-servicos)}
body[data-cdpro-ui] :is(.shortcut,.edit-tile)[data-go=fotos]{--topic:var(--cd-topic-fotos)}
body[data-cdpro-ui] .edit-tile[data-go=videos]{--topic:var(--cd-topic-videos)}
body[data-cdpro-ui] .edit-tile[data-go=contatos]{--topic:var(--cd-topic-contato)}
body[data-cdpro-ui] .edit-tile[data-go=redes]{--topic:var(--cd-topic-redes)}
body[data-cdpro-ui] :is(.shortcut,.edit-tile):is([data-go=pix],[data-go=pix-editar]){--topic:var(--cd-topic-pix)}
body[data-cdpro-ui] .shortcut[data-go=avaliacoes]{--topic:var(--cd-topic-avaliacoes)}
body[data-cdpro-ui] :is(.shortcut-icon,.edit-tile-art:not(.has-photos)){background:var(--topic);color:#fff;box-shadow:inset 0 -2px 0 #0000001F}
body[data-cdpro-ui] .edit-tile-art.has-photos>span{background:var(--topic);color:#fff}
/* Títulos internos seguem a cor do assunto da tela */
body[data-cdpro-ui] .visual-symbol{--topic:var(--cd-topic-perfil);background:var(--topic);color:#fff;box-shadow:inset 0 -2px 0 #0000001F}
body[data-cdpro-ui] .visual-symbol--purple{--topic:var(--cd-topic-visual)}
body[data-cdpro-ui] .visual-symbol--amber{--topic:var(--cd-topic-servicos)}
body[data-cdpro-ui] .visual-symbol--green{--topic:var(--cd-topic-contato)}
body[data-cdpro-ui] .visual-symbol--teal{--topic:var(--cd-topic-pix)}