/* Vida & Saúde | Painel do Fitoterapeuta | V212
   Homologação global das 13 áreas: geometria estável, remoção de resíduos visuais e proteção 1:1 a 100%.
   Não usa zoom nem transform:scale para fazer a interface caber. */

body.professional-homologation-v212{
  --vs210-page:#fbf8f2;
  --vs210-ink:#143f3c;
  --vs210-line:#e5dac8;
  --vs210-gold:#bd8c35;
  --vs210-green:#0b4a3d;
  background:var(--vs210-page)!important;
}

/* A rota profissional ocupa o viewport sem herdar recuos/escala de versões antigas. */
body.professional-homologation-v212 #route-professional-panel,
body.professional-homologation-v212 #route-professional-panel .professional-shell,
body.professional-homologation-v212 #route-professional-panel .professional-main{
  max-width:none!important;
  transform:none!important;
  animation:none!important;
}

body.professional-homologation-v212 #route-professional-panel{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  background:var(--vs210-page)!important;
  overflow:hidden!important;
}

body.professional-homologation-v212 #route-professional-panel .professional-shell{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  isolation:isolate!important;
}

body.professional-homologation-v212 #route-professional-panel .professional-main{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:auto!important;
}

/* Trocar de área não pode provocar efeito de zoom, salto ou animação do container. */
body.professional-homologation-v212 #route-professional-panel .professional-section,
body.professional-homologation-v212 #route-professional-panel .system-client-section{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  box-sizing:border-box!important;
}
body.professional-homologation-v212 #route-professional-panel .professional-section[hidden],
body.professional-homologation-v212 #route-professional-panel .system-client-section[hidden]{display:none!important}

/* Evita que grids, tabelas e painéis empurrem o shell além da largura disponível. */
body.professional-homologation-v212 #route-professional-panel .professional-section > *,
body.professional-homologation-v212 #route-professional-panel .professional-panel,
body.professional-homologation-v212 #route-professional-panel [class*="workspace"],
body.professional-homologation-v212 #route-professional-panel [class*="layout"],
body.professional-homologation-v212 #route-professional-panel [class*="grid"]{
  min-width:0;
  box-sizing:border-box;
}

body.professional-homologation-v212 #route-professional-panel img,
body.professional-homologation-v212 #route-professional-panel svg{max-width:100%}

/* Tabelas continuam utilizáveis em larguras menores sem criar rolagem horizontal no shell inteiro. */
body.professional-homologation-v212 #route-professional-panel [class*="table-wrap"],
body.professional-homologation-v212 #route-professional-panel [class*="table-shell"],
body.professional-homologation-v212 #route-professional-panel .system-table-wrap{
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
}

/* Modais reais ficam dentro do viewport e mantêm rolagem interna. */
body.professional-homologation-v212 #route-professional-panel dialog{
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100vh - 28px)!important;
}
body.professional-homologation-v212 #route-professional-panel dialog > *,
body.professional-homologation-v212 #route-professional-panel [class*="dialog-body"]{
  min-width:0!important;
}

/* O shell não muda de geometria quando uma área ganha/perde conteúdo vertical. */
@media (min-width:1024px){
  body.professional-homologation-v212 #route-professional-panel,
  body.professional-homologation-v212 #route-professional-panel .professional-shell{
    height:100vh!important;
    min-height:100vh!important;
  }
  body.professional-homologation-v212 #route-professional-panel .professional-sidebar,
  body.professional-homologation-v212 #route-professional-panel .professional-mobile-bar{
    flex-shrink:0!important;
    transform:none!important;
  }
}

/* 1448x1086: faixa principal das referências aprovadas. */
@media (min-width:1440px) and (max-width:1600px){
  body.professional-homologation-v212 #route-professional-panel .professional-main{
    max-width:none!important;
  }
}

/* 1366x768: composição própria, sem compressão/escala. */
@media (min-width:1366px) and (max-width:1439px){
  body.professional-homologation-v212 #route-professional-panel .professional-section{
    min-width:0!important;
  }
}

/* 1280x720: proteção contra cortes na borda direita e no rodapé da sidebar. */
@media (min-width:1280px) and (max-width:1365px){
  body.professional-homologation-v212 #route-professional-panel .professional-main{
    min-width:0!important;
    overflow-x:hidden!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.professional-homologation-v212 #route-professional-panel .professional-section,
  body.professional-homologation-v212 #route-professional-panel .professional-main,
  body.professional-homologation-v212 #route-professional-panel .professional-shell{
    scroll-behavior:auto!important;
  }
}


/* V212 | A referência usa fundo creme limpo. Remove a textura de grade herdada do bundle antigo
   apenas enquanto a rota profissional estiver ativa. */
body.professional-homologation-v212[data-professional-route-visible="true"]::before{
  display:none!important;
}

/* O menu, cabeçalho e área central não podem ganhar scale/zoom/translação herdada ao trocar de módulo. */
body.professional-homologation-v212 #route-professional-panel :is(.professional-sidebar,.professional-mobile-bar,.professional-main,.professional-section){
}

/* Evita pequenas mudanças de largura causadas por conteúdo longo sem redesenhar os cards. */
body.professional-homologation-v212 #route-professional-panel :is(h1,h2,h3,h4,p,span,strong,small,td,th,dd){
  min-width:0;
}
body.professional-homologation-v212 #route-professional-panel :is(td,th,.professional-panel,[class*="card"],[class*="item"]){
  overflow-wrap:break-word;
}

/* Imagens de avatar/emblema nunca deformam ao receber dados reais. */
body.professional-homologation-v212 #route-professional-panel :is(img[class*="avatar"],img[class*="photo"],img[class*="emblem"],img[class*="emblema"]){
  object-fit:cover;
}
body.professional-homologation-v212 #route-professional-panel :is(img[class*="emblem"],img[class*="emblema"]){
  object-fit:contain;
}

/* Foco consistente com o acabamento verde/dourado das imagens, sem alterar dimensões. */
body.professional-homologation-v212 #route-professional-panel :is(button,a[href],input,select,textarea,[role="button"]):focus-visible{
  outline:2px solid rgba(189,140,53,.48)!important;
  outline-offset:2px!important;
}

/* Nenhuma animação de entrada pode alterar a geometria do shell. Microinterações dos próprios
   botões/cards continuam permitidas. */
body.professional-homologation-v212 #route-professional-panel :is(.professional-shell,.professional-main,.professional-mobile-bar,.professional-sidebar){
  transition-property:none!important;
}

/* Em telas desktop homologadas, qualquer overflow deve ficar no componente que precisa dele,
   nunca no viewport inteiro. */
@media (min-width:1024px){
  body.professional-homologation-v212,
  body.professional-homologation-v212 #app,
  body.professional-homologation-v212 #route-professional-panel{
    overflow-x:hidden!important;
  }
}


/* V212 | Geometria alvo do shell nas resoluções homologadas. */
@media (min-width:1440px){
  body.professional-homologation-v212 .professional-sidebar{width:240px!important;min-width:240px!important}
  body.professional-homologation-v212 .professional-mobile-bar{height:108px!important;min-height:108px!important}
}
@media (min-width:1366px) and (max-width:1439px){
  body.professional-homologation-v212 .professional-sidebar{width:228px!important;min-width:228px!important}
  body.professional-homologation-v212 .professional-mobile-bar{height:96px!important;min-height:96px!important}
}
@media (min-width:1280px) and (max-width:1365px){
  body.professional-homologation-v212 .professional-sidebar{width:220px!important;min-width:220px!important}
  body.professional-homologation-v212 .professional-mobile-bar{height:94px!important;min-height:94px!important}
}
/* O menu pode rolar em notebook baixo, mas a barra continua invisível pela regra global. */
@media (min-width:1024px){
  body.professional-homologation-v212 .professional-sidebar .professional-nav{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important}
}


/* V212 | Acabamento global final da identidade Vida & Saúde.
   Atua apenas em elementos compartilhados/legados ainda usados pelos motores funcionais.
   As estruturas próprias de cada uma das 13 áreas continuam soberanas. */
body.professional-homologation-v212{
  --vs210-page:#fbf8f2;
  --vs210-surface:#fffdf9;
  --vs210-surface-soft:#f8f3e9;
  --vs210-ink:#173f37;
  --vs210-muted:#68736e;
  --vs210-green:#0a4a3d;
  --vs210-green-deep:#06372f;
  --vs210-gold:#bd8c35;
  --vs210-gold-soft:#dfbd74;
  --vs210-line:#e5dac8;
  --vs210-danger:#b4463c;
  --vs210-success:#3f7547;
}

/* Superfícies residuais de módulos funcionais antigos passam a usar a mesma linguagem visual. */
body.professional-homologation-v212 #route-professional-panel :is(
  .professional-panel,
  .system-panel,
  .system-card,
  [class*="dialog-shell"],
  [class*="modal-shell"],
  [class*="drawer-shell"]
){
  border-color:var(--vs210-line)!important;
}

/* Modais e diálogos ainda renderizados pelos motores V165-V172. */
body.professional-homologation-v212 #route-professional-panel dialog{
  padding:0!important;
  border:1px solid rgba(189,140,53,.34)!important;
  border-radius:17px!important;
  background:var(--vs210-surface)!important;
  color:var(--vs210-ink)!important;
  box-shadow:0 28px 72px rgba(24,51,43,.24)!important;
  overflow:hidden!important;
}
body.professional-homologation-v212 #route-professional-panel dialog::backdrop{
  background:rgba(8,36,30,.46)!important;
  backdrop-filter:blur(3px)!important;
}
body.professional-homologation-v212 #route-professional-panel dialog :is(
  [class*="dialog-head"],
  [class*="dialog-header"],
  header:first-child
){
  border-bottom-color:#ece1d0!important;
}
body.professional-homologation-v212 #route-professional-panel dialog :is(h2,h3){
  color:#21483e!important;
}
body.professional-homologation-v212 #route-professional-panel dialog :is(p,small,label){
  color:#69746f;
}

/* Campos residuais: remove o antigo verde/eucalipto e preserva as dimensões de cada módulo. */
body.professional-homologation-v212 #route-professional-panel :is(dialog,[class*="modal"],[class*="drawer"]) :is(input,select,textarea),
body.professional-homologation-v212 #route-professional-panel .professional-section :is(.field,.form-field) :is(input,select,textarea){
  border-color:#ded4c5!important;
  background:#fffdf9!important;
  color:#294b42!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.professional-homologation-v212 #route-professional-panel :is(dialog,[class*="modal"],[class*="drawer"]) :is(input,select,textarea):focus,
body.professional-homologation-v212 #route-professional-panel .professional-section :is(.field,.form-field) :is(input,select,textarea):focus{
  border-color:#c59238!important;
  box-shadow:0 0 0 3px rgba(191,145,53,.11)!important;
  outline:none!important;
}

/* Botões legados dentro de overlays ficam iguais aos botões exclusivos das referências. */
body.professional-homologation-v212 #route-professional-panel :is(dialog,[class*="modal"],[class*="drawer"]) .btn{
  border-radius:10px!important;
  min-height:38px!important;
  padding-inline:14px!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
body.professional-homologation-v212 #route-professional-panel :is(dialog,[class*="modal"],[class*="drawer"]) :is(.btn-primary,[data-tone="primary"]){
  color:#fffaf0!important;
  border-color:#b9862e!important;
  background:linear-gradient(180deg,#d8ad5b 0%,#b98227 100%)!important;
  box-shadow:0 8px 16px rgba(152,104,28,.17),inset 0 1px rgba(255,255,255,.32)!important;
}
body.professional-homologation-v212 #route-professional-panel :is(dialog,[class*="modal"],[class*="drawer"]) :is(.btn-ghost,.btn-secondary){
  color:#39594e!important;
  border-color:#d9d0bf!important;
  background:#fffdf9!important;
  box-shadow:0 4px 10px rgba(65,51,30,.04)!important;
}

/* Status compartilhados. Não muda texto nem regra de negócio, apenas acabamento. */
body.professional-homologation-v212 #route-professional-panel :is(.status,.system-status,[class*="status-pill"],[class*="status-chip"]){
  border-radius:999px!important;
  box-shadow:none!important;
}
body.professional-homologation-v212 #route-professional-panel :is(.status,.system-status,[class*="status-pill"],[class*="status-chip"])[data-tone="positive"]{
  color:#397044!important;background:#eef4e8!important;border-color:#dbe7d2!important;
}
body.professional-homologation-v212 #route-professional-panel :is(.status,.system-status,[class*="status-pill"],[class*="status-chip"])[data-tone="warning"]{
  color:#946624!important;background:#fff5e3!important;border-color:#ecd4a7!important;
}
body.professional-homologation-v212 #route-professional-panel :is(.status,.system-status,[class*="status-pill"],[class*="status-chip"])[data-tone="danger"]{
  color:#9b4040!important;background:#fbeaea!important;border-color:#f0cccc!important;
}

/* Tabelas antigas que ainda aparecem em diálogos e estados secundários. */
body.professional-homologation-v212 #route-professional-panel .professional-section table{
  border-color:#e9dfd1;
}
body.professional-homologation-v212 #route-professional-panel .professional-section thead th{
  color:#59675f;
}
body.professional-homologation-v212 #route-professional-panel .professional-section tbody tr{
  border-color:#eee5d9;
}

/* Evita que uma imagem real com dimensões fora do padrão altere cards/tabelas. */
body.professional-homologation-v212 #route-professional-panel :is(
  [class*="avatar"],
  [class*="client-photo"],
  [class*="profile-photo"]
) img,
body.professional-homologation-v212 #route-professional-panel img:is([class*="avatar"],[class*="client-photo"],[class*="profile-photo"]){
  aspect-ratio:1/1;
  object-fit:cover!important;
}

/* Microinterações premium, sem deslocar a geometria da tela. */
@media (hover:hover) and (pointer:fine){
  body.professional-homologation-v212 #route-professional-panel .professional-section :is(.btn,button,[role="button"]):not(:disabled):hover{
    will-change:box-shadow,background-color,border-color;
  }
}

/* Notebook baixo: overlays não podem esconder as ações finais. */
@media (min-width:1024px) and (max-height:800px){
  body.professional-homologation-v212 #route-professional-panel dialog{
    max-height:calc(100vh - 18px)!important;
  }
  body.professional-homologation-v212 #route-professional-panel dialog :is([class*="dialog-body"],[class*="modal-body"]){
    overflow-y:auto!important;
    min-height:0!important;
  }
}


/* V212 | Nenhuma correção de resolução usa zoom/scale. A geometria é resolvida por grid, largura e breakpoints. */
body.professional-homologation-v212 #route-professional-panel :is(.professional-shell,.professional-sidebar,.professional-mobile-bar,.professional-main,.professional-section){
  transform:none!important;
}
/* O estado ativo do menu é sempre derivado da área realmente aberta. */
body.professional-homologation-v212 .professional-nav-item[aria-current="page"]{
  isolation:isolate;
}
/* Evita layout shift causado por imagens reais carregadas depois do texto. */
body.professional-homologation-v212 #route-professional-panel :is(.professional-header-avatar,[class*="client-avatar"],[class*="record-avatar"],[class*="tele-avatar"]){
  flex-shrink:0;
  aspect-ratio:1/1;
}
