/* APN SaaS V38 — correções finais da experiência do paciente. */

/* No tema claro, o cabeçalho de cada substituição usa a identidade da plataforma
   com contraste branco, tanto no app quanto em "Visualizar como paciente". */
html[data-theme="light"] body:has(main.portal) .meal li .substitution-heading{
  background:var(--brand-gradient,linear-gradient(135deg,#7c3aed,#5420a3))!important;
  background-color:var(--brand-primary,#7c3aed)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:color-mix(in srgb,var(--brand-primary,#7c3aed) 72%,#fff)!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--brand-primary,#7c3aed) 22%,transparent)!important;
}
html[data-theme="light"] body:has(main.portal) .meal li .substitution-heading *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Horários não fornecidos por importações externas aparecem como "Livre". */
body:has(main.portal) .meal-toggle .time{
  overflow-wrap:anywhere;
  text-align:center;
}

/* O cartão recolhido já possui sua própria borda arredondada. O contêiner
   externo não deve desenhar um segundo retângulo por trás dele. */
body:has(main.portal) .timeline .meal{
  overflow:visible!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
}
body:has(main.portal) .timeline .meal-toggle{
  overflow:hidden!important;
  border-radius:18px!important;
}

/* O controle de tema deve ser compacto no cabeçalho do paciente móvel. */
@media(max-width:760px){
  body:has(main.portal) .app>header{
    box-sizing:border-box!important;
    width:100%!important;
    padding-inline:12px!important;
    gap:8px!important;
  }
  body:has(main.portal) .app>header .brand{
    min-width:0!important;
    gap:8px!important;
  }
  body:has(main.portal) .app>header .brand span:last-child{
    min-width:0!important;
  }
  body:has(main.portal) .app>header .brand b{
    font-size:14px!important;
  }
  body:has(main.portal) .app>header .account{
    min-width:0!important;
    gap:8px!important;
    margin-left:auto!important;
  }
  body:has(main.portal) .app>header .theme-toggle{
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    gap:0!important;
    border-radius:14px!important;
  }
  body:has(main.portal) .app>header .theme-toggle-label{
    display:none!important;
  }
  body:has(main.portal) .app>header .icon{
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    padding:0!important;
  }
}

@media(max-width:390px){
  body:has(main.portal) .app>header .brand small{display:none!important}
  body:has(main.portal) .app>header .brandmark{width:40px!important;height:40px!important}
  body:has(main.portal) .app>header .header-avatar{width:40px!important;height:40px!important;flex-basis:40px!important}
}