/* ==========================================================================
   hoje.css — Constituição da Experiência MIC360 (MEC) v2.3.1
   §3.2 Cor de Território · §3.5 Gramática Visual · §5.4 Árvore Dupla · §6.1 Ritmo
   Carregado DEPOIS de patient.css: só acrescenta e sobrepõe onde a
   Constituição manda. Não altera o tema das outras áreas.
   ========================================================================== */
:root{
  --t-hoje-accent: #c99a3d;
  --t-hoje-surface: #f9f2e3;
  --t-hoje-surface2: #f3e6cd;
  --t-hoje-line: #ead7b1;
  --t-hoje-text: #836325;
  --t-hoje-solid: #c99a3d;
  --t-hoje-on: #241a22;
  --t-hoje-hover: #b08631;
  --t-bussola-accent: #5c8442;
  --t-bussola-surface: #edf0e4;
  --t-bussola-surface2: #dae1ce;
  --t-bussola-line: #c1cfb3;
  --t-bussola-text: #51743a;
  --t-bussola-solid: #55793d;
  --t-bussola-on: #fffaf2;
  --t-bussola-hover: #496834;
  --t-caminho-accent: #7b62a8;
  --t-caminho-surface: #f0ecef;
  --t-caminho-surface2: #e1d9e6;
  --t-caminho-line: #cdc2da;
  --t-caminho-text: #755ba4;
  --t-caminho-solid: #7b62a8;
  --t-caminho-on: #fffaf2;
  --t-caminho-hover: #695293;
  --t-oraculo-accent: #5f3a72;
  --t-oraculo-surface: #ede8e9;
  --t-oraculo-surface2: #dad0d9;
  --t-oraculo-line: #c2b3c5;
  --t-oraculo-text: #5f3a72;
  --t-oraculo-solid: #5f3a72;
  --t-oraculo-on: #fffaf2;
  --t-oraculo-hover: #523262;
  --t-livro-accent: #37665f;
  --t-livro-surface: #e9ece7;
  --t-livro-surface2: #d1dad5;
  --t-livro-line: #b3c4be;
  --t-livro-text: #37665f;
  --t-livro-solid: #37665f;
  --t-livro-on: #fffaf2;
  --t-livro-hover: #2f5852;
  --t-retrato-accent: #a96b5c;
  --t-retrato-surface: #f6ede7;
  --t-retrato-surface2: #ebdbd4;
  --t-retrato-line: #dec6bd;
  --t-retrato-text: #965d4f;
  --t-retrato-solid: #9d6153;
  --t-retrato-on: #fffaf2;
  --t-retrato-hover: #875347;
  --t-explorar-accent: #4d7ba6;
  --t-explorar-surface: #ebefef;
  --t-explorar-surface2: #d6dfe5;
  --t-explorar-line: #bbccd9;
  --t-explorar-text: #446c92;
  --t-explorar-solid: #4a769f;
  --t-explorar-on: #fffaf2;
  --t-explorar-hover: #406589;
  --t-perfil-accent: #6b6270;
  --t-perfil-surface: #efece9;
  --t-perfil-surface2: #ddd9d9;
  --t-perfil-line: #c7c2c4;
  --t-perfil-text: #6b6270;
  --t-perfil-solid: #6b6270;
  --t-perfil-on: #fffaf2;
  --t-perfil-hover: #5c5460;
  --mec-gold: #c9a24a;
  --mec-plum: #43213f;
  --mec-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

/* ==========================================================================
   Menu do paciente — lateral no desktop, barra em baixo no telemóvel
   (pedido da titular 07/08). A ajuda da Centelha NÃO é tocada.
   ========================================================================== */
.p-side { display: none; }

@media (min-width: 1024px) {
  #app-shell.patient-mode:not(.no-chrome) .p-side {
    display: flex; flex-direction: column;
    /* A faixa de "confirme o seu e-mail" é fixa no topo com z-index 3500
       (app.css): a lateral começa POR BAIXO dela, senão a marca ficava
       cortada em todas as contas ainda por verificar. Sem faixa, o var()
       cai para 0px e a lateral encosta ao topo. */
    position: fixed; left: 0; top: var(--verify-bar-h, 0px); bottom: 0; width: 234px; z-index: 130;
    padding: 22px 14px 16px;
    background: linear-gradient(180deg, rgba(255,253,248,.92), rgba(255,253,248,.5));
    border-right: 1px solid rgba(120,100,120,.10);
    overflow-y: auto; scrollbar-width: thin;
  }
  /* a barra de baixo desaparece; o conteúdo abre espaço para a lateral.
     O recuo vai na .main-col (que ocupa a largura toda) e não no main#view,
     senão o `margin:0 auto` do conteúdo desalinharia da lateral fixa. */
  #app-shell.patient-mode:not(.no-chrome) .patient-tabbar { display: none !important; }
  #app-shell.patient-mode:not(.no-chrome) .main-col { padding-left: 234px; }
  #app-shell.patient-mode:not(.no-chrome) main#view { padding-bottom: 48px; }
  /* Só o "Hoje" alarga (ver app.js, classe .hoje-view): as outras telas do
     portal ficam exatamente como estavam, na coluna de 520px. */
  #app-shell.patient-mode.hoje-view:not(.no-chrome) main#view {
    max-width: 1060px; padding-left: 28px; padding-right: 28px;
  }
}
.p-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 20px; }
.p-side-brand img { width: 30px; height: 30px; }
.p-side-brand b { font-family: var(--mec-serif); font-weight: 400; font-size: 16px;
  letter-spacing: .05em; color: var(--mec-plum); }
.p-side-nav { display: flex; flex-direction: column; gap: 3px; }
.p-side-nav button {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0;
  border-radius: 14px; background: none; cursor: pointer; text-align: left;
  font-family: var(--mec-serif); font-size: 14.5px; color: var(--p-text-muted);
}
.p-side-ic { display: flex; align-items: center; flex: 0 0 auto; }
.p-side-nav button svg { color: #a99ba6; flex: 0 0 auto; }
.p-side-nav button:hover { background: rgba(255,255,255,.72); color: var(--mec-plum); }
/* precedência (§3.2.2): o cromo usa o território da PÁGINA */
.p-side-nav button.active { background: var(--t-hoje-surface); color: var(--t-hoje-text); }
.p-side-nav button.active svg { color: var(--t-hoje-accent); }
.p-side-orn { margin: 22px auto 0; width: 140px; opacity: .85; }
.p-side-foot { margin-top: auto; padding: 14px 12px 0; font-size: 10.5px; color: var(--p-text-soft); }

/* ==========================================================================
   Hoje — protagonista, três convites, continuidade (§6.1)
   ========================================================================== */
.hoje-wrap { position: relative; }
.hoje-wash { position: absolute; top: -18px; right: -10px; width: 260px; opacity: .7;
  pointer-events: none; z-index: 0; }
.hoje-hero {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 400px;
  align-items: center; gap: 8px; overflow: hidden;
  background: linear-gradient(120deg, #fffdf9 0%, #fdf8f0 55%, #f9f2f6 100%);
  border-radius: 26px; box-shadow: 0 18px 40px rgba(78,52,80,.10), 0 3px 10px rgba(78,52,80,.05);
  min-height: 300px;
}
.hoje-hero-copy { padding: 30px 8px 30px 30px; }
.hoje-eyebrow { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--t-hoje-text); display: flex; align-items: center; gap: 8px; }
.hoje-hero h2 { margin: 0 0 10px; font-family: var(--mec-serif); font-weight: 400;
  font-size: 34px; line-height: 1.16; color: var(--mec-plum); letter-spacing: -.01em; }
.hoje-hero p.lede { margin: 0 0 20px; font-size: 13.5px; color: var(--p-text-muted);
  max-width: 34ch; line-height: 1.6; }
.hoje-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hoje-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 12px 24px; border-radius: 999px;
  background: var(--t-hoje-solid); color: var(--t-hoje-on); box-shadow: 0 8px 22px rgba(201,154,61,.28); }
.hoje-btn:hover { filter: brightness(.95); }
.hoje-btn[disabled] { opacity: .6; cursor: default; }
.hoje-link { font-size: 12.8px; font-weight: 600; color: var(--t-hoje-text); cursor: pointer; }

/* Árvore Dupla (§5.4): Retrato pintado + Registo gerado */
.hoje-tree { position: relative; width: 100%; max-width: 400px; margin: 0 auto; padding: 6px 0 0; }
.hoje-tree img { width: 100%; display: block; }
/* Camada 2 do §5.4 — o Registo. O invólucro é que se sobrepõe ao Retrato
   (o SVG dentro dele fica com 100%/100%): se a regra caísse só no <svg>, o
   `inset:0` não teria a que se agarrar e a camada nascia com altura zero. */
.hoje-tree > div { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hoje-tree svg { display: block; width: 100%; height: 100%; }
.hoje-chip { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: flex;
  align-items: center; gap: 10px; background: rgba(255,253,248,.94); padding: 8px 16px 8px 9px;
  border-radius: 999px; box-shadow: 0 10px 26px rgba(78,52,80,.08); }
.hoje-chip .orb { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fdf3d8, #e8c268); color: #7a5c14; }
.hoje-chip b { font-family: var(--mec-serif); font-weight: 400; font-size: 13.5px; color: var(--mec-plum); }

.hoje-sect { display: flex; align-items: center; gap: 12px; margin: 26px 2px 12px; }
.hoje-sect h3 { margin: 0; font-family: var(--mec-serif); font-weight: 400; font-size: 19px; color: var(--mec-plum); }
.hoje-sect i { flex: 1; height: 1px; background: linear-gradient(90deg, #e6d8c6, transparent); }

/* Até 3 convites (§6.1) — mas se hoje só houver dois, os dois ocupam a
   linha inteira em vez de deixarem um vazio à direita a parecer erro. */
.hoje-convites { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hoje-conv { position: relative; border-radius: 22px; overflow: hidden; padding: 20px 22px;
  min-height: 196px; display: flex; flex-direction: column;
  box-shadow: 0 18px 40px rgba(78,52,80,.10), 0 3px 10px rgba(78,52,80,.05); }
.hoje-conv .art { position: absolute; z-index: 1; pointer-events: none; }
.hoje-conv .in { position: relative; z-index: 2; }
.hoje-conv .lbl { margin: 0 0 7px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
.hoje-conv h4 { margin: 0 0 7px; font-family: var(--mec-serif); font-weight: 400; font-size: 20px;
  line-height: 1.22; color: var(--mec-plum); }
.hoje-conv p { margin: 0; font-size: 12.4px; color: var(--p-text-muted); line-height: 1.55; max-width: 26ch; }
.hoje-conv .cta { margin-top: auto; padding-top: 14px; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hoje-conv .cta button { border: 0; cursor: pointer; font-family: inherit; font-size: 12.4px;
  font-weight: 600; padding: 10px 18px; border-radius: 999px; }
.hoje-conv.dark h4 { color: #f7edda; }
.hoje-conv.dark p { color: #c9b8d8; }

.hoje-cont { margin-top: 14px; background: rgba(255,253,248,.72); border-radius: 20px;
  overflow: hidden; box-shadow: 0 10px 26px rgba(78,52,80,.08); }
.hoje-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; width: 100%;
  border: 0; border-top: 1px solid rgba(120,100,120,.09); background: none; cursor: pointer; text-align: left; }
.hoje-row:first-child { border-top: 0; }
.hoje-row .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 34px; background: rgba(120,100,120,.06); color: var(--p-text-soft); }
.hoje-row.done .ic { background: var(--t-bussola-surface); color: var(--t-bussola-text); }
.hoje-row h4 { margin: 0; font-family: var(--mec-serif); font-weight: 400; font-size: 15px; color: var(--mec-plum); }
.hoje-row p { margin: 1px 0 0; font-size: 12px; color: var(--p-text-muted); }
.hoje-row .go { margin-left: auto; color: #b7aab4; }
.hoje-help { margin: 16px auto 0; display: flex; justify-content: center; }
.hoje-help button { border: 0; background: none; cursor: pointer; opacity: .9; }

@media (max-width: 900px) {
  .hoje-hero { grid-template-columns: 1fr; min-height: 0; }
  .hoje-hero-copy { padding: 22px 20px 6px; }
  .hoje-hero h2 { font-size: 27px; }
  .hoje-tree { max-width: 320px; }
  .hoje-convites { grid-template-columns: 1fr; }
  .hoje-wash { width: 180px; opacity: .5; }
}