/* ============================================================================
   app.css — Golden path logado da Gina (protótipo de portfólio).
   Consome a biblioteca do DS (../gina-ds.css). Acento conforme o Figma:
   nav ativa = degradê de MARCA (violeta→magenta), CTA/hero = degradê de AÇÃO
   (laranja), ícone/foco = azul, botão neutro = preto. Sem hex/px de acento cru.
   ============================================================================ */

/* token editorial (highlight amarelo, fora da rampa do DS — igual ao marketing) */
:root{ --gina-site-underline:var(--color-text-inverse)35b; }

/* ---- App-shell ----------------------------------------------------------- */
.app{ display:flex; min-height:100vh; background:var(--color-bg-canvas); }  /* #ebebeb (Figma) — mais escuro que o branco */

/* Sidebar escura */
.side{
  width:220px; flex:0 0 220px;
  background:var(--color-surface-dark);   /* #1c1c1c (color/background/nav) */
  color:var(--color-text-inverse);
  display:flex; flex-direction:column; gap:var(--space-sm);
  padding:var(--space-md) var(--space-xs);
  position:sticky; top:0; height:100vh;
}
/* topo: avatar (anel laranja) + saudação ao lado */
.side__me{ display:flex; align-items:center; gap:var(--space-xs); }
/* anel girando ao redor do avatar (gradiente cônico de marca) */
.side__avatar-ring{
  position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:var(--radius-pill); padding:3px;
}
.side__avatar-ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:conic-gradient(from 0deg, #4800e5, #dd0a73, #ff9a02, #4800e5);
  animation:ring-spin 4.5s linear infinite;
}
.side__avatar{
  position:relative; z-index:1; width:100%; height:100%; border-radius:var(--radius-pill);
  object-fit:cover; display:block;
}
@keyframes ring-spin{ to{ transform:rotate(360deg); } }
.side__hi{ font-weight:300; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.04em; }  /* general/body-1 */
.side__name{ font-weight:700; font-size:var(--fs-lg); line-height:1.2; }                        /* title */
.side__profile{ font-weight:400; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.04em; text-decoration:underline; color:var(--color-text-inverse); }

.side__nav{ display:flex; flex-direction:column; gap:var(--space-nano); flex:1; width:100%; }
.side__link{
  display:flex; align-items:center; gap:var(--space-nano);
  height:56px; padding:0 var(--space-xs);
  border-radius:var(--radius-sm);                                       /* 8px (não pílula) */
  color:var(--color-text-inverse);
  font-weight:600; font-size:var(--fs-rg); line-height:1.4; letter-spacing:0.04em;  /* nav: SemiBold + tracking 4% */
  transition:background .26s var(--ease), color .26s var(--ease);
}
.side__link i{ font-size:24px; flex:0 0 auto; }
.side__link span{ flex:1; }
.side__link:hover{ background:rgba(255,255,255,.07); }
.side__link.is-active{ background:var(--color-nav-active); padding-right:var(--space-nano); }
/* ícone do item ativo = degradê de AÇÃO (laranja), via clip no glifo */
.side__link.is-active i:first-child{
  background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.side__chev{ font-size:20px !important; color:var(--color-text-inverse); }
/* logo no rodapé (círculo violeta) */
.side__logo{
  margin:auto auto 0;
  width:56px; height:56px; border-radius:var(--radius-pill);
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
}
.side__logo img{ width:32px; height:auto; display:block; filter:brightness(0) invert(1); }   /* wordmark gina em branco */

/* ---- Topbar -------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-xs) var(--space-md);
  background:var(--color-bg-canvas);                 /* topbar acompanha o canvas (Figma) */
  border-bottom:1px solid var(--color-divider);
  position:sticky; top:0; z-index:10;
}
.search{ position:relative; flex:1; max-width:560px; }
.search input{
  width:100%; height:48px; padding:0 44px 0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:400; font-size:var(--fs-rg); letter-spacing:0.04em;
  color:var(--gina-ink-darkest); background:var(--color-surface);
}
.search input::placeholder{ color:var(--color-text-placeholder); }
.search__go{
  position:absolute; right:10px; top:8px;
  width:28px; height:28px; border:0; background:transparent;
  color:var(--gina-violet); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:var(--space-xs); }
.icon-btn{
  width:40px; height:40px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.icon-btn:hover{ background:var(--color-bg-muted); }
/* sininho de notificações balança ao passar o mouse */
@keyframes bell-shake{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(3deg)} }
.icon-btn[aria-label="Notificações"]:hover i{ display:inline-block; transform-origin:50% 4px; animation:bell-shake .7s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .side__avatar-ring::before{ animation:none; }
  .icon-btn[aria-label="Notificações"]:hover i{ animation:none; }
}
.topbar__exit{
  display:inline-flex; align-items:center; gap:var(--space-nano);
  height:44px; padding:0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-pill);
  background:var(--color-surface); color:var(--gina-ink-principal);   /* #292929 */
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-rg); letter-spacing:0.02em; cursor:pointer;
}
.topbar__exit:hover{ border-color:var(--color-border-strong); }
/* ícone "Sair" gira 360° ao passar o mouse (metáfora de recarregar/sair) */
.topbar__exit i{ transition:transform .6s var(--ease); }
.topbar__exit:hover i{ transform:rotate(360deg); }

/* ---- Coluna de conteúdo -------------------------------------------------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.content{ padding:var(--space-md); }
.section-label{
  display:inline-block; color:var(--gina-ink-darkest);
  font-weight:600; font-size:var(--fs-rg); line-height:1.4; letter-spacing:0.04em;  /* general/bold-1 + tracking */
  background:var(--gina-site-underline, var(--color-text-inverse)35b); padding:0 4px;
  margin:var(--space-md) 0 var(--space-xs);
}
.section-label:first-child{ margin-top:0; }

/* ---- Botões (app) -------------------------------------------------------- */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-nano);
  font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-sm); line-height:1;
  height:44px; padding:0 var(--space-sm); border-radius:var(--radius-pill);
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:opacity .26s var(--ease), background .26s var(--ease), color .26s var(--ease), transform .26s var(--ease);
}
.b:active{ transform:scale(.98); }
.b--dark{ background:var(--color-btn-primary-bg); color:var(--color-btn-primary-fg); }
.b--dark:hover{ background:var(--color-btn-primary-bg-hover); }
.b--outline{ background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.b--outline:hover{ background:var(--color-text); color:var(--color-text-inverse); }
/* background-origin:border-box → degradê preenche a border-box inteira (a borda 1.5px é transparente
   p/ alinhar com os outros .b). Sem isso a faixa da borda clampa nas cores das pontas = "pontinhas". */
.b--cta{ background:var(--color-btn-cta-grad); color:var(--color-btn-cta-fg); background-origin:border-box; }
.b--cta:hover{ opacity:.9; }
.b--block{ width:100%; }

/* ---- Cards de KPI (Resumo) ---------------------------------------------- */
.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-xs); align-items:stretch; }
.kpi{
  background:var(--color-surface);                 /* card chapado branco (Figma): sem sombra, sem borda */
  border-radius:var(--radius-md); padding:var(--space-xs) var(--space-sm) var(--space-sm);   /* topo 16 = compensação óptica (o leading da 1ª linha joga ~8px acima → óptico ≈ 24 = laterais/base) */
  display:flex; flex-direction:column;
}
.kpi__top{ display:flex; align-items:center; justify-content:space-between; }
.kpi__cat{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:1.5; }  /* categoria (header 24px) */
.kpi__top i{ font-size:24px; color:var(--gina-violet); }
/* RITMO EXATO do Figma (card 222×178): header→counter 8, value→label 0, label→botão 16 */
.kpi__val{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-xlg); line-height:1.2; margin:var(--space-nano) 0 0; }  /* display, 8px do header */
.kpi__lbl{ color:var(--color-text-sub); font-weight:400; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.02em; }  /* caption, colado no valor */
.kpi__more{ color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em; margin-top:auto; padding-top:var(--space-xs); align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }  /* botão "Ver mais" — 16px abaixo do label (Figma), altura 24 */

/* ---- Agenda (Resumo) ----------------------------------------------------- */
.agenda{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xs); align-items:stretch; }
.appt{
  background:var(--color-surface);                 /* card chapado branco (Figma): sem sombra */
  border-radius:var(--radius-md); padding:var(--space-sm) var(--space-sm) var(--space-sm);   /* data é 14px (leading curto) → topo 24 p/ compensar oticamente */
  display:flex; flex-direction:column;
}
/* RITMO EXATO do Figma (card 281×206): data→meta 16, meta→botão 16 */
.appt__date{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.04em; margin-bottom:var(--space-xs); }
.appt__when{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-xlg); line-height:1.2; min-height:2.4em; }  /* reserva 2 linhas → especialidade alinha entre cards */   /* display */
.appt__what{ color:var(--color-text-sub); font-weight:400; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.02em; margin:var(--space-nano) 0 0; }
.appt__link{ color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em; margin-top:auto; padding-top:var(--space-xs); align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }  /* "Detalhes" ancorado no bottom (≥16px da meta) */
/* hover dos botões/links dos cards: cor de marca + seta deslizando p/ a direita */
.kpi__more, .appt__link{ transition:color .2s var(--ease); }
.kpi__more i, .appt__link i{ transition:transform .2s var(--ease); }
.kpi__more:hover, .appt__link:hover{ color:var(--gina-violet); }
.kpi__more:hover i, .appt__link:hover i{ transform:translateX(4px); }

/* ---- Banners de blog (Resumo) ------------------------------------------- */
.blogrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xs); }
.blog{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  min-height:173px; color:var(--color-text-inverse);                                  /* altura do banner no Figma */
  display:flex; flex-direction:column; justify-content:space-between;   /* tag no topo, título embaixo */
  padding:var(--space-xs);
  background-color:var(--gina-ink-3); background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* overlay CHAPADO 30% (Figma) — default preto; o card "Saúde" sobrescreve via --blog-overlay (#790000) */
.blog::after{ content:""; position:absolute; inset:0; background:var(--blog-overlay, rgba(0,0,0,.30)); }
.blog > *{ position:relative; z-index:1; }
.blog__tag{ align-self:flex-start; font-size:var(--fs-xs); font-weight:var(--fw-bold); background:var(--gina-text-strong); color:var(--color-text-inverse); padding:2px 8px; border-radius:var(--radius-xs); }
.blog__ttl{ font-size:var(--fs-rg); font-weight:var(--fw-bold); line-height:var(--lh-snug); }

/* ---- Filtros + cards de exame (Histórico) ------------------------------- */
/* linha do topo: tabs à esquerda + "Upload de exames" (CTA laranja) à direita (Figma 2563:882) */
.hist-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); }
.tabs{ display:inline-flex; gap:var(--space-quark); background:var(--color-bg-muted); padding:var(--space-quark); border-radius:var(--radius-pill); }
.tab{
  padding:var(--space-nano) var(--space-sm); border-radius:var(--radius-pill);
  /* general/bold-1: Rubik SemiBold 16 */
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-rg); line-height:1.4;
  color:var(--color-text-sub); cursor:pointer; border:0; background:transparent;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.tab.is-active{ background:var(--color-text); color:var(--color-text-inverse); }

/* espaçamento do Figma (Exames 2563:882): tabs→filtros 16, filtros→cabeçalho 24, cabeçalho→cards 16 */
.filters{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:var(--space-xs); align-items:end; margin:var(--space-xs) 0 0; }
.field-app label{ display:block; font-size:var(--fs-xs); color:var(--color-text-sub); margin-bottom:var(--space-quark); }
.field-app input{
  width:100%; height:44px; padding:0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--color-text); background:var(--color-surface);
}

/* Data = dropdown custom + date-picker de período (Figma "dropdown / inactive") */
.datedrop{ position:relative; }
.datedrop__field{
  width:100%; height:44px; padding:0 44px 0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface);
  font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--color-text);
  display:flex; align-items:center; text-align:left; cursor:pointer; position:relative;
}
.datedrop__field i{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--gina-ink-darkest); transition:transform .2s var(--ease); }
.datedrop.is-open .datedrop__field i{ transform:translateY(-50%) rotate(180deg); }
.datedrop__field:focus-visible{ outline:none; border-color:var(--gina-blue); box-shadow:0 0 0 3px rgba(0,54,246,.18); }
.datedrop__value{ flex:1; }
.datedrop__value.is-placeholder{ color:var(--color-text-placeholder); }
.datedrop__panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  box-shadow:var(--shadow-2); padding:var(--space-quark);
}
.datedrop__opt{
  display:flex; align-items:center; gap:var(--space-nano); width:100%; text-align:left;
  border:0; background:transparent; padding:10px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--color-text); cursor:pointer;
}
.datedrop__opt i{ font-size:18px; color:var(--gina-ink-darkest); }
.datedrop__opt:hover{ background:var(--color-bg-muted); }
.datedrop__opt.is-sel{ color:var(--gina-violet); font-weight:var(--fw-bold); }
.datedrop__opt--custom{ border-top:1px solid var(--color-divider); border-radius:0; margin-top:var(--space-quark); padding-top:12px; }
.datedrop__custom{ display:flex; flex-direction:column; gap:var(--space-nano); padding:var(--space-nano) 12px var(--space-quark); }
.datedrop__custom[hidden]{ display:none; }   /* o display:flex venceria o [hidden] do UA — re-esconde */
.datedrop__custom label{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-xs); color:var(--color-text-sub); }
.datedrop__custom input{
  height:40px; padding:0 12px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--color-text); background:var(--color-surface);
}
.datedrop__custom .b{ margin-top:var(--space-quark); }

/* cabeçalho de seção: rótulo (destaque amarelo) à esq + "Ver mais →" à dir (Figma) */
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); margin:var(--space-sm) 0 var(--space-xs); }
.section-head .section-label{ margin:0; }
.more-link{ color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; transition:color .2s var(--ease); }
.more-link i{ transition:transform .2s var(--ease); }
.more-link:hover{ color:var(--gina-violet); }
.more-link:hover i{ transform:translateX(4px); }

.examrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xs); }
.exam{
  background:var(--color-surface);                 /* card chapado branco (Figma): sem sombra */
  border-radius:var(--radius-md); padding:var(--space-xs) var(--space-sm) var(--space-sm); display:flex; flex-direction:column;   /* topo 16 = compensação óptica → óptico ≈ 24 */
}
.exam__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-nano); }
/* tipografia do card (Figma card-exames/default): clínica Bold 14, nome Bold 16, data Light 14 */
.exam__clinic{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text); letter-spacing:0.04em; }
.exam__name{ font-size:var(--fs-rg); font-weight:var(--fw-bold); line-height:1.5; color:var(--gina-ink-darkest); margin-top:var(--space-xs); }
/* tag de categoria do exame (Sangue/Imagem/Hormônios…) — retangular azul, igual ao blog */
.exam__tag{ display:inline-block; align-self:flex-start; font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--color-text-inverse); background:var(--gina-blue); padding:2px 8px; border-radius:var(--radius-xs); margin-top:var(--space-nano); letter-spacing:0.02em; }
/* especialidade do médico (prontuários) — retangular acento violeta */
.exam__spec{ display:inline-block; align-self:flex-start; font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--gina-violet); background:rgba(72,0,229,.08); padding:2px 8px; border-radius:var(--radius-xs); margin-top:var(--space-nano); }
.exam__date{ font-size:var(--fs-sm); font-weight:300; color:var(--color-text-sub); line-height:1.4; letter-spacing:0.04em; margin:var(--space-quark) 0 var(--space-xs); }
.exam .b{ margin-top:auto; }
.exam__menu{ color:var(--color-text-helper); font-size:18px; cursor:pointer; flex:0 0 auto; padding:2px; border-radius:var(--radius-xs); transition:background .2s var(--ease); }
.exam__menu:hover{ background:var(--color-bg-muted); color:var(--color-text); }

/* menu de contexto do card (3 pontinhos) */
.cardmenu{
  position:absolute; z-index:200; min-width:170px;
  background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:var(--space-quark);
}
.cardmenu__item{
  display:flex; align-items:center; gap:var(--space-nano); width:100%; text-align:left;
  border:0; background:transparent; padding:10px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text); cursor:pointer;
}
.cardmenu__item i{ font-size:18px; }
.cardmenu__item:hover{ background:var(--color-bg-muted); }
.cardmenu__item--danger{ color:var(--color-danger-strong); }
.cardmenu__item--danger i{ color:var(--color-danger-strong); }

/* hero laranja flutuante (Upload de exames) */
.hero-cta{ display:flex; justify-content:center; margin:var(--space-lg) 0 var(--space-md); }

/* ---- Dialog / modal (fluxo SYNC) ---------------------------------------- */
.scrim{
  position:fixed; inset:0; background:rgba(20,10,40,.45);
  display:none; align-items:center; justify-content:center; z-index:100; padding:var(--space-md);
}
.scrim.is-open{ display:flex; }
.dialog{
  background:var(--color-surface); border-radius:var(--radius-lg);
  width:100%; max-width:520px; padding:var(--space-md);
  box-shadow:var(--shadow-1); position:relative;
  max-height:90vh; overflow:auto;
}
.dialog__title.center, .dialog__sub.center{ text-align:center; padding-right:0; }   /* centralizados não reservam coluna do X → centro real */
.dialog__title.center{ margin-bottom:var(--space-quark); line-height:var(--lh-tight); }   /* 4px + leading justo até o subtítulo (Figma: sincronizando + sucesso) */
/* botão fechar = círculo cinza-canvas com X violeta (Figma 2708:3221) */
.dialog__x{
  position:absolute; top:var(--space-md); right:var(--space-md);
  width:40px; height:40px; border:0; border-radius:var(--radius-pill);
  background:var(--color-bg-canvas); color:var(--gina-violet); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:background .2s var(--ease);
}
.dialog__x:hover{ background:var(--color-bg-muted); }
.dialog__x[hidden]{ display:none; }   /* o display:flex venceria o [hidden] do UA */
/* zera as margens default do UA (h2/p) — fonte de espaçamento fantasma; espaço só por margin-bottom explícito */
.dialog__title{ font-size:var(--fs-md); font-weight:var(--fw-bold); line-height:var(--lh-snug); margin:0 0 var(--space-nano); padding-right:var(--space-md); }
.dialog__sub{ font-size:var(--fs-sm); color:var(--color-text-sub); margin:0 0 var(--space-sm); padding-right:var(--space-xl); }   /* afasta a 1ª linha da coluna do botão fechar */
.dialog__step{ display:none; }
.dialog__step.is-current{ display:block; }

.eyebrow-app{ font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-medium); text-transform:uppercase; color:var(--color-text-helper); margin-bottom:var(--space-xs); }

/* fontes de exame (passo 1) */
.source{
  display:flex; align-items:center; gap:var(--space-xs);
  width:100%; text-align:left; cursor:pointer;
  border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface); padding:var(--space-xs); margin-bottom:var(--space-xs);
  transition:border-color var(--dur-fast) var(--ease);
}
.source:hover{ border-color:var(--color-border-strong); }
.source__ico{
  width:48px; height:48px; flex:0 0 48px; border-radius:var(--radius-pill);
  background:var(--gina-violet); color:var(--color-text-inverse);                /* violeta SÓLIDO (Figma), não degradê */
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.source__ico[data-inst-mono]{ font-size:13px; font-weight:700; letter-spacing:0; }
.source__txt{ flex:1; }
.source__ttl{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.source__sub{ display:block; font-size:var(--fs-xs); color:var(--color-text-sub); margin-top:2px; }
.source__arrow{ color:var(--color-text-helper); font-size:18px; }
.or{ display:flex; align-items:center; gap:var(--space-xs); color:var(--color-text-helper); font-size:var(--fs-xs); margin:var(--space-xs) 0; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--color-divider); }

/* consentimento (passo 3) */
/* lista "o que será compartilhado" — ícone 22 + gap 16, título 16/sub 14 (Figma 2648:2493) */
.share{ list-style:none; padding:0; margin:0 0 var(--space-sm); }
.share li{ display:flex; gap:var(--space-xs); align-items:flex-start; padding:var(--space-nano) 0; }
.share i{ color:var(--gina-ink-darkest); font-size:22px; line-height:1.2; flex:0 0 auto; }
.share li > span{ display:flex; flex-direction:column; gap:2px; }
.share b{ font-size:var(--fs-rg); font-weight:600; line-height:1.4; color:var(--gina-ink-darkest); }
.share li > span > span{ font-size:var(--fs-sm); color:var(--color-text-sub); line-height:1.4; }
.note{
  display:flex; gap:var(--space-nano); align-items:flex-start;
  background:var(--color-bg-muted); border-radius:var(--radius-sm);
  padding:var(--space-xs); font-size:var(--fs-xs); color:var(--color-text-sub); margin-bottom:var(--space-sm);
}
.note i{ font-size:16px; }

/* sincronizando (passo 4) — ring em preto sendo preenchido */
.sync-ring{ width:80px; height:80px; margin:var(--space-sm) auto var(--space-xs); display:block; }
.sync-ring__track{ opacity:.12; }
.sync-ring__arc{
  stroke-dasharray:213.6; stroke-dashoffset:213.6;
  transform-origin:center; transform:rotate(-90deg);
}
.dialog__step.is-current .sync-ring__arc{
  animation:fill-arc 2.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fill-arc{ to{ stroke-dashoffset:53.4; } }
.center{ text-align:center; }

/* sucesso (passo 5) — check azul chapado 44px (Figma icon-check-line, sem círculo) */
.ok{
  width:44px; height:44px; margin:var(--space-sm) auto var(--space-xs);
  color:var(--gina-blue);
  display:flex; align-items:center; justify-content:center; font-size:44px;
}

/* ---- Instituição: busca + lista Labs/Hospitais ------------------------- */
.inst-search{ position:relative; margin-bottom:var(--space-sm); }
.inst-search i{ position:absolute; left:var(--space-xs); top:50%; transform:translateY(-50%); color:var(--color-text); font-size:20px; }
.inst-search input{
  width:100%; height:48px; padding:0 var(--space-xs) 0 44px;
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-weight:400; font-size:var(--fs-rg); letter-spacing:0.04em;
  color:var(--gina-ink-darkest); background:var(--color-surface);
}
.inst-search input::placeholder{ color:var(--color-text-placeholder); }
.inst-group{
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
  overflow:hidden; margin-bottom:var(--space-sm);
}
.inst-tile{
  display:flex; align-items:center; gap:var(--space-xs); width:100%; text-align:left;
  background:var(--color-surface); border:0; cursor:pointer;
  padding:var(--space-xs); border-top:1px solid var(--color-divider);
}
.inst-group .inst-tile:first-child{ border-top:0; }
.inst-tile:hover{ background:var(--color-bg-muted); }
.inst-mono{
  flex:0 0 40px; width:40px; height:40px; border-radius:var(--radius-pill);   /* círculo (Figma), não quadrado */
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-inverse); font-weight:700; font-size:14px; letter-spacing:0;
}
.inst-tile__name{ flex:1; color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:1.4; }
.inst-tile__arrow{ color:var(--color-text-helper); font-size:20px; }
.inst-empty{ color:var(--color-text-sub); font-size:var(--fs-sm); text-align:center; padding:var(--space-sm) 0; }

/* duração (consentimento) */
.dur{ display:flex; align-items:center; gap:var(--space-nano); margin-bottom:var(--space-sm); color:var(--gina-ink-darkest); font-size:var(--fs-rg); }
.dur i{ font-size:22px; }

/* ---- Sincronizando: ring + checklist --------------------- */
.checklist{ list-style:none; margin:0 0 var(--space-sm); padding:0; }
.checklist li{ display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-nano) 0; color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); }
.checklist i{ font-size:22px; }
.checklist .is-done i{ color:var(--gina-ink-darkest); }
/* item EM ANDAMENTO = mini loader girando (degradê laranja, igual ao Figma) */
.checklist .dot{ width:22px; display:flex; align-items:center; justify-content:center; }
.checklist .dot::before{
  content:""; width:18px; height:18px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(245,74,49,0), #f54a31, #ff9a02);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  animation:mini-spin .8s linear infinite;
}
@keyframes mini-spin{ to{ transform:rotate(360deg); } }

/* ---- Sucesso: lista de exames + auto-sync ------------------------------ */
.exam-list{ list-style:none; margin:var(--space-xs) 0; padding:0; }
.exam-list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs);
  padding:10px 0; border-top:1px solid var(--color-divider);
}
.exam-list li:first-child{ border-top:0; }
.exam-list li span{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); }
.exam-list time{ color:var(--color-text-sub); font-size:var(--fs-sm); flex:0 0 auto; }
.autosync{ display:flex; gap:var(--space-xs); align-items:flex-start; padding:var(--space-xs) 0 var(--space-sm); }
.autosync i{ font-size:22px; color:var(--gina-ink-darkest); }
.autosync > div{ display:flex; flex-direction:column; gap:2px; }   /* empilha b+sub sem linha-fantasma; 2px entre título e texto */
.autosync b{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:var(--lh-snug); }
.autosync span span, .autosync > div > span{ color:var(--color-text-sub); font-size:var(--fs-sm); line-height:var(--lh-snug); }

/* ---- Login --------------------------------------------------------------- */
.login{ padding:80px 0 96px; }
.login__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.login__card{ background:var(--color-surface); border-radius:var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-2); max-width:420px; }
.login__card-title{ font-weight:700; font-size:var(--fs-lg); line-height:1.2; color:var(--gina-ink-darkest); margin-bottom:var(--space-nano); }
.login__card-hint{ font-size:var(--fs-sm); line-height:1.4; color:var(--color-text-sub); margin-bottom:var(--space-sm); }
.login__card-hint b{ font-weight:600; color:var(--gina-ink-principal); }
.seg{ display:flex; gap:var(--space-quark); background:var(--color-bg-muted); padding:var(--space-quark); border-radius:var(--radius-pill); margin-bottom:var(--space-sm); }
.seg button{
  flex:1; padding:var(--space-nano) var(--space-xs); border:0; cursor:pointer;
  border-radius:var(--radius-pill); background:transparent; color:var(--color-text-sub);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-rg); line-height:1.4;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.seg button.is-active{ background:var(--color-text); color:var(--color-text-inverse); }
.login__card .field{ margin-bottom:var(--space-xs); }
.login__card .field input{
  width:100%; height:48px; padding:0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-rg); color:var(--color-text); background:var(--color-surface);
}
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:var(--space-nano);
  width:100%; height:44px; margin-top:var(--space-xs); background:transparent; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text);
}
.gbtn i{ color:var(--color-accent); font-size:18px; }
.gbtn--back{ justify-content:flex-start; width:auto; margin:0 0 var(--space-sm); padding:0; height:auto; color:var(--color-text-sub); font-size:var(--fs-sm); }

/* ---- Responsivo leve (foco do dia = desktop) ---------------------------- */
@media (max-width:1100px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .examrow,.agenda,.blogrow{ grid-template-columns:repeat(2,1fr); }
  .filters{ grid-template-columns:1fr 1fr; }
}