/*
 * painel-computador.css — layout novo da área logada no COMPUTADOR
 * (aprovado pelo dono em 30/09/2026). Tudo aqui está dentro de
 * @media (min-width:901px): no celular vale o painel-movel.css, sem mudança.
 * Par do painel-computador.js, que acrescenta ícones, busca e o painel da
 * direita sem apagar nada do painel.
 */
.pc-lado{display:none}
/* a busca do topo é só do computador: no celular o ícone ficava sem tamanho
   e virava um círculo preto enorme sobre o título (corrigido em 30/09/2026) */
.pc-busca{display:none}

@media (min-width:901px){
  body{background:#e7edf4}
  #painel.quadro{grid-template-columns:76px minmax(0,1fr); gap:20px; padding:20px 24px; max-width:1560px}
  body.pc-com-lado #painel.quadro{grid-template-columns:76px minmax(0,1fr) 340px}

  /* ── 1. trilha de ícones ── */
  #painel .menu{padding:16px 0; border-radius:28px; overflow:visible; max-height:calc(100vh - 40px)}
  #painel .menu nav{align-items:center; gap:6px; height:100%}
  #painel .pc-marca{width:44px; height:44px; border-radius:14px; background:#f97316; color:#10273e; font-weight:700; font-size:15px;
    display:flex; align-items:center; justify-content:center; text-decoration:none; margin-bottom:10px}
  #painel .menu button{position:relative; width:48px; height:48px; padding:0; justify-content:center; border-radius:16px; color:#536477}
  #painel .menu button .mark{display:none}
  #painel .menu button .pc-ic{display:flex}
  #painel .menu button .pc-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  #painel .menu button .pc-txt{position:absolute; left:58px; top:50%; transform:translateY(-50%); background:#10273e; color:#fff;
    font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; white-space:nowrap; z-index:40;
    clip-path:inset(50%); opacity:0; pointer-events:none; transition:opacity .12s}
  #painel .menu button:hover .pc-txt,#painel .menu button:focus-visible .pc-txt{clip-path:none; opacity:1}
  #painel .menu button:hover{background:#f3f6fa; color:#10273e}
  #painel .menu button[aria-current="page"]{background:#fff1e6; color:#b34700}
  #painel .menu button.sair{color:#b02525}
  #painel .menu .div{width:32px; margin:6px auto}
  #painel .menu nav{gap:4px}
  #painel .menu button{width:46px; height:46px}
  /* A trilha acompanha a rolagem (sticky, vindo do painel.html) e cabe na tela:
     em tela baixa os botões encolhem, em vez de a trilha subir com a página e
     deixar uma faixa vazia à esquerda (relatado pelo dono em 30/09/2026). */
  @media (max-height:860px){ #painel .menu{padding:12px 0} #painel .menu nav{gap:2px} #painel .menu button{height:40px}
    #painel .pc-marca{width:40px; height:40px; margin-bottom:6px} #painel .menu .div{margin:3px auto} }
  @media (max-height:740px){ #painel .menu button{height:34px} #painel .pc-marca{width:34px; height:34px; font-size:13px} }
  @media (max-height:640px){ #painel .menu{padding:8px 0} #painel .menu nav{gap:0} #painel .menu button{height:30px} #painel .menu button .pc-ic svg{width:20px; height:20px} }
  /* abaixo disso não cabe: a trilha volta a rolar com a página, para Sair nunca ficar fora de alcance */
  @media (max-height:560px){ #painel .menu{position:static; max-height:none} }

  /* `overflow-x:hidden` no html/body (painel.html) faz do body um container de
     rolagem próprio: isso desligava o sticky da trilha e pode prender a roda do
     mouse. `clip` corta a sobra lateral do mesmo jeito sem criar esse container. */
  html, body{overflow-x:clip}

  /* ── 2. cabeçalho com busca ── */
  #painel .area .cab{align-items:center; gap:16px}
  #painel .area .cab>div:first-child{flex:1 1 auto}
  .pc-busca{display:block; position:relative; flex:0 1 320px}
  .pc-busca-campo{display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:999px; background:#fff;
    border:1px solid #dfe6ec; color:#536477}
  .pc-busca-campo:focus-within{border-color:#f97316; box-shadow:0 0 0 3px #fff1e6}
  .pc-busca-campo svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
  .pc-busca-campo input{border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:#10273e; width:100%}
  .pc-busca-lista{position:absolute; top:50px; left:0; right:0; z-index:50; background:#fff; border:1px solid #dfe6ec; border-radius:16px;
    box-shadow:0 12px 30px rgba(16,39,62,.14); padding:6px; display:flex; flex-direction:column}
  .pc-busca-lista button{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; min-height:40px;
    padding:8px 12px; border:0; border-radius:10px; background:none; font:inherit; font-size:14px; color:#10273e; text-align:left; cursor:pointer}
  .pc-busca-lista button:hover,.pc-busca-lista button:focus-visible{background:#fff1e6; outline:0}
  .pc-busca-lista small{font-size:12px; color:#536477}
  .pc-busca-vazio{margin:8px 12px; font-size:13px; color:#536477}

  /* ── 2b. atualização, sino, Admin e avatar (refeito a pedido do dono, 30/09/2026) ──
     Os três botões com a mesma altura e o mesmo contorno fino, sem sombra;
     a data vira uma linha só, discreta. */
  #painel .perfil{gap:8px; align-items:center; margin-left:auto}
  #painel .atualiz{font-size:12px; font-weight:600; color:#536477; margin-right:6px}
  #painel .atualiz b{font-size:13px; font-weight:700; color:#10273e}
  #painel .sino,#painel .avatar{width:44px; height:44px; box-shadow:none}
  #painel .sino{border:1px solid #dfe6ec; background:#fff; color:#10273e}
  #painel .sino:hover{border-color:#f97316; background:#fff}
  #painel .sino .ic-svg{width:20px; height:20px}
  #painel .sino .bolinha{top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; font-size:10px; font-weight:800;
    background:#f97316; color:#10273e; border:2px solid #fff}
  #painel .botao-admin{height:44px; padding:0 16px 0 14px; gap:8px; border:1px solid #dfe6ec; box-shadow:none; background:#fff;
    color:#10273e; font-size:14px; font-weight:700}
  #painel .botao-admin [data-ic]{color:#f97316; display:flex}
  #painel .botao-admin .ic-svg{width:18px; height:18px}
  #painel .botao-admin:hover{border-color:#f97316; background:#fff4eb; color:#10273e}
  #painel .avatar{background:#10273e; color:#fff; font-size:15px; font-weight:700; box-shadow:0 0 0 3px #fff, 0 0 0 4px #dfe6ec}

  /* ── 3. Visão geral: os cartões do celular (Mix A) também no computador ── */
  #visao .pm-sol#pmInicio{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px}
  #visao>.grade{display:none}
  #visao .pm-sol#pmInicio{grid-auto-flow:row dense}
  #pmInicio .pm-mes{grid-column:1 / 3; grid-row:1; margin:0}
  #pmInicio .pm-custo{grid-column:3 / 5; grid-row:1; margin:0}
  /* sem dívida com juros não há cartão de custo: o mês ocupa a linha toda */
  #pmInicio .pm-mes:not(:has(~ .pm-custo)){grid-column:1 / -1}
  #pmInicio .pm-tiles{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0}
  #pmInicio .pm-prox{grid-column:1 / -1; margin:0}
  #pmInicio .cartao,#pmInicio .pm-tile{border-radius:20px}
  #pmInicio .pm-mini{font-size:13px; color:#536477}
  #pmInicio .pm-bloco{display:block; margin-top:2px}
  #pmInicio .pm-bom{color:#18754c!important}
  #pmInicio .pm-ruim{color:#b02525!important}
  #pmInicio .pm-link{background:none; border:0; padding:0; font:inherit; font-size:13px; color:#536477; text-decoration:underline; cursor:pointer}
  #pmInicio .pm-mes-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 10px}
  #pmInicio .pm-mes-topo .rot{margin:0}
  #pmInicio .pm-mes-sobra{font-size:26px; font-weight:700; letter-spacing:-.3px; line-height:1.2; margin:0 0 2px}
  #pmInicio .pm-mes-sub{margin:0 0 12px}
  #pmInicio .pm-barra-mes{position:relative; display:flex; height:14px; border-radius:9px; background:#e0e7ef}
  #pmInicio .pm-barra-mes>i{display:block; height:100%}
  #pmInicio .pm-barra-mes>i:first-child{border-radius:9px 0 0 9px}
  #pmInicio .pm-barra-mes>i:last-of-type{border-radius:0 9px 9px 0}
  #pmInicio .pm-barra-mes>i:only-of-type{border-radius:9px}
  #pmInicio .pm-renda-marca{position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; background:#b02525; border-radius:2px}
  #pmInicio .pm-legenda{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  #pmInicio .pm-legenda li{font-size:13px; color:#536477; display:flex; flex-direction:column; gap:2px; padding-left:14px; position:relative}
  #pmInicio .pm-legenda li>i{position:absolute; left:0; top:4px; width:9px; height:9px; border-radius:50%}
  #pmInicio .pm-legenda b{font-size:16px; color:#10273e}
  #pmInicio .pm-tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; background:#fff;
    border:1px solid #dfe6ec; padding:16px; font:inherit; color:#10273e; cursor:pointer; min-height:150px}
  #pmInicio .pm-tile:hover{border-color:#f97316}
  #pmInicio .pm-tile .rot{margin:0}
  #pmInicio .pm-tile-v{font-size:24px; letter-spacing:-.3px; color:#10273e; line-height:1.2}
  #pmInicio .pm-tile-v small{font-size:13px; font-weight:400; color:#536477}
  #pmInicio .pm-spark{display:block; width:100%; height:32px; margin-top:4px}
  #pmInicio .pm-gauge{display:block; width:100px; height:56px; margin:2px 0}
  #pmInicio .pm-prog{display:block; width:100%; height:8px; border-radius:999px; background:#e0e7ef; margin-top:6px; overflow:hidden}
  #pmInicio .pm-prog>i{display:block; height:100%; border-radius:999px; background:#18754c}
  #pmInicio .pm-prog-custo>i{background:#f97316}
  #pmInicio .pm-rank{margin:0 0 12px}
  #pmInicio .pm-rank-t{display:flex; justify-content:space-between; gap:10px; font-size:14px}
  #pmInicio .pm-btn-forte{display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; border-radius:14px;
    background:#f97316; color:#10273e; border:0; font-weight:700; margin-top:4px}
  #pmInicio .pm-prox{background:#fff4eb; border:1px solid #e56611; border-radius:20px; padding:18px 20px; display:grid;
    grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:20px}
  #pmInicio .pm-prox .rot{margin:0; grid-column:1}
  #pmInicio .pm-prox-tit{font-weight:700; font-size:17px; margin:4px 0; color:#10273e; grid-column:1}
  #pmInicio .pm-prox .pm-mini{grid-column:1; margin:0}
  #pmInicio .pm-prox .pm-btn-contorno{grid-column:2; grid-row:1 / 4; min-height:44px; padding:0 18px; border-radius:14px;
    background:#fff; color:#10273e; border:1px solid #b7c4d1; font-weight:700}
  #visao>#cardEvolucaoMini{border-radius:20px}

  /* ── 3b. demais telas no mesmo padrão da Visão geral ──
     Pedido do dono em 30/09/2026 ("replique para as demais telas"). Só
     aparência: título do cartão vira rótulo pequeno em maiúsculas (como
     "SEU MÊS"), texto em 14px cinza, cartões de canto 20px e botões iguais
     aos da Visão. Nenhum conteúdo, botão ou função muda. */
  #painel .tela:not(#visao) .cartao{border-radius:20px; padding:22px 24px}
  #painel .tela:not(#visao) .cartao.plano{border:1px solid #dfe6ec}
  #painel .tela:not(#visao) .cartao h2{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:#536477; line-height:1.5; margin:0 0 10px}
  #painel .tela:not(#visao) .cartao h3{font-size:15.5px; color:#10273e}
  /* h3 que abre o cartão é título dele ("Resumo", "Suas solicitações"): vira rótulo também.
     h3 depois de um rótulo ("Sua nota é 43 de 100") é a manchete e fica como está. */
  #painel .tela:not(#visao) .cartao>h3:first-child,
  #painel .tela:not(#visao) .cartao>div:first-child>h3:first-child{font-size:12px; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:#536477; line-height:1.5}
  #painel .tela:not(#visao) th{white-space:nowrap}
  /* Diagnóstico e Solicitações montam os cartões dentro de um .pm-desk: sem isto encostavam */
  #painel .col>.pm-desk{display:flex; flex-direction:column; gap:14px}
  #painel .tela:not(#visao) .desc{font-size:14px; line-height:1.6; color:#536477}
  #painel .tela:not(#visao) .desc.mini{font-size:13px}
  #painel .tela:not(#visao) td .desc{font-size:13px; line-height:1.45}
  #painel .tela:not(#visao) .rot{font-size:12px; letter-spacing:.08em; color:#536477}
  #painel .grade{gap:14px}
  #painel .btn{min-height:44px; padding:0 18px; border-radius:14px; font-weight:700}
  #painel .btn.btn-p{min-height:36px; padding:0 14px; border-radius:12px}
  #painel .btn-1{background:#f97316; color:#10273e; border-color:#f97316}
  #painel .btn-1:hover{background:#ea670c; border-color:#ea670c}
  #painel .btn-2{background:#fff; color:#10273e; border-color:#b7c4d1}
  #painel .btn-2:hover{border-color:#f97316}
  #painel .btn-3{background:#fff; border-color:#dfe6ec}

  /* ── 4. painel da direita ── */
  body.pc-com-lado .pc-lado{display:flex}
  .pc-lado{flex-direction:column; gap:16px; background:#10273e; color:#fff; border-radius:28px; padding:22px; align-self:start}
  .pc-quem{display:flex; align-items:center; gap:12px}
  .pc-quem b{display:block; font-size:15px}
  .pc-quem small{font-size:12px; color:#b9c6d4}
  .pc-av{width:44px; height:44px; flex:none; border-radius:999px; background:#f97316; color:#10273e; font-weight:700; display:flex; align-items:center; justify-content:center}
  .pc-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; text-align:center}
  .pc-stat{background:rgba(255,255,255,.08); border-radius:14px; padding:10px 4px}
  .pc-stat b{display:block; font-size:14px}
  .pc-stat small{font-size:11px; color:#b9c6d4}
  .pc-bloco{display:flex; flex-direction:column; gap:8px}
  .pc-bloco+.pc-bloco{margin-top:16px}
  .pc-bloco-topo{display:flex; justify-content:space-between; align-items:center; font-size:15px}
  .pc-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center; font-size:12px}
  .pc-dsem{color:#8fa1b5; padding:3px 0}
  .pc-dia{padding:5px 0; border-radius:999px; color:#fff}
  .pc-dia.pc-vence{background:#f97316; color:#10273e; font-weight:700}
  .pc-dia.pc-hoje{box-shadow:inset 0 0 0 1.5px #fff}
  .pc-legenda{margin:0; font-size:11px; color:#b9c6d4; display:flex; align-items:center; gap:6px}
  .pc-legenda i{width:8px; height:8px; border-radius:999px; background:#f97316; display:inline-block}
  .pc-venc-item{display:flex; align-items:center; gap:10px; width:100%; background:rgba(255,255,255,.08); border:0; border-radius:14px;
    padding:9px 12px; color:#fff; font:inherit; text-align:left; cursor:pointer}
  .pc-venc-item:hover{background:rgba(255,255,255,.14)}
  .pc-venc-dia{width:34px; height:34px; flex:none; border-radius:10px; background:rgba(255,255,255,.14); font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center}
  .pc-venc-dia.pc-perto{background:#f97316; color:#10273e}
  .pc-venc-txt{flex:1 1 auto; min-width:0}
  .pc-venc-txt b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pc-venc-txt small{font-size:11px; color:#b9c6d4}
  .pc-vazio{margin:0; font-size:13px; line-height:1.45; color:#d5dee8}
  .pc-link{align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:13px; color:#ffb27a; text-decoration:underline; cursor:pointer}
  /* os cartões que vieram da Visão geral: mesmo conteúdo, fundo claro dentro do painel escuro */
  #pcCartoes{display:flex; flex-direction:column; gap:12px}
  #pcCartoes .cartao{margin:0; border-radius:18px; color:#10273e}
  #pcCartoes #cardJornadaVisao .passos{flex-wrap:wrap; row-gap:12px}
}