/*!
 * SEMIO MED - pagina inicial (07/10/2026).
 * Acompanha assets/semiomed-home.js. Aqui mora o visual dos blocos novos
 * (retomada e Agora), a arte propria de cada cartao e o conserto do painel da agenda.
 */

.semiomed-home-root,
.semiomed-home-root * { min-width: 0; }

.semiomed-home-root {
  --home-ink: #0f1f33;
  --home-muted: #5a6b80;
  --home-line: #dde6f0;
  --home-card: #ffffff;
  --home-soft: #f3f7fc;
  --home-accent: #1d4f82;
  --home-accent-soft: #e7f0fa;
}

html.dark .semiomed-home-root {
  --home-ink: #eef4fb;
  --home-muted: #9fb2c8;
  --home-line: rgba(148, 177, 211, 0.22);
  --home-card: rgba(15, 23, 42, 0.72);
  --home-soft: rgba(30, 58, 92, 0.32);
  --home-accent: #7fb5e8;
  --home-accent-soft: rgba(56, 118, 182, 0.2);
}

.semiomed-home-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--home-accent);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.semiomed-home-oculto { display: none !important; }

/* ---------------------------------------------------------------- */
/* Arte propria em cada cartao                                       */
/*                                                                   */
/* O cartao ja traz a camada de imagem pronta, so que vazia. O JS     */
/* preenche a arte; aqui garantimos que ela apareca com o contraste   */
/* certo e sem engolir o texto.                                       */
/* ---------------------------------------------------------------- */

/* O tema "smooth" esconde TODA camada de imagem da plataforma
   (html.semiomed-smooth [class*=" semiomed-visual-bg"] { display:none !important }),
   decisao de desempenho de uma revisao anterior. Era por isso que as artes dos modulos
   sumiam e os tres cartoes da home ficavam identicos. Aqui a excecao e so para estes
   tres cartoes, e com um veu por cima para o texto nao perder legibilidade. O seletor
   repete html.semiomed-smooth de proposito: sem isso a regra do tema ganha. */
/* O tema "smooth" esconde TODA camada de imagem da plataforma
   (html.semiomed-smooth [class*=" semiomed-visual-bg"] { display:none !important }),
   decisao de desempenho de uma revisao anterior. Era por isso que as artes dos modulos
   sumiam e os tres cartoes da home ficavam identicos. Aqui a excecao e so para estes
   tres cartoes. O seletor repete html.semiomed-smooth de proposito: sem isso a regra do
   tema ganha por especificidade. */
html .semiomed-home-card .semiomed-visual-bg,
html .semiomed-home-card .semiomed-visual-bg__image,
html .semiomed-home-card .semiomed-visual-bg__veil,
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg,
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg__image,
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg__veil {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* A terceira camada do aplicativo so clareava tudo; o veu abaixo faz esse papel. */
html .semiomed-home-card .semiomed-visual-bg__gradient,
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg__gradient {
  display: none !important;
}

/* A arte encosta a direita: e de la que vem o desenho nas tres imagens. */
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg__image,
html .semiomed-home-card .semiomed-visual-bg__image {
  background-size: cover !important;
  background-position: right center !important;
  opacity: 1 !important;
  filter: none;
  transition: transform 700ms ease;
}

.semiomed-home-card:hover .semiomed-visual-bg__image { transform: scale(1.04); }

/* O veu cobre a area do texto e some antes do desenho. Sem ele, titulo e descricao
   cairiam em cima da arte escura e ficariam ilegiveis. */
html.semiomed-smooth .semiomed-home-card .semiomed-visual-bg__veil,
html .semiomed-home-card .semiomed-visual-bg__veil {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.985) 0%,
    rgba(255, 255, 255, 0.975) 52%,
    rgba(255, 255, 255, 0.72) 70%,
    rgba(255, 255, 255, 0.12) 88%,
    rgba(255, 255, 255, 0) 100%) !important;
}

html.dark .semiomed-home-card .semiomed-visual-bg__veil {
  background: linear-gradient(90deg,
    rgba(10, 17, 31, 0.985) 0%,
    rgba(10, 17, 31, 0.97) 52%,
    rgba(10, 17, 31, 0.7) 70%,
    rgba(10, 17, 31, 0.12) 88%,
    rgba(10, 17, 31, 0) 100%) !important;
}

/* A logo de Hipocrates era igual nos tres cartoes e passou a competir com a arte. */
html .semiomed-home-card .semio-home-feature-logo { display: none !important; }

/* Selo do canto: o icone branco ficava invisivel sobre o fundo achatado pelo tema.
   O tema achata degrades com uma regra ancorada em #root, de especificidade alta
   (html.semiomed-smooth #root [class*="bg-"][class*="gradient"]). Os seletores abaixo
   precisam alcanca-la, por isso repetem o #root e a classe do cartao. */
html.semiomed-smooth #root .semiomed-home-card .semiomed-home-badge,
html #root .semiomed-home-card .semiomed-home-badge {
  background-image: linear-gradient(135deg, #1b4f84 0%, #2f82c4 100%) !important;
  background-color: #1b4f84 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(27, 79, 132, 0.28);
}

html.semiomed-smooth #root .semiomed-home-card--questions .semiomed-home-badge,
html #root .semiomed-home-card--questions .semiomed-home-badge {
  background-image: linear-gradient(135deg, #10243d 0%, #1f6f9e 100%) !important;
  background-color: #10243d !important;
}

html.semiomed-smooth #root .semiomed-home-card--anamnesis .semiomed-home-badge,
html #root .semiomed-home-card--anamnesis .semiomed-home-badge {
  background-image: linear-gradient(135deg, #184c63 0%, #2d8fa3 100%) !important;
  background-color: #184c63 !important;
}

html.semiomed-smooth #root .semiomed-home-badge svg,
html #root .semiomed-home-badge svg { color: #ffffff !important; stroke: #ffffff !important; }

/* O texto nao pode avancar sobre a faixa da arte. */
.semiomed-home-card > .relative { max-width: 72%; }

@media (max-width: 1100px) {
  html .semiomed-home-card .semiomed-visual-bg__image { background-position: 76% center !important; }
  .semiomed-home-card > .relative { max-width: 78%; }
}

/* ---------------------------------------------------------------- */
/* Agenda                                                            */
/* ---------------------------------------------------------------- */

/* Mostrava um compromisso e esticava ate a altura da coluna da esquerda,
   sobrando uns 325 px de branco. Agora acompanha o proprio conteudo. */
.semiomed-home-agenda {
  align-self: start !important;
  height: auto !important;
}

.semiomed-home-agenda .semio-home-agenda-list {
  display: grid;
  gap: 8px;
}

.semiomed-home-agenda .semio-home-agenda-event--hidden { display: none !important; }

.semiomed-home-agenda .semio-home-agenda-more {
  margin-top: 10px;
  color: var(--home-muted);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Continue de onde parou                                            */
/* ---------------------------------------------------------------- */

.semiomed-home-resume,
.semiomed-home-agora {
  padding: 18px 20px 20px;
  border: 1px solid var(--home-line);
  border-radius: 22px;
  background: var(--home-card);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

html.dark .semiomed-home-resume,
html.dark .semiomed-home-agora { box-shadow: none; }

.semiomed-home-resume-head,
.semiomed-home-agora-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.semiomed-home-resume-head h2,
.semiomed-home-agora-head h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.semiomed-home-pace {
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--home-soft);
  color: var(--home-muted);
  font-size: 11.5px;
  font-weight: 800;
}

/* auto-fill, e nao auto-fit: com um convite so, o cartao ocupa uma coluna em vez de
   esticar pela largura inteira do painel e parecer vazio. */
.semiomed-home-resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.semiomed-home-resume-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: var(--home-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.semiomed-home-resume-card:hover {
  border-color: var(--home-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(29, 79, 130, 0.12);
}

.semiomed-home-resume-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--home-accent-soft);
  color: var(--home-accent);
}

.semiomed-home-resume-icon svg { width: 20px; height: 20px; }

.semiomed-home-resume-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.semiomed-home-resume-copy small {
  color: var(--home-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.semiomed-home-resume-copy strong {
  color: var(--home-ink);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.semiomed-home-resume-copy > span {
  color: var(--home-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.semiomed-home-resume-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  grid-column: 2;
  margin-top: 4px;
  color: var(--home-accent);
  font-size: 12px;
  font-weight: 900;
}

.semiomed-home-resume-action svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.semiomed-home-resume-card:hover .semiomed-home-resume-action svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- */
/* A Agora na home                                                   */
/* ---------------------------------------------------------------- */

.semiomed-home-agora-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: transparent;
  color: var(--home-accent);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.semiomed-home-agora-all:hover {
  border-color: var(--home-accent);
  background: var(--home-accent-soft);
}

.semiomed-home-agora-all svg { width: 14px; height: 14px; }

.semiomed-home-agora-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.semiomed-home-agora-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  background: var(--home-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease;
}

.semiomed-home-agora-item:hover {
  border-color: var(--home-accent);
  transform: translateY(-2px);
}

.semiomed-home-agora-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--home-accent-soft);
  color: var(--home-accent);
}

.semiomed-home-agora-mark svg { width: 17px; height: 17px; }

.semiomed-home-agora-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.semiomed-home-agora-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--home-ink);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

.semiomed-home-agora-copy small {
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Celular                                                           */
/* ---------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Atalhos do topo: fileira rolavel em vez de tres barras empilhadas. */
  /* min-width:0 e obrigatorio: sem ele, os botoes em nowrap empurram a largura minima
     do avo e a pagina inteira passa a vazar para fora da tela. */
  .semiomed-home-quick {
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .semiomed-home-quick,
  .semiomed-home-quick * { min-width: 0; }

  .semiomed-home-quick::-webkit-scrollbar { display: none; }

  .semiomed-home-quick > button {
    flex: 0 0 auto;
    min-height: 38px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .semiomed-home-resume,
  .semiomed-home-agora {
    padding: 15px 14px 16px;
    border-radius: 18px;
  }

  .semiomed-home-resume-grid,
  .semiomed-home-agora-grid { grid-template-columns: 1fr; }

  .semiomed-home-resume-head,
  .semiomed-home-agora-head { align-items: flex-start; }

  .semiomed-home-agora-all { width: 100%; justify-content: center; }
}

/* ================================================================== */
/* Ritmo da semana (11/10/2026)                                        */
/*                                                                     */
/* A home era toda feita de cartões do mesmo peso, sem nada que         */
/* mudasse de um dia para o outro. Esta faixa é a única coisa viva da   */
/* página: vem do carimbo de hora de cada questão respondida, que já    */
/* era guardado e nunca aparecia.                                      */
/* ================================================================== */

.semiomed-home-ritmo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px 9px 11px;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: linear-gradient(100deg, var(--home-accent-soft) 0%, var(--home-soft) 58%);
}

.semiomed-home-ritmo-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--home-accent);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}

.semiomed-home-ritmo-selo svg { width: 15px; height: 15px; }

.semiomed-home-ritmo-barras {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
}

.semiomed-home-ritmo-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 15px;
  height: 100%;
  gap: 3px;
  cursor: default;
}

.semiomed-home-ritmo-dia i {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 3px;
  background: rgba(29, 79, 130, 0.18);
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.semiomed-home-ritmo-dia.is-cheio i { background: var(--home-accent); }

.semiomed-home-ritmo-dia.is-hoje i {
  box-shadow: 0 0 0 2px var(--home-card), 0 0 0 3.5px var(--home-accent);
}

.semiomed-home-ritmo-dia b {
  color: var(--home-muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.semiomed-home-ritmo-dia.is-hoje b { color: var(--home-accent); }

.semiomed-home-ritmo-total {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-left: 12px;
  border-left: 1px solid var(--home-line);
  white-space: nowrap;
}

.semiomed-home-ritmo-total strong {
  color: var(--home-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.semiomed-home-ritmo-total span {
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .semiomed-home-ritmo {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
  }

  .semiomed-home-ritmo-selo { font-size: 10.5px; }
  .semiomed-home-ritmo-barras { gap: 4px; height: 30px; }
  .semiomed-home-ritmo-dia { width: 12px; }
}

/* ================================================================== */
/* Painel de boas-vindas                                               */
/*                                                                     */
/* Era um cartão branco entre cartões brancos — a página toda com o     */
/* mesmo peso e nenhum ponto de entrada. Ganha um fio da marca no topo  */
/* e um fundo com tom, para ser o começo visível da página.             */
/* ================================================================== */

html #root .semiomed-home-painel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(168deg, rgba(29, 79, 130, 0.07) 0%, rgba(29, 79, 130, 0.015) 46%, rgba(255, 255, 255, 0) 78%),
    var(--home-card) !important;
}

html.dark #root .semiomed-home-painel {
  background:
    linear-gradient(168deg, rgba(127, 181, 232, 0.12) 0%, rgba(127, 181, 232, 0.03) 46%, rgba(15, 23, 42, 0) 78%),
    var(--home-card) !important;
}

html #root .semiomed-home-painel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #123f73 0%, #2f82c4 46%, rgba(47, 130, 196, 0) 100%);
  pointer-events: none;
}

html #root .semiomed-home-saudacao {
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
}

/* A faixa de ritmo ganha ar: as barras precisam ler como um gráfico. */
.semiomed-home-ritmo { padding: 10px 16px 10px 13px; gap: 16px; }
.semiomed-home-ritmo-barras { height: 38px; gap: 6px; }
.semiomed-home-ritmo-dia { width: 16px; }
.semiomed-home-ritmo-dia i { border-radius: 4px; }