/* Vida & Saúde | Painel do Fitoterapeuta | V228
   Microfit interno 1:1 - Início/Clientes/Agenda/Evolução/Atendimentos.
   Corrige assets visuais, posição de hero e sparklines sem alterar motores funcionais. */

/* Emblemas de hero: usar a versão realmente transparente, sem o quadrado claro do asset legado. */
body.professional-visual-v228 #professional-clients .v196-clients-hero-emblem,
body.professional-visual-v228 #professional-agenda .v197-agenda-hero-emblem{
  content:url('../img/emblema-fitoterapeuta-home.png')!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Clientes: remover do fundo botânico o botão rasterizado "Novo cliente" e deixar somente o botão real. */
body.professional-visual-v228 #professional-clients .v196-clients-hero::after{
  background:url('../img/hero-leaves-gold.png') right center/cover no-repeat!important;
  opacity:.93!important;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 70%,rgba(0,0,0,.78) 83%,transparent 100%)!important;
  mask-image:linear-gradient(to left,#000 0%,#000 70%,rgba(0,0,0,.78) 83%,transparent 100%)!important;
}

/* Sparklines: as referências usam linha contínua, não faixas diagonais repetidas. */
body.professional-visual-v228 #professional-clients .v196-spark,
body.professional-visual-v228 #professional-agenda .v197-spark,
body.professional-visual-v228 #professional-evolution .v198-spark,
body.professional-visual-v228 #professional-attendances .v199-spark{
  background:url('../img/spark-green-v228.svg') center/contain no-repeat!important;
  filter:none!important;
  opacity:1!important;
}
body.professional-visual-v228 #professional-clients .v196-spark::before,
body.professional-visual-v228 #professional-evolution .v198-spark::before{display:none!important;content:none!important}
body.professional-visual-v228 #professional-clients .v196-metric-card.is-alert .v196-spark,
body.professional-visual-v228 #professional-agenda .v197-metric-card.is-warm .v197-spark,
body.professional-visual-v228 #professional-evolution .v198-metric-card.is-alert .v198-spark,
body.professional-visual-v228 #professional-attendances .v199-metric-card.is-alert .v199-spark{
  background-image:url('../img/spark-red-v228.svg')!important;
}
body.professional-visual-v228 #professional-evolution .v198-metric-card.is-warning .v198-spark,
body.professional-visual-v228 #professional-attendances .v199-metric-card.is-warm .v199-spark{
  background-image:url('../img/spark-gold-v228.svg')!important;
}

@media (min-width:1440px) and (min-height:1000px){
  /* CLIENTES - referência: hero x=280 y=113 w=1145 h=134. */
  body.professional-visual-v228 #professional-clients{
    width:calc(100% - 2px)!important;
    margin-left:1px!important;
    margin-top:-3px!important;
    padding-top:1px!important;
  }
  body.professional-visual-v228 #professional-clients .v196-clients-hero{
    height:134px!important;min-height:134px!important;
    padding:14px 201px 14px 24px!important;
    grid-template-columns:150px minmax(0,1fr) 176px!important;
    gap:24px!important;
  }
  body.professional-visual-v228 #professional-clients .v196-clients-hero::after{
    width:340px!important;height:134px!important;
  }
  body.professional-visual-v228 #professional-clients .v196-clients-hero-emblem{
    width:110px!important;height:110px!important;
  }
  body.professional-visual-v228 #professional-clients .v196-gold-button{
    width:176px!important;min-width:176px!important;height:48px!important;
    justify-self:start!important;
  }
  body.professional-visual-v228 #professional-clients .v196-clients-metrics{margin-top:0!important}

  /* AGENDA - referência: hero x=278 y=114 w=1146 h=180. */
  body.professional-visual-v228 #professional-agenda{
    width:calc(100% - 1px)!important;
    margin-left:-1px!important;
    margin-top:-3px!important;
    padding-top:2px!important;
  }
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero{
    height:180px!important;min-height:180px!important;
  }
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero::after{height:180px!important}
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero-emblem{
    width:166px!important;height:150px!important;object-fit:contain!important;
  }

  /* EVOLUÇÃO - referência: hero y=110 e ações começam ~31px antes da versão anterior. */
  body.professional-visual-v228 #professional-evolution{margin-top:-5px!important}
  body.professional-visual-v228 #professional-evolution .v198-evolution-hero{
    padding-right:60px!important;
  }

  /* ATENDIMENTOS - referência: hero x=279 y=112 w=1139 h=221. */
  body.professional-visual-v228 #professional-attendances{
    width:calc(100% - 5px)!important;
    margin-left:0!important;
    margin-top:-1px!important;
  }
  body.professional-visual-v228 #professional-attendances .v199-attendance-hero{
    height:221px!important;min-height:221px!important;
  }
}

/* Notebook: assets corrigidos, sem aplicar coordenadas rígidas de 1448. */
@media (min-width:1024px) and (max-width:1439px){
  body.professional-visual-v228 #professional-clients,
  body.professional-visual-v228 #professional-agenda,
  body.professional-visual-v228 #professional-evolution,
  body.professional-visual-v228 #professional-attendances{
    margin-left:0!important;margin-top:0!important;width:100%!important;
  }
}

/* Mobile: emblema transparente, botânica limpa e sparkline contínua preservados. */
@media (max-width:720px){
  body.professional-visual-v228 #professional-clients .v196-clients-hero::after{
    background-image:url('../img/hero-leaves-gold.png')!important;
    background-size:cover!important;
    opacity:.28!important;
  }
  body.professional-visual-v228 #professional-clients .v196-clients-hero-emblem,
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero-emblem{
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* V228.1 | coordenadas finas medidas diretamente nas referências 1448x1086. */
body.professional-visual-v228 #professional-clients .v196-client-profile img[src*="emblema-fitoterapeuta.webp"]{
  content:url('../img/emblema-fitoterapeuta-home.png')!important;
  background:transparent!important;
}
@media (min-width:1440px) and (min-height:1000px){
  /* Clientes: x=280 / w=1145 e CTA x=1049 y=154 w=175 h=48. */
  body.professional-visual-v228 #professional-clients{
    width:calc(100% - 4px)!important;
    margin-left:2px!important;
  }
  body.professional-visual-v228 #professional-clients .v196-gold-button{
    width:175px!important;min-width:175px!important;
    position:relative!important;top:-5px!important;
  }

  /* Agenda: x=278 / w=1146; ações compactas como na imagem. */
  body.professional-visual-v228 #professional-agenda{
    width:calc(100% - 3px)!important;
    margin-left:0!important;
  }
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero-actions{
    width:143px!important;min-width:143px!important;
    gap:5px!important;
    position:relative!important;left:-6px!important;top:-12px!important;
  }
  body.professional-visual-v228 #professional-agenda .v197-gold-button,
  body.professional-visual-v228 #professional-agenda .v197-outline-button{
    width:143px!important;min-width:143px!important;
    height:33px!important;min-height:33px!important;
  }

  /* Evolução: x=276 / w=1139 / h=189; CTAs 158x47 na faixa inferior do hero. */
  body.professional-visual-v228 #professional-evolution{
    width:calc(100% - 10px)!important;
    margin-left:-2px!important;
  }
  body.professional-visual-v228 #professional-evolution .v198-evolution-hero{
    height:189px!important;min-height:189px!important;
  }
  body.professional-visual-v228 #professional-evolution .v198-hero-actions{
    grid-template-columns:158px 158px!important;
    width:326px!important;
    justify-content:start!important;
    position:relative!important;top:20px!important;
  }
  body.professional-visual-v228 #professional-evolution .v198-gold-button,
  body.professional-visual-v228 #professional-evolution .v198-outline-button{
    width:158px!important;height:47px!important;min-height:47px!important;
  }

  /* Atendimentos: x=279 y=112 w=1139 h=221. */
  body.professional-visual-v228 #professional-attendances{
    width:calc(100% - 10px)!important;
    margin-left:1px!important;
    margin-top:-3px!important;
  }
}
@media (min-width:1440px) and (min-height:1000px){
  body.professional-visual-v228 #professional-clients .v196-gold-button{left:2px!important}
  body.professional-visual-v228 #professional-agenda .v197-agenda-hero-actions{left:-5px!important;top:-16px!important}
  body.professional-visual-v228 #professional-evolution .v198-hero-actions{left:2px!important}
}