:root {
  color-scheme: light only;
  --bg:      #062A34;
  --surface: #073542;
  --card:    #F8F5EE;
  --card2:   #F4EFE5;
  --line:    rgba(16,32,43,0.10);
  --gold:    #B89B52;
  --gold2:   #D9BF7F;
  --offwhite:#10202B;
  --muted:   #62615B;
  --muted2:  #7A7A72;
  --ink:     #10202B;
  --ink2:    #62615B;
  --ok:      #3FA37A;
  --warn:    #D9A441;
  --alert:   #B3604A;
  --mar:     #B89B52;
  --abr:     #5C8AA0;
  --maio:    #3FA37A;
  --jun:     #C97A4C;
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Raleway', sans-serif;
  --petroleo-1: #062A34;
  --petroleo-2: #073542;
  --petroleo-3: #0B3F4D;
  --petroleo-4: #102F3A;
  --offwhite-1: #F8F5EE;
  --offwhite-2: #F4EFE5;
  --offwhite-3: #ECE5D8;
  --champagne-1: #B89B52;
  --champagne-2: #D9BF7F;
  --champagne-3: #E8CF9A;
  --sidebar-w: 240px;
  --header-h-desktop: 96px;

  /* ── PALETA NOVA (redesign creme/oliva — aditiva, não substitui nada acima) ── */
  --creme-bg:        #F5F2ED;
  --oliva-1:          #776E45;
  --oliva-2:          #948C63;
  --salvia-1:         #D4CFB1;
  --salvia-2:         #E7E2CE;
  --marrom-1:         #736245;
  --ink-resumo:       #2E2A20;
  --hairline-resumo:  #E3DED2;
  --ok-resumo:        #4A6438;
  --warn-resumo:      #8A5E1E;
  --alert-resumo:     #9C4A36;
  --card-resumo:      #FDFCFA;  /* superfície de card (branco-quase) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--sans);
  background-color: var(--creme-bg);
  color: var(--ink-resumo);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body, body * { color-scheme: light only; }

/* ── LAYOUT SHELL (sidebar desktop + topbar/bottomnav mobile) ── */
.app-shell{ position:relative; min-height:100vh; z-index:1; }


/* ══════════════════════════════════════════════════════════════════
   PRESCRIÇÕES E PEDIDOS / FALE COM A EQUIPE (paleta creme-oliva)
   ══════════════════════════════════════════════════════════════════ */
.pf-cabecalho{ max-width:640px; margin:0 0 26px; }
.pf-eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--oliva-2); }
.pf-titulo{ font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.3; color:var(--ink-resumo); margin:8px 0 0; }
.pf-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
.pf-sub{ font-size:14px; line-height:1.6; color:var(--marrom-1); margin-top:10px; }

.pf-card{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:16px; padding:22px; margin-bottom:16px; }
.pf-card--pendente{ border-left:3px solid var(--oliva-1); }
.pf-card-topo{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pf-card-nome{ font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink-resumo); }
.pf-card-data{ font-size:12.5px; color:var(--oliva-2); margin-top:2px; }
.pf-chip{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; }
.pf-chip--prescricoes{ background:#DCEAF5; color:#2E6187; }
.pf-chip--duvida{ background:#E3EEDD; color:#355C35; }
.pf-chip--pendente{ background:#EFEADC; color:#776E45; }
.pf-chip--respondido{ background:#E3EEDD; color:#355C35; }

.pf-texto{ background:#FAF8F3; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6; color:var(--ink-resumo); white-space:pre-wrap; word-break:break-word; }
.pf-resposta{ margin-top:14px; border-left:2px solid var(--salvia-1); padding-left:14px; }
.pf-resposta-label{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--oliva-2); margin-bottom:6px; }

.pf-campo{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.pf-label{ font-size:12.5px; font-weight:700; color:var(--marrom-1); }
.pf-select, .pf-textarea{
  width:100%; border:1.4px solid var(--hairline-resumo); border-radius:12px;
  background:var(--card-resumo); font-family:var(--sans); font-size:14px; color:var(--ink-resumo);
}
.pf-select{ height:46px; padding:0 34px 0 14px; -webkit-appearance:none; appearance:none; cursor:pointer; font-weight:600;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948C63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px; }
.pf-textarea{ min-height:110px; resize:vertical; padding:13px 15px; line-height:1.6; }
.pf-textarea::placeholder{ color:var(--oliva-2); }
.pf-select:focus, .pf-textarea:focus{ outline:none; border-color:var(--oliva-1); box-shadow:0 0 0 3px rgba(119,110,69,0.16); }

.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px;
  border:none; border-radius:12px; cursor:pointer; background:var(--oliva-1); color:#F8F5EE;
  font-family:var(--sans); font-size:14px; font-weight:600;
}
.pf-btn:hover{ background:#5C5536; }
.pf-btn:disabled{ opacity:.55; cursor:not-allowed; }
.pf-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.pf-btn--wpp{ background:#25703F; }
.pf-btn--wpp:hover{ background:#1D5A32; }
.pf-btn--link{ background:transparent; color:var(--oliva-1); border:1.4px solid var(--hairline-resumo); }
.pf-btn--link:hover{ background:var(--salvia-2); }

.pf-nota{ font-size:12.5px; line-height:1.55; color:var(--oliva-2); margin-top:10px; }
.pf-aviso{ background:#EFEADC; border-radius:12px; padding:14px 16px; font-size:13.5px; line-height:1.6; color:var(--marrom-1); margin-bottom:14px; }
.pf-vazio{ text-align:center; padding:44px 20px; color:var(--marrom-1); font-size:14px; line-height:1.6; }
.pf-vazio-titulo{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink-resumo); margin-bottom:8px; }

.pf-doc{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pf-doc-icone{ width:44px; height:44px; border-radius:12px; background:#EFEADC; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pf-doc-icone svg{ width:19px; height:19px; stroke:#8A7F58; fill:none; }
.pf-doc-info{ flex:1; min-width:0; }
.pf-doc-arquivo{ font-size:12.5px; color:var(--oliva-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media(max-width:640px){
  .pf-card{ padding:16px; }
  .pf-titulo{ font-size:22px; }
  .pf-btn{ width:100%; }
  .pf-doc{ align-items:flex-start; }
}

.main-area{ position:relative; max-width:1180px; margin:0 auto; padding-bottom:90px; overflow-x:hidden; min-width:0; }

@media (min-width: 1024px){
  .main-area{
    margin-left: var(--sidebar-w);
    margin-right: 0;
    width: calc(100vw - var(--sidebar-w));
    max-width: calc(100vw - var(--sidebar-w));
    overflow-x: hidden;
    padding-bottom: 48px;
  }
  .section{
    max-width: min(1180px, calc(100vw - var(--sidebar-w) - 72px));
    min-width: 0;
  }
}

/* Fundo escuro "ilha" para as abas fora do escopo do redesign: o body virou
   creme, então essas abas precisam do próprio fundo escuro por baixo para o
   texto claro delas continuar legível — nenhuma classe interna delas foi
   alterada. #tab-exames saiu desta lista, depois #tab-checkin, depois
   #tab-fotos, depois #tab-treinos, #tab-jornada, e agora #tab-prescricoes
   e #tab-fale: já não sobrou nenhuma aba nesta lista — o seletor fica de
   pé só para o caso de entrar uma aba nova fora do redesign. Antes: só Fale com a
   Equipe ainda espera a sua vez (fora de escopo, "Em breve"). */
.tab-panel:not(#tab-resumo):not(#tab-composicao):not(#tab-exames):not(#tab-checkin):not(#tab-fotos):not(#tab-treinos):not(#tab-jornada):not(#tab-prescricoes):not(#tab-fale){
  background: var(--petroleo-1);
  min-height: 100vh;
}

/* ── HEADER (compacto) ── */
header { background:transparent; border-bottom:1px solid var(--hairline-resumo); position:relative; overflow:visible; }
@media (min-width:1024px){
  header{ margin-left: var(--sidebar-w); }
}
header::before{ content:none; }
/* Header compacto (todas as abas exceto Resumo): oculta os cards */
header.header-compacto .header-info-row{ display:none; }
header.header-compacto .header-inner{ padding-bottom:14px; }
.header-inner { position:relative; padding:22px 18px 18px; max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .header-inner{ padding:28px 36px 20px; } }
.header-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; }
.header-tag { font-size:0.58rem; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--marrom-1); }
.header-period { font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-resumo); opacity:.6; font-weight:700; }
.header-rule { display:none; }
header h1 { font-family:var(--serif); font-size:clamp(1.6rem,5vw,2.3rem); font-weight:700; line-height:1.1; color:var(--ink-resumo); letter-spacing:0.01em; white-space:nowrap; }
header h1 em { font-style:italic; font-weight:400; color:var(--oliva-1); letter-spacing:0.06em; }
.header-greeting{ font-size:0.8rem; font-weight:500; color:var(--ink-resumo); opacity:.6; margin-bottom:2px; }

/* Linha única com os cards de acompanhamento, lado a lado */
.header-info-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:22px;
  margin-top:16px; padding-top:13px; border-top:1px solid var(--hairline-resumo);
}
/* Uma linha só: são três cards curtos (Próxima consulta, Plano, Consultas
   Realizadas) desde que o de "Início do acompanhamento" saiu. O nowrap
   impede que o terceiro caia sozinho para a linha de baixo; cada um pode
   encolher (min-width:0), e o gap encolhe junto no celular. */
.header-cards{
  flex:1 1 100%; min-width:0;
  display:flex; flex-wrap:nowrap; gap:22px; align-items:flex-start;
}
@media (min-width:640px){
  .header-cards{ padding-left:22px; border-left:1px solid var(--hairline-resumo); }
}
/* flex:0 1 auto, e não 1 1 0: as três colunas NÃO precisam ter a mesma
   largura. "0 de 6" pede pouco espaço e o nome do plano pede muito; com
   colunas iguais, "Acompanhamento Premium" quebrava no meio da palavra
   enquanto sobrava espaço vazio ao lado. Assim cada card toma o que
   precisa e só encolhe quando falta. */
.hc-card{
  display:flex; flex-direction:column; gap:3px;
  min-width:0; flex:0 1 auto;
}
.hc-card + .hc-card{ padding-left:22px; border-left:1px solid var(--hairline-resumo); }
.hc-label{ font-size:0.56rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--marrom-1); }
.hc-val{ font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--ink-resumo); line-height:1.3; }
.hc-sub{ font-family:var(--sans); font-size:0.64rem; font-weight:600; color:var(--ink-resumo); opacity:.55; }
.hc-sub.destaque{ color:var(--oliva-1); opacity:1; }
.hc-val.muted{ color:var(--ink-resumo); opacity:.5; font-family:var(--sans); font-size:0.82rem; font-weight:700; }


/* ══════════════════════════════════════════════════════════
   ABAS — um único elemento .tab-bar (mesmos 5 .tab-btn que
   showTab() já manipula). Em mobile é bottom-nav fixa; em
   desktop, a mesma barra é reposicionada via CSS para se
   comportar como sidebar vertical fixa à esquerda. Nenhum
   botão é duplicado — só a ORIENTAÇÃO/POSIÇÃO muda por media query.
   ══════════════════════════════════════════════════════════ */
.tab-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--oliva-1);
  border-top:1px solid var(--oliva-1); border-bottom:none;
  display:flex; overflow-x:auto; scrollbar-width:none; padding:6px 4px; justify-content:space-around;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { width:auto; flex-shrink:0; padding:8px 10px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--card); opacity:.75; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, opacity .2s; margin-top:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-btn svg{ width:18px; height:18px; stroke:currentColor; flex-shrink:0; }
.tab-btn span{ line-height:1; }
.tab-btn.active { color:var(--ink-resumo); opacity:1; background:var(--salvia-1); border-bottom-color:transparent; border-radius:100px; }
.tab-btn:hover:not(.active) { opacity:1; }

/* Mobile (<1024px): SEMPRE exatamente 4 itens fixos na barra (Resumo,
   Treinos, Check-in, Menu — reorganizados por tabBarReconfigurar no
   script principal, sem depender da largura da tela), cada um ocupando
   1/4 da largura, sempre com ícone + rótulo visíveis (mesmo estilo que
   já existia pro item ativo, agora permanente pros 4). Sem scroll
   horizontal, sem cálculo dinâmico de quantos cabem. */
@media (max-width:1023.98px){
  .tab-bar > .tab-btn{ flex:1 1 0; min-width:0; }
}

/* ── Botão "Menu" (mobile) — abre o drawer com as abas restantes + "em breve" ── */
.tab-btn-menu{ flex-shrink:0; }
.tab-menu-overlay{
  position:fixed; inset:0; z-index:960; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(46,42,32,0.45); backdrop-filter:blur(4px);
}
/* Drawer GRANDE — ocupa boa parte da altura da tela (não um menu pequeno
   ancorado perto do botão), pra caber uma lista confortável de itens. */
.tab-menu-sheet{
  width:100%; max-width:480px; max-height:85vh; overflow-y:auto; box-sizing:border-box;
  background:var(--oliva-1); border-radius:20px 20px 0 0;
  padding:10px 18px max(18px, env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(46,42,32,0.25);
  animation:tabMenuSubir .22s ease;
}
@keyframes tabMenuSubir{ from{ transform:translateY(24px); opacity:.6; } to{ transform:translateY(0); opacity:1; } }
.tab-menu-cabo{ width:36px; height:4px; border-radius:100px; background:rgba(248,245,238,.35); margin:0 auto 14px; }
.tab-menu-topo{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px 4px; }
.tab-menu-titulo{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(248,245,238,.6); }
.tab-menu-fechar{
  width:32px; height:32px; margin-top:0; flex-shrink:0; border-radius:50%;
  background:none; border:none; color:var(--card-resumo); font-size:1.4rem; line-height:1; cursor:pointer;
}
.tab-menu-fechar:hover{ background:rgba(248,245,238,.12); transform:none; box-shadow:none; }
.tab-menu-lista{ display:flex; flex-direction:column; gap:4px; padding-bottom:6px; }
/* Itens da lista reaproveitam o mesmo layout de linha (ícone + texto lado
   a lado) já usado na sidebar desktop, e a MESMA paleta: a gaveta sobe da
   barra inferior e usa o oliva chapado dela (--oliva-1), não o gradiente
   da área médica — assim lê como extensão da barra, não como outra
   superfície. Espaçamento generoso: item de lista de verdade, não uma
   versão espremida da barra. */
.tab-menu-lista .tab-btn{
  flex-direction:row; align-items:center; gap:14px; width:100%;
  padding:14px 12px; border-radius:12px; text-align:left;
  font-size:0.98rem; font-weight:700; letter-spacing:0.01em; text-transform:none;
  color:var(--card-resumo); opacity:1; white-space:normal; border-bottom:none;
}
.tab-menu-lista .tab-btn svg{ width:20px; height:20px; opacity:.75; flex-shrink:0; }
.tab-menu-lista .tab-btn:hover{ background:rgba(248,245,238,.10); }
/* Mesmo realce do item ativo da sidebar da equipe (app.css): creme a 16%,
   não a sálvia clara, que sobre oliva vira quase branco. */
.tab-menu-lista .tab-btn.active{ background:rgba(245,242,237,.16); border-radius:12px; }
.tab-menu-lista .tab-btn-embreve{
  opacity:.5; cursor:default; pointer-events:none; align-items:flex-start;
}
.tab-menu-lista .tab-btn-embreve .tab-item-texto{ display:flex; flex-direction:column; gap:3px; }
.tab-menu-lista .tab-badge-embreve{
  display:inline-block; width:fit-content; font-size:0.6rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; background:rgba(248,245,238,.16); color:var(--card-resumo); border-radius:100px; padding:2px 6px;
}

@media (min-width:1024px){
  /* Reforço só de CSS (independente do JS já esconder/reorganizar): a
     partir daqui a barra nunca deve mostrar "Menu" nem o drawer — a
     sidebar sempre lista tudo, sem reorganização nenhuma. */
  .tab-btn-menu, .tab-menu-overlay{ display:none !important; }
  .tab-bar{
    top:0; right:auto; bottom:0; width:var(--sidebar-w);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:28px 12px 20px; gap:3px;
    border-top:none; border-right:1px solid var(--oliva-1);
    overflow-x:visible; overflow-y:auto;
    background-color:var(--oliva-1);
  }
  .tab-btn{
    width:100%; text-align:left; padding:10px 12px; border-radius:10px;
    font-size:0.88rem; font-weight:700; letter-spacing:0.01em; text-transform:none;
    border-bottom:none; justify-content:flex-start;
    flex-direction:row; gap:10px; white-space:normal;
    align-items:flex-start;
  }
  .tab-btn svg{ width:16px; height:16px; opacity:.8; flex-shrink:0; margin-top:2px; }
  .tab-btn span{ line-height:1.3; }
  .tab-btn:hover:not(.active){ background:rgba(248,245,238,.12); }
  .tab-btn.active{
    background:var(--salvia-1);
    border-bottom:none;
    color:var(--ink-resumo);
    border-radius:10px;
  }
  .tab-btn.active svg{ opacity:1; }
  .tab-separador{
    height:1px; background:rgba(248,245,238,.2); margin:10px 0;
  }
  /* Em breve: ícone + coluna (nome + badge) */
  .tab-btn-embreve{
    opacity:.45; cursor:default; pointer-events:none;
    flex-direction:row; align-items:flex-start;
  }
  .tab-btn-embreve .tab-item-texto{
    display:flex; flex-direction:column; gap:3px;
  }
  .tab-badge-embreve{
    display:inline-block; width:fit-content;
    font-size:0.6rem; font-weight:800; letter-spacing:0.06em;
    text-transform:uppercase; background:rgba(248,245,238,.18);
    color:var(--card); border-radius:100px; padding:2px 6px;
  }
}

/* Identidade da marca dentro da sidebar — some no mobile (a barra de baixo
   já basta ali); reaparece fixa no topo da sidebar desktop. */
.sidebar-brand, .sidebar-foot{ display:none; }
@media (min-width:1024px){
  .sidebar-brand{
    display:block; position:fixed; top:0; left:0; width:var(--sidebar-w); z-index:41;
    padding:26px 20px 16px; pointer-events:none;
  }
  .sidebar-brand-nome{ font-family:var(--serif); font-size:1.28rem; font-weight:700; line-height:1.3; color:var(--card); }
  .sidebar-brand-nome em{ font-style:italic; font-weight:500; color:var(--salvia-1); }
  .sidebar-brand-sub{ font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(248,245,238,.55); margin-top:6px; }
  .tab-bar{
    padding:112px 16px 20px; /* espaço reservado para a marca fixa acima */
  }
  .sidebar-foot{
    display:block;
    position:fixed; bottom:0; left:0; width:var(--sidebar-w); z-index:41;
    padding:14px 18px 20px; pointer-events:auto;
  }
  .sidebar-foot .sf-item{ display:flex; align-items:center; gap:9px; padding:7px 4px; font-size:0.8rem; font-weight:700; color:rgba(248,245,238,.55); text-decoration:none; }
  .sidebar-foot .sf-item svg{ width:14px; height:14px; stroke:currentColor; opacity:.8; flex-shrink:0; }
}


/* ── PANELS ── */
.tab-panel { display:none; padding:0 0 40px; animation:fadeUp .3s ease; }
.tab-panel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Main area: fundo escuro (background do body) — apenas os cards têm fundo claro */
.main-area{
  background: transparent;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* ── SECTIONS ── */
.section { padding-top:32px; padding-left:18px; padding-right:18px; max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .section{ padding-left:36px; padding-right:36px; } }
.sec-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.sec-rule { flex:1; height:1px; background:rgba(248,245,238,.16); }
.sec-label { font-size:0.58rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(248,245,238,.6); }
/* Último degrau da escada — ver o comentário em .aba-titulo. */
/* ══════════════════════════════════════════════════════════
   TÍTULOS — uma regra só para o portal inteiro
   ══════════════════════════════════════════════════════════
   Antes havia quatro pesos diferentes (400, 500, 600, 700), dois pesos de
   itálico (400 e 500), um título em Raleway no meio de todos em Playfair,
   e o itálico de um deles em verde enquanto todos os outros eram oliva.
   Nada disso era decisão: era acúmulo.

   O padrão, daqui em diante:

     família   Playfair Display (var(--serif)) em TODO título
     peso      600 — 700 é exclusivo do nome da paciente (header h1),
               que é o único nível acima de qualquer título de página
     <em>      sempre 400, itálico, cor var(--oliva-1)

   O <em> é a assinatura da identidade ("Saúde metabólica", "Bem-estar"):
   itálico leve sobre romano firme. Com peso 500 essa diferença some.

   Os TAMANHOS continuam variando, e devem: é neles que a hierarquia
   (nome > página > seção > card) se expressa. Ver a escada em
   .aba-titulo.
   ══════════════════════════════════════════════════════════ */
.sec-title { font-family:var(--serif); font-size:clamp(1.15rem,3.6vw,1.7rem); font-weight:600; line-height:1.15; color:var(--offwhite-1); margin-bottom:22px; }
.sec-title em { font-style:italic; font-weight:400; color:var(--oliva-1); }

/* ── PANEL CARD ── */
.panel { background:var(--card); border:1px solid rgba(184,155,82,.14); border-radius:18px; padding:22px 20px; margin-bottom:14px; box-shadow:0 15px 40px rgba(6,42,52,.14); transition:box-shadow .25s ease, transform .25s ease; animation:card-fade-in .4s ease both; }
.panel:hover{ box-shadow:0 18px 46px rgba(6,42,52,.18); }
@keyframes card-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.historico-card{
  background:var(--card); border:1px solid rgba(184,155,82,.14); border-radius:18px;
  padding:6px; box-shadow:0 15px 40px rgba(6,42,52,.14); overflow-x:auto;
}

/* ══════════════════════════════════════════════════════════
   CHECK-IN SEMANAL (redesign creme/oliva — irmã do Resumo, da
   Composição Corporal e dos Indicadores de Saúde). Prefixo .ci-*.
   Breakpoint 1024px, o mesmo do resto do portal.

   REGRA DE PRODUTO desta aba: é registro, não avaliação. Nenhuma
   resposta ganha cor, selo ou ícone de aprovação/reprovação —
   nem as escalas, nem os chips, nem a legenda da ansiedade (que
   antes vinha em âmbar e sugeria que "alta" era um problema).
   O oliva marca só o que está SELECIONADO, nunca o que é "bom".
   A leitura clínica é da médica, em outra tela.

   TOM: conversa, não formulário clínico. Os rótulos são perguntas
   inteiras ("Como foi seu sono nesta semana?"), não itens de teste.

   CONTRASTE: texto secundário aqui é --marrom-1, nunca --oliva-2.
   O oliva claro sobre card/creme fica em ~3,3:1 — abaixo do AA que o
   brief pede, e esta tela é quase toda texto pequeno. É também o que
   Composição Corporal e Indicadores já fazem: lá o --oliva-2 aparece
   só como cor de borda. O oliva claro segue no sistema, só não
   carrega texto.
   ══════════════════════════════════════════════════════════ */
#tab-checkin .panel-inner{ max-width:760px; margin:0 auto; padding:0 18px 8px; }
@media (min-width:1024px){ #tab-checkin .panel-inner{ padding:0 36px 8px; } }

/* Estados vazios da aba: o ::before global reserva 150px pra uma ilustração
   que esta aba não tem — aqui viraria um buraco em branco no meio do card. */
#tab-checkin .empty-state{ color:var(--marrom-1); font-weight:500; font-style:italic; padding:14px 16px; }
#tab-checkin .empty-state::before{ display:none; }

/* ── Acolhimento ──
   Sem "Olá, <nome>": o cabeçalho do portal já saúda a paciente uma vez, e
   repetir logo abaixo soava como duas boas-vindas na mesma tela. */
/* Alinhado à esquerda como as outras abas (.aba-cabecalho em Treinos,
   Minha Jornada e Indicadores). Era centralizado porque o bloco antigo
   era um parágrafo de acolhimento solto; agora é o mesmo cabeçalho de
   página das demais, e centralizar só aqui quebrava a leitura. A etiqueta
   da semana (.ci-semana-label) continua centralizada — ela é um selo, não
   texto corrido. */
.ci-acolhimento{ padding:34px 0 6px; }
.ci-acolhimento .ci-semana-label{ margin-left:auto; margin-right:auto; }
.ci-semana-label{
  display:inline-block; margin-top:18px; background:var(--salvia-2); border:none;
  color:var(--marrom-1); font-size:11px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; border-radius:100px; padding:8px 18px;
}
.ci-aviso-enviado{
  display:inline-block; margin-top:12px; background:rgba(74,100,56,0.09);
  border:1px solid rgba(74,100,56,0.26); border-radius:100px; padding:7px 16px;
  font-size:12px; font-weight:600; color:var(--ok-resumo);
}

/* ── Blocos do formulário ── */
.ci-bloco{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:28px 32px; margin-bottom:20px;
}
.ci-bloco-titulo{
  font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.2;
  color:var(--ink-resumo); margin-bottom:20px;
}
.ci-bloco-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }

/* ── Escalas ──
   1 a 10, sem o 0: a paciente pediu a escala começando em 1, e 10 botões
   fecham exatamente 2 fileiras de 5 — nada de botão órfão na quebra.
   Grade explícita em vez de flex-wrap justamente por isso. */
.ci-escala-grupo{ display:flex; flex-direction:column; gap:22px; }
.ci-escala-item{ display:flex; flex-direction:column; }
/* Legenda na MESMA linha do título da pergunta: economiza uma linha por
   pergunta, que numa tela de 4 perguntas é meia dobra de rolagem no celular. */
.ci-escala-cabecalho{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:12px; }
.ci-escala-label{
  margin:0; font-size:12px; font-weight:700; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--ink-resumo);
}
/* .ci-escala-legenda-alerta existe só por compatibilidade com o HTML: a
   legenda da ansiedade é idêntica às outras (ver REGRA DE PRODUTO no topo). */
.ci-escala-legenda,
.ci-escala-legenda-alerta{
  font-size:11px; font-weight:400; font-style:italic; letter-spacing:0;
  text-transform:none; color:var(--marrom-1);
}
.ci-escala-btns{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.ci-escala-btn{
  display:flex; align-items:center; justify-content:center;
  width:auto; height:auto; margin:0; padding:9px 4px; border-radius:9px;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  color:var(--ink-resumo); font-family:var(--sans); font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ci-escala-btn:hover{
  background:var(--salvia-2); border-color:var(--salvia-1); color:var(--oliva-1);
  transform:none; box-shadow:none;
}
.ci-escala-btn.selecionado{ background:var(--oliva-1); border-color:var(--oliva-1); color:var(--card-resumo); }

/* ── Chips de sintomas ── */
.ci-campo-grupo{ margin-bottom:18px; }
.ci-campo-grupo:last-child{ margin-bottom:0; }
.ci-campo-label{
  display:block; margin:0 0 10px; font-size:11px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--marrom-1);
}
/* "(múltipla escolha)" — avisa que aquele grupo aceita mais de uma resposta,
   já que todos os outros aceitam só uma. */
.ci-campo-label-nota{ font-weight:500; font-style:italic; text-transform:none; letter-spacing:0; }
.ci-chips{ display:flex; gap:8px; flex-wrap:wrap; }
/* Só o bloco Corpo e sintomas — visual apenas, o valor salvo no banco
   continua com a grafia original (data-valor não muda). */
#ci-bloco-corpo-sintomas .ci-chip{ text-transform:uppercase; letter-spacing:0.02em; }
.ci-chip{
  width:auto; height:auto; margin:0; padding:8px 16px; border-radius:100px;
  background:var(--card-resumo); border:1px solid var(--salvia-1); color:var(--marrom-1);
  font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ci-chip:hover{
  background:var(--salvia-2); border-color:var(--salvia-1); color:var(--oliva-1);
  transform:none; box-shadow:none;
}
.ci-chip.selecionado{ background:var(--oliva-1); border-color:var(--oliva-1); color:var(--card-resumo); }

/* ── Observações ── */
.ci-textarea{
  width:100%; min-height:70px; background:var(--creme-bg);
  border:1px solid var(--hairline-resumo); border-radius:10px; padding:14px 16px;
  color:var(--ink-resumo); font-family:var(--sans); font-size:13px; line-height:1.6; resize:vertical;
}
/* O placeholder é itálico e marrom (não o cinza-claro do mock): sobre creme
   aquele tom dava ~2:1 de contraste e o brief pede AA em toda a tela. O
   itálico é o que separa placeholder de texto digitado, não o contraste. */
.ci-textarea::placeholder{ color:var(--marrom-1); font-style:italic; opacity:1; }
.ci-textarea:focus{ outline:none; border-color:var(--salvia-1); box-shadow:0 0 0 3px rgba(148,140,99,.14); }

/* ── Gravar em vez de digitar ──
   Fica ABAIXO do textarea e num tom mais leve: gravar é uma alternativa, não
   o caminho principal. Se lesse com o mesmo peso do campo de texto, viraria
   uma decisão a tomar toda semana. */
.ci-audio{ margin-top:12px; }
.ci-audio-btn{
  width:auto; margin-top:0; padding:9px 16px; border-radius:8px;
  background:var(--card-resumo); border:1px solid var(--salvia-1); color:var(--oliva-1);
  font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.ci-audio-btn:hover{ background:var(--salvia-2); }
.ci-audio-btn--fraco{ color:var(--marrom-1); font-weight:500; }
/* O botão de parar é o único em terracota da tela: é a ação com hora certa,
   e a paciente precisa achá-lo sem procurar enquanto fala. */
.ci-audio-btn--parar{ background:#A33A2A; border-color:#A33A2A; color:var(--card-resumo); }
.ci-audio-btn--parar:hover{ background:#8C3123; }
.ci-audio-icone{ color:#A33A2A; font-size:11px; line-height:1; }
.ci-audio-dica{
  display:block; margin-top:7px; font-size:11.5px; font-style:italic;
  color:var(--marrom-1); line-height:1.5;
}

.ci-audio-gravando{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.ci-audio-pulso{
  width:9px; height:9px; border-radius:50%; background:#A33A2A; flex-shrink:0;
  animation:ci-audio-pisca 1.4s ease-in-out infinite;
}
@keyframes ci-audio-pisca{ 0%,100%{opacity:1} 50%{opacity:.25} }
/* Quem desliga animação no sistema não perde informação: o ponto continua
   visível, só para de piscar. O cronômetro é que diz que está gravando. */
@media (prefers-reduced-motion: reduce){ .ci-audio-pulso{ animation:none; } }
.ci-audio-tempo{
  font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink-resumo);
  font-variant-numeric:tabular-nums;
}
.ci-audio-limite{ font-size:11.5px; color:var(--marrom-1); }
/* Perto do teto o cronômetro muda de cor — aviso antes do corte, não depois. */
.ci-audio-gravando.perto-do-limite .ci-audio-tempo{ color:#A33A2A; }

.ci-audio-previa{ margin-top:4px; }
.ci-audio-player{ width:100%; max-width:340px; display:block; }
.ci-audio-previa-acoes{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

.ci-audio-status{
  margin-top:10px; font-size:12px; line-height:1.5; color:var(--marrom-1);
  padding:10px 12px; border-radius:8px; background:var(--creme-bg);
  border-left:3px solid var(--salvia-1);
}
.ci-audio-status--erro{ background:#FBEEEB; border-left-color:#A33A2A; color:#7A2A1D; }
.ci-audio-status-acoes{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.ci-audio-status-link{
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:12px; font-weight:700; color:var(--oliva-1); text-decoration:underline;
}

.ci-audio-lista{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.ci-audio-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:8px;
  font-size:12px; color:var(--marrom-1);
}
.ci-audio-item-nome{ flex:1; min-width:0; color:var(--ink-resumo); }
.ci-audio-item-remover{
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:11.5px; font-weight:600; color:var(--marrom-1); text-decoration:underline; flex-shrink:0;
}
.ci-audio-item-remover:hover{ color:#A33A2A; }

@media (max-width:640px){
  .ci-audio-btn{ padding:11px 16px; font-size:13px; }
  .ci-audio-player{ max-width:100%; }
  .ci-audio-previa-acoes .ci-audio-btn{ flex:1; justify-content:center; }
}

/* ── Bloco opcional (wearable) ──
   Tratamento deliberadamente mais leve que os blocos obrigatórios: fundo
   quase-branco, borda TRACEJADA (nunca sólida) e título em oliva claro em vez
   do oliva forte — o bloco precisa ler como "extra" antes mesmo do selo. */
.ci-bloco--opcional{ background:#FBF9F4; border:1px dashed var(--salvia-1); }
.ci-bloco-cabecalho{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ci-bloco--opcional .ci-bloco-titulo{ margin-bottom:0; font-size:17px; color:var(--marrom-1); }
.ci-selo-opcional{
  font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--marrom-1); background:var(--salvia-2); padding:3px 10px; border-radius:100px;
}
/* Comentário, não instrução: itálico e discreto — mas em marrom, não no
   cinza-claro do mock, pelo mesmo motivo de contraste do placeholder. */
.ci-wearable-nota{ font-size:11px; font-style:italic; color:var(--marrom-1); line-height:1.5; margin-bottom:10px; }
.ci-wearable-input{ display:none; }
.ci-wearable-trigger{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:110px; margin:0; padding:16px; cursor:pointer;
  background:var(--card-resumo); border:1px dashed var(--salvia-1); border-radius:10px;
  color:var(--marrom-1); font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:0; text-transform:none; text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ci-wearable-trigger:hover,
.ci-wearable-trigger.arrastando{ background:var(--salvia-2); border-color:var(--oliva-2); color:var(--oliva-1); }
.ci-wearable-trigger-toque{ display:none; }
.ci-wearable-preview-wrap{ display:none; align-items:center; gap:14px; }
.ci-wearable-thumb{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--hairline-resumo); flex-shrink:0; }
.ci-wearable-nome{ flex:1; min-width:0; font-size:12.5px; color:var(--marrom-1); word-break:break-all; }
.ci-wearable-remover{
  width:auto; height:auto; margin:0; padding:0; flex-shrink:0;
  background:none; border:none; font-family:var(--sans); font-size:12px; font-weight:600;
  color:var(--oliva-1); text-decoration:underline; cursor:pointer;
}
.ci-wearable-remover:hover{ color:#5C5535; transform:none; box-shadow:none; }

/* ── Ações (CTA primário oliva sólido, secundário só contorno) ── */
.ci-acoes{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
#btn-revisar-checkin,
#btn-confirmar-checkin{
  width:auto; height:auto; margin:0; padding:14px 36px; border:none; border-radius:10px;
  background:var(--oliva-1); color:var(--card-resumo);
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0.01em;
}
#btn-revisar-checkin:hover,
#btn-confirmar-checkin:hover{ background:#5C5535; transform:none; box-shadow:none; }
#btn-revisar-checkin:disabled,
#btn-confirmar-checkin:disabled{ background:var(--oliva-2); }
.ci-btn-secundario{
  width:auto; height:auto; margin:0; padding:13px 28px; border-radius:10px;
  background:transparent; border:1px solid var(--salvia-1); color:var(--marrom-1);
  font-family:var(--sans); font-size:13px; font-weight:600;
}
.ci-btn-secundario:hover{ background:var(--salvia-2); color:var(--oliva-1); transform:none; box-shadow:none; }
.ci-btn-primario-compacto{
  width:auto; height:auto; margin:0; padding:13px 22px; border:none; border-radius:10px;
  background:var(--oliva-1); color:var(--card-resumo);
  font-family:var(--sans); font-size:13px; font-weight:600;
}
.ci-btn-primario-compacto:hover{ background:#5C5535; transform:none; box-shadow:none; }
.ci-btn-primario-compacto:disabled{ background:var(--oliva-2); }

/* ── Revisão antes de enviar ── */
.ci-revisao-cabecalho{ text-align:center; margin-bottom:26px; }
.ci-revisao-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:8px; }
.ci-revisao-titulo{ font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.2; color:var(--ink-resumo); margin:0; }
.ci-revisao-titulo em{ font-style:italic; font-weight:500; color:var(--oliva-1); }
.ci-revisao-semana{ margin-top:8px; font-size:12.5px; color:var(--marrom-1); }
/* Um card por bloco do formulário, cada um com seu "editar" — o link volta ao
   formulário JÁ na altura do bloco correspondente, em vez de largar a paciente
   no topo pra procurar o que queria mudar. */
.ci-revisao-card{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:22px 26px; margin-bottom:14px;
}
.ci-revisao-card-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ci-revisao-card-nome{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--oliva-1); }
.ci-revisao-card--opcional .ci-revisao-card-nome{ color:var(--marrom-1); }
.ci-revisao-card-nome-nota{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--marrom-1); }
.ci-revisao-editar{
  width:auto; height:auto; margin:0; padding:0; background:none; border:none;
  font-family:var(--sans); font-size:11px; font-weight:600; color:var(--oliva-1);
  text-decoration:underline; cursor:pointer; flex-shrink:0;
}
.ci-revisao-editar:hover{ color:#5C5535; transform:none; box-shadow:none; }

/* ── Linhas rótulo/valor (revisão, estado enviado e histórico) ── */
.ci-resumo-conteudo{ font-size:12.5px; color:var(--ink-resumo); line-height:1.6; }
.ci-resumo-linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-top:1px solid var(--hairline-resumo);
}
.ci-resumo-linha:first-child{ border-top:none; padding-top:0; }
.ci-resumo-chave{ flex-shrink:0; font-size:12.5px; font-weight:500; color:var(--marrom-1); }
.ci-resumo-valor{ min-width:0; font-size:12.5px; font-weight:600; color:var(--ink-resumo); text-align:right; }
/* Nota de escala com o mesmo tratamento de número das outras abas: serifada,
   com o "/5" pequeno e discreto do lado. */
.ci-resumo-valor--nota{ font-family:var(--serif); font-size:16px; font-weight:400; }
.ci-resumo-max{ font-family:var(--sans); font-size:11px; font-weight:400; color:var(--marrom-1); }
.ci-resumo-texto{ font-size:13px; color:var(--ink-resumo); line-height:1.6; }
.ci-resumo-wearable{ display:flex; align-items:center; gap:12px; }
.ci-resumo-wearable-thumb{ width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--hairline-resumo); flex-shrink:0; }
.ci-resumo-wearable-texto{ font-size:12px; color:var(--marrom-1); line-height:1.5; }

/* ── Estado enviado ── */
.ci-sucesso{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-left:3px solid var(--ok-resumo); border-radius:18px; padding:20px 24px; margin-bottom:14px;
}
.ci-sucesso svg{ width:22px; height:22px; stroke:var(--ok-resumo); flex-shrink:0; margin-top:2px; }
.ci-sucesso-titulo{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink-resumo); margin-bottom:3px; }
.ci-sucesso-sub{ font-size:12.5px; color:var(--marrom-1); }
#checkin-resumo-enviado{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:22px 26px;
}
/* Hoje o resumo pós-envio vive no modal de sucesso e este bloco fica vazio —
   sem isto ele apareceria como um card em branco se voltasse a ser exibido. */
#checkin-resumo-enviado:empty{ display:none; }

/* ── Modal de sucesso ──
   Mesma estrutura de card da revisão, com o tom trocado para "recebido":
   o verde aparece só no ícone (é confirmação de recebimento do envio, não
   avaliação das respostas), e o resumo repete as linhas rótulo/valor. */
.ci-modal{
  position:fixed; inset:0; z-index:900; padding:20px;
  align-items:center; justify-content:center;
  background:rgba(46,42,32,0.45); backdrop-filter:blur(4px);
}
/* mostrarMsgDash/mostrarConfirmDash agora podem abrir por cima de outro
   modal já aberto (ex.: erro de validação do formulário de treino, que fica
   aberto atrás) — z-index mais alto garante que fiquem sempre visíveis,
   independente da ordem no DOM. */
#dash-modal-msg, #dash-modal-confirm{ z-index:920;
}
/* Cabeçalho e botão fixos, resumo rolando no meio: uma observação longa não
   pode empurrar o "Fechar" pra fora da tela do celular. */
.ci-modal-card{
  display:flex; flex-direction:column; max-height:85vh;
  width:100%; max-width:420px; background:var(--card-resumo);
  border:1px solid var(--hairline-resumo); border-radius:18px; padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(46,42,32,0.22);
}
.ci-modal-topo{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-shrink:0; }
.ci-modal-icone{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  background:rgba(74,100,56,0.10); color:var(--ok-resumo);
}
.ci-modal-icone svg{ width:22px; height:22px; }
.ci-modal-titulo{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink-resumo); line-height:1.25; }
.ci-modal-sub{ margin-top:3px; font-size:12px; color:var(--marrom-1); line-height:1.5; }
.ci-modal-resumo{ min-height:0; overflow-y:auto; padding-top:14px; margin-bottom:18px; border-top:1px solid var(--hairline-resumo); }
/* Texto corrido (observação, resumo do wearable) não cabe numa linha
   rótulo/valor: alinhado à direita, uma frase inteira fica ilegível. Vira um
   bloco de largura cheia, como no card de observações da revisão. */
.ci-modal-bloco{ margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline-resumo); }
.ci-modal-bloco-titulo{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:5px; }
.ci-modal-bloco-texto{ font-size:12.5px; color:var(--ink-resumo); line-height:1.6; }
.ci-modal-fechar{
  flex-shrink:0;
  width:100%; height:auto; margin:0; padding:13px; border:none; border-radius:10px;
  background:var(--oliva-1); color:var(--card-resumo);
  font-family:var(--sans); font-size:14px; font-weight:600;
}
.ci-modal-fechar:hover{ background:#5C5535; transform:none; box-shadow:none; }

/* Variantes do ícone circular do topo — mesmo ci-modal-icone, cor conforme o
   tipo de mensagem (usado por mostrarMsgDash/mostrarConfirmDash, não só pelo
   modal de sucesso do check-in). */
.ci-modal-icone.erro{ background:rgba(156,74,54,0.10); color:var(--alert-resumo); }
.ci-modal-icone.alerta{ background:rgba(138,94,30,0.10); color:var(--warn-resumo); }
.ci-modal-icone.info{ background:rgba(148,140,99,0.14); color:var(--oliva-2); }
.ci-modal-icone.carregando{
  background:transparent; border:2.5px solid rgba(148,140,99,0.22); border-top-color:var(--oliva-2);
  animation:spin 0.8s linear infinite;
}

/* Linhas de dado (arquivo/tamanho/progresso) dentro do modal de upload —
   mesma estrutura rótulo à esquerda/valor à direita usada em cards de
   comparação por toda a aba, só que dentro do card do modal. */
.ci-modal-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:12.5px; color:var(--marrom-1); }
.ci-modal-linha strong{ color:var(--ink-resumo); font-weight:600; text-align:right; }

.ci-modal-anexo-preview{
  margin:2px 0 10px; border-radius:12px; overflow:hidden; background:var(--creme-bg);
  border:1px solid var(--hairline-resumo); max-height:38vh; display:flex; align-items:center; justify-content:center;
}
.ci-modal-anexo-preview img{ width:100%; max-height:38vh; object-fit:contain; display:block; }
.ci-modal-anexo-legenda{ font-size:11.5px; color:var(--marrom-1); margin-bottom:16px; text-align:center; word-break:break-all; }

/* Rodapé com dois botões (Cancelar + ação) — mesmo card, sem duplicar CSS. */
.ci-modal-botoes{ display:flex; gap:10px; flex-shrink:0; }
.ci-modal-botoes .ci-modal-fechar{ flex:1; }
.ci-modal-cancelar{
  flex:1; height:auto; margin:0; padding:13px; border-radius:10px;
  background:transparent; color:var(--marrom-1); border:1px solid var(--hairline-resumo);
  font-family:var(--sans); font-size:14px; font-weight:600;
}
.ci-modal-cancelar:hover{ background:var(--salvia-2); transform:none; box-shadow:none; }

/* ── Preencher uma semana anterior ──
   Link sublinhado discreto, nunca botão: é uma saída lateral do fluxo, não a
   ação principal da tela. */
.ci-retroativo-wrap{ text-align:center; margin-top:18px; }
.ci-retroativo-link{ font-size:12px; color:var(--oliva-1); text-decoration:underline; cursor:pointer; }
.ci-retroativo-link:hover{ color:#5C5535; }
.ci-retroativo-selecao{
  display:none; max-width:420px; margin:14px auto 0; text-align:left;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:14px; padding:18px 20px;
}
#checkin-retroativo-select{
  height:44px; background:var(--creme-bg); border:1px solid var(--hairline-resumo);
  border-radius:10px; color:var(--ink-resumo); font-family:var(--sans); font-size:13px;
}
#checkin-retroativo-select:focus{ border-color:var(--salvia-1); box-shadow:0 0 0 3px rgba(148,140,99,.14); }
.ci-retroativo-acoes{ display:flex; gap:10px; margin-top:12px; }

/* ── Histórico ── */
.ci-historico-section{ margin-top:44px; }
.ci-historico-titulo{
  font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink-resumo);
  margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--hairline-resumo);
}
.ci-historico-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
.ci-hist-item{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:14px; margin-bottom:12px; overflow:hidden;
}
.ci-hist-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; cursor:pointer; }
.ci-hist-semana{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink-resumo); }
.ci-hist-atual{ margin-left:8px; font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--marrom-1); }
/* Rótulo textual em vez de seta: diz o que o clique faz, em vez de pedir que a
   paciente deduza de um ▾. */
.ci-hist-toggle{ flex-shrink:0; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--marrom-1); }
.ci-hist-corpo{ display:none; padding:16px 22px 20px; border-top:1px solid var(--hairline-resumo); }
.ci-hist-item.aberto .ci-hist-corpo{ display:block; }
.ci-hist-eyebrow{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:8px; }
.ci-hist-notas{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px; }
.ci-hist-nota-valor{ font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink-resumo); line-height:1.1; }
.ci-hist-nota-label{ margin-top:3px; font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--marrom-1); }
.ci-hist-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ci-hist-chip{ padding:6px 14px; border-radius:100px; background:var(--salvia-2); color:var(--marrom-1); font-size:11.5px; font-weight:600; }
.ci-hist-obs{ font-size:12.5px; color:var(--ink-resumo); line-height:1.6; margin-bottom:16px; }
.ci-hist-editar-btn{
  width:auto; height:auto; margin:0; padding:0; background:none; border:none;
  font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--oliva-1);
  text-decoration:underline; cursor:pointer;
}
.ci-hist-editar-btn:hover{ background:none; color:#5C5535; transform:none; box-shadow:none; }

/* ── Mobile ── */
@media (max-width:1023px){
  #tab-checkin .panel-inner{ max-width:100%; }
  .ci-acolhimento{ padding:26px 0 4px; }
  .ci-semana-label{ margin-top:14px; font-size:9.5px; letter-spacing:0.06em; padding:7px 14px; }
  .ci-bloco{ border-radius:14px; padding:18px 16px; margin-bottom:14px; }
  .ci-bloco-titulo{ font-size:16px; margin-bottom:16px; }
  .ci-escala-grupo{ gap:18px; }
  .ci-escala-cabecalho{ gap:6px; margin-bottom:9px; }
  .ci-escala-label{ font-size:10.5px; letter-spacing:0.02em; }
  .ci-escala-legenda,
  .ci-escala-legenda-alerta{ font-size:9.5px; }
  .ci-escala-btns{ gap:5px; }
  .ci-escala-btn{ padding:8px 2px; border-radius:8px; font-size:11.5px; }
  .ci-campo-grupo{ margin-bottom:14px; }
  .ci-campo-label{ font-size:9.5px; letter-spacing:0.05em; margin-bottom:8px; }
  .ci-chips{ gap:6px; }
  .ci-chip{ padding:7px 13px; font-size:11px; }
  /* min-height em em, não em px: o campo passou a 16px por causa do zoom
     do iOS (ver o bloco de campos no fim do arquivo) e a altura fixa de
     56px cortava a terceira linha do texto de exemplo. Em em ele
     acompanha a fonte, qualquer que ela seja depois. */
  /* Quatro linhas (line-height 1.6) mais o padding e a borda. O texto de
     exemplo ocupa três linhas a 16px; a quarta é espaço para escrever sem
     o campo já nascer rolando.
     Em em, e não em px, porque a altura tem que acompanhar a fonte: o
     campo passou a 16px por causa do zoom do iOS (bloco no fim do
     arquivo) e os 56px antigos, calibrados para 12px, cortavam a terceira
     linha do exemplo — foi o que a paciente viu. */
  .ci-textarea{ min-height:calc(4 * 1.6em + 26px); padding:12px 14px; border-radius:9px; }
  .ci-bloco--opcional .ci-bloco-titulo{ font-size:14.5px; }
  .ci-selo-opcional{ font-size:8.5px; letter-spacing:0.06em; padding:2px 8px; }
  .ci-bloco-cabecalho{ gap:6px; margin-bottom:10px; }
  .ci-wearable-nota{ font-size:10px; margin-bottom:8px; }
  .ci-wearable-trigger{ min-height:80px; border-radius:9px; font-size:11.5px; }
  .ci-wearable-trigger-arraste{ display:none; }
  .ci-wearable-trigger-toque{ display:inline; }
  .ci-wearable-thumb{ width:56px; height:56px; }
  .ci-wearable-nome{ font-size:11.5px; }
  /* Primário em cima e largo, secundário abaixo: no polegar o que a paciente
     quer 9 em 10 vezes fica no caminho mais curto. column-reverse mantém a
     ordem do DOM (secundário antes) sem inverter a ordem do teclado. */
  .ci-acoes{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  #btn-revisar-checkin,
  #btn-confirmar-checkin{ width:100%; padding:14px 0; font-size:13.5px; }
  .ci-btn-secundario{ width:100%; padding:12px 0; font-size:12.5px; }
  .ci-revisao-cabecalho{ margin-bottom:20px; }
  .ci-revisao-eyebrow{ font-size:9.5px; letter-spacing:0.1em; margin-bottom:6px; }
  .ci-revisao-titulo{ font-size:21px; }
  .ci-revisao-semana{ margin-top:6px; font-size:11px; }
  .ci-revisao-card{ border-radius:14px; padding:16px 18px; margin-bottom:12px; }
  .ci-revisao-card-topo{ margin-bottom:10px; }
  .ci-revisao-card-nome{ font-size:10px; letter-spacing:0.06em; }
  .ci-revisao-editar{ font-size:10.5px; }
  .ci-resumo-linha{ padding:7px 0; gap:10px; }
  .ci-resumo-chave,
  .ci-resumo-valor{ font-size:11.5px; }
  .ci-resumo-valor--nota{ font-size:14px; }
  .ci-resumo-max{ font-size:10px; }
  .ci-resumo-texto{ font-size:12px; }
  .ci-sucesso{ border-radius:14px; padding:16px 18px; gap:12px; }
  .ci-sucesso-titulo{ font-size:15px; }
  .ci-sucesso-sub{ font-size:11.5px; }
  #checkin-resumo-enviado{ border-radius:14px; padding:16px 18px; }
  .ci-retroativo-selecao{ border-radius:12px; padding:16px; }
  .ci-historico-section{ margin-top:32px; }
  .ci-historico-titulo{ font-size:19px; margin-bottom:16px; padding-bottom:10px; }
  .ci-hist-item{ border-radius:11px; margin-bottom:10px; }
  .ci-hist-header{ padding:13px 16px; gap:10px; }
  .ci-hist-semana{ font-size:13.5px; }
  .ci-hist-toggle{ font-size:10px; letter-spacing:0.06em; }
  .ci-hist-corpo{ padding:12px 16px 16px; }
  .ci-hist-eyebrow{ font-size:9px; letter-spacing:0.08em; }
  /* 4 notas em grade fixa: com flex-wrap "Ansiedade" caía sozinha na 2ª linha. */
  .ci-hist-notas{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
  .ci-hist-nota-valor{ font-size:15px; }
  .ci-hist-nota-label{ font-size:8px; letter-spacing:0.04em; }
  .ci-hist-chips{ gap:6px; margin-bottom:14px; }
  .ci-hist-chip{ padding:5px 11px; font-size:10.5px; }
  .ci-hist-obs{ font-size:11.5px; margin-bottom:12px; }
  .ci-hist-editar-btn{ font-size:11px; }
}
/* ═══════ /CHECK-IN ═══════ */

/* ══════════════════════════════════════════════════════════
   EVOLUÇÃO FOTOGRÁFICA (redesign creme/oliva — irmã de Resumo,
   Composição Corporal, Indicadores e Check-in). Prefixo .fotos-*.
   Breakpoint 1024px, o mesmo do resto do portal.

   REGRA DE PRODUTO desta aba: é registro, não avaliação. Nunca
   usar "antes/depois", percentual ou selo de progresso — só as
   datas. Os selos de ângulo dizem se a foto do dia existe, não
   se a paciente está indo bem.

   PRIVACIDADE: são fotos do corpo da paciente. O aviso fica no
   topo, sempre visível, com o mesmo cuidado tipográfico do resto
   da tela — nunca cinza pequeno de rodapé — e o "excluir" está
   sempre a um clique, direto sobre a foto.

   CONTRASTE: texto secundário em --marrom-1, nunca --oliva-2
   (~3,3:1 sobre card) nem o #B7AF92 do mock (~2,1:1). Mesma
   decisão já aplicada no Check-in e nas abas irmãs.
   ══════════════════════════════════════════════════════════ */
#tab-fotos .fotos-conteudo{ max-width:980px; }

/* ── Cabeçalho + aviso de privacidade ── */
.fotos-cabecalho{ margin-bottom:28px; }
.fotos-eyebrow{
  display:block; font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:8px;
}
.fotos-titulo{
  font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.3;
  color:var(--ink-resumo); margin:0 0 18px; max-width:640px;
}
.fotos-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
/* Card de aviso, não nota de rodapé: a paciente precisa ver a garantia de
   privacidade antes de decidir enviar a primeira foto. Largura total da
   página (sem max-width próprio) — largo e baixo, não uma coluna estreita
   e alta —, com o ícone centralizado na linha em vez de alinhado ao topo. */
.fotos-privacidade{
  display:flex; align-items:center; gap:12px; margin-top:36px;
  background:var(--salvia-2); border-radius:12px; padding:13px 20px;
}
.fotos-privacidade svg{ flex-shrink:0; width:17px; height:17px; }
.fotos-privacidade-titulo{ font-family:var(--serif); font-size:15px; font-weight:600; color:#5C5535; margin-bottom:3px; }
.fotos-privacidade-texto{ font-size:12.5px; color:var(--marrom-1); line-height:1.55; }

.fotos-data-campo{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin-top:16px;
}
.fotos-data-campo label{
  font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--marrom-1);
}
.fotos-data-campo input[type="date"]{
  width:auto; height:38px; background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:8px; padding:0 12px; color:var(--ink-resumo); font-size:13px;
}
.fotos-data-campo input[type="date"]:focus{ outline:none; border-color:var(--salvia-1); box-shadow:0 0 0 3px rgba(148,140,99,.14); }
.fotos-data-campo-nota{ font-size:11.5px; font-style:italic; color:var(--marrom-1); opacity:.8; }
@media (max-width:640px){ .fotos-data-campo-nota{ width:100%; } }

/* ── Captura guiada: 3 ângulos independentes, envio parcial permitido ── */
.fotos-captura-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px; }
.fotos-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:24px 22px;
}
/* Enviada hoje: a borda escurece um passo (sálvia fechada, entre o hairline e
   o oliva claro) e o card vira duas colunas com a miniatura à esquerda.
   Diferença de ESTADO, não de julgamento — nada de verde de "sucesso". */
.fotos-card--enviada{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"visual titulo" "visual corpo";
  gap:0 16px; align-items:center; text-align:left;
  border-color:#C9C2A0; padding:20px;
  /* Os 3 cards da grade esticam pra altura do mais alto (o card pendente, com
     a silhueta grande) — sem align-content:center aqui, as duas linhas auto
     deste card esticavam junto e abriam um vão enorme entre título e conteúdo
     em vez de ficarem compactas e centralizadas no meio do espaço sobrando. */
  align-content:center;
}
.fotos-card-titulo{ grid-area:titulo; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink-resumo); margin-bottom:14px; }
.fotos-card--enviada .fotos-card-titulo{ font-size:16px; margin-bottom:6px; }
.fotos-card-visual{ grid-area:visual; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.fotos-card--enviada .fotos-card-visual{ margin-bottom:0; }
.fotos-card-corpo{ grid-area:corpo; width:100%; min-width:0; }

/* Silhueta-guia: traço único em oliva claro, sem preenchimento e sem contorno
   de manequim. Elementos secundários (coluna, cabelo, escápulas) sempre em
   sálvia, para o desenho não competir com o conteúdo. */
.fotos-silhueta{ height:152px; display:flex; align-items:center; justify-content:center; }
.fotos-silhueta svg{ width:88px; height:152px; }
.fotos-card--enviada .fotos-silhueta{ display:none; }

.fotos-card-instrucao{ font-size:11px; font-style:italic; color:var(--marrom-1); line-height:1.5; margin-bottom:14px; }
.fotos-card--enviada .fotos-card-instrucao{ display:none; }

/* Selo de estado do dia. Dois tons do mesmo desenho: pendente em creme com
   ponto sálvia, enviada em sálvia clara com ponto oliva. */
.fotos-selo{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  background:var(--creme-bg); border-radius:100px; padding:6px 14px;
}
.fotos-selo::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--salvia-1); flex-shrink:0; }
.fotos-selo span{ font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--marrom-1); }
.fotos-card--enviada .fotos-selo{ background:var(--salvia-2); padding:4px 11px; margin-bottom:8px; }
.fotos-card--enviada .fotos-selo::before{ width:5px; height:5px; background:var(--oliva-1); }
.fotos-card--enviada .fotos-selo span{ font-size:9.5px; font-weight:700; color:#5C5535; }

.fotos-input{ display:none; }
.fotos-trigger{
  display:block; width:100%; margin:0; cursor:pointer; box-sizing:border-box;
  background:transparent; border:1px solid var(--oliva-1); border-radius:9px;
  padding:11px 0; text-align:center; text-transform:none;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0.04em; color:var(--oliva-1);
  transition:background .15s ease, color .15s ease;
}
.fotos-trigger:hover{ background:var(--oliva-1); color:var(--card-resumo); }
.fotos-card--enviada .fotos-trigger{ display:none; }

/* Prévia local do arquivo recém-escolhido + miniatura do que já foi enviado */
.fotos-preview-wrap{ display:none; }
.fotos-card--enviada .fotos-preview-wrap{ display:block; }
.fotos-preview-img{
  width:64px; height:84px; object-fit:cover; display:block;
  border-radius:9px; border:1px solid var(--hairline-resumo);
}
.fotos-preview-erro{
  width:64px; padding:10px 6px; font-size:9px; font-style:italic; line-height:1.35;
  color:var(--marrom-1); text-align:center;
  border:1px dashed var(--salvia-1); border-radius:9px;
}
/* Ações do card já enviado. "Substituir" existe porque a paciente costuma
   refazer a foto no mesmo dia; "excluir" fica em alerta por ser destrutivo. */
.fotos-card-acoes{ display:none; gap:12px; }
.fotos-card--enviada .fotos-card-acoes{ display:flex; }
.fotos-acao{
  width:auto; height:auto; margin:0; padding:0; background:none; border:none;
  font-family:var(--sans); font-size:11px; font-weight:600; color:var(--oliva-1);
  text-decoration:underline; cursor:pointer;
}
.fotos-acao:hover{ background:none; color:#5C5535; transform:none; box-shadow:none; }
.fotos-acao--excluir{ color:var(--alert-resumo); }
.fotos-acao--excluir:hover{ color:#7E3A2A; }

/* Botão único que sobe as 3 fotos de uma vez, em vez de cada ângulo subir
   sozinho assim que escolhido — evita 3 momentos de espera separados e dá
   pra revisar/trocar qualquer ângulo antes de qualquer upload acontecer. */
.fotos-salvar-sessao-wrap{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:-14px 0 40px; text-align:center;
}
.fotos-btn-salvar-sessao{
  width:auto; height:auto; margin:0; padding:13px 32px; border:none; border-radius:10px;
  background:var(--oliva-1); color:var(--card-resumo);
  font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:0.02em;
  cursor:pointer; transition:background .15s ease;
}
.fotos-btn-salvar-sessao:hover:not(:disabled){ background:#5C5535; }
.fotos-btn-salvar-sessao:disabled{ background:var(--salvia-1); color:var(--marrom-1); cursor:not-allowed; }
.fotos-salvar-sessao-nota{ font-size:11px; font-style:italic; color:var(--marrom-1); }

/* ── Seções (Sessões registradas / Comparar duas datas) ── */
.fotos-secao-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-bottom:1px solid var(--hairline-resumo); padding-bottom:12px; margin:40px 0 20px;
}
.fotos-timeline-titulo{ font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink-resumo); margin:0; }
.fotos-timeline-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
.fotos-secao-contagem{ font-size:11px; color:var(--marrom-1); flex-shrink:0; }

/* ── Sessões registradas ──
   Recolhidas por padrão (só o cabeçalho: data, ângulos, tempo relativo) —
   abrir a aba não deve já mostrar todas as fotos de todas as sessões de
   uma vez. Mesmo componente de accordion usado no histórico de Treinos
   (.mes-grupo-cabecalho/-seta/.aberto), por consistência. */
.fotos-sessao{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; margin-bottom:14px; overflow:hidden;
}
.fotos-sessao-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:22px 26px; background:none; border:none; cursor:pointer;
  text-align:left; color:inherit; font:inherit; height:auto; margin:0;
  transition:background .15s;
}
.fotos-sessao-head:hover{ background:rgba(228,222,208,.35); }
.fotos-sessao-data{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink-resumo); }
.fotos-sessao-angulos{ font-size:11.5px; color:var(--marrom-1); margin-left:10px; }
.fotos-sessao-relativo{ font-size:11px; color:var(--marrom-1); flex-shrink:0; }
.fotos-sessao-seta{ width:16px; height:16px; stroke:var(--marrom-1); flex-shrink:0; transition:transform .2s ease; }
.fotos-sessao-head.aberto .fotos-sessao-seta{ transform:rotate(180deg); }
.fotos-sessao-corpo{ display:none; padding:0 26px 22px; }
.fotos-sessao-corpo.aberto{ display:block; }
.fotos-sessao-thumbs{ display:flex; gap:16px; }
.fotos-thumb{ width:104px; }
.fotos-thumb-wrap{
  position:relative; width:104px; height:138px; border-radius:10px; overflow:hidden;
  background:var(--creme-bg); border:1px solid var(--hairline-resumo);
}
.fotos-thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Ângulo ausente vira moldura tracejada em vez de sumir: a linha continua
   alinhada e fica claro QUAL ângulo faltou naquela sessão. */
.fotos-thumb-ausente{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:104px; height:138px; padding:0 10px; box-sizing:border-box;
  border:1px dashed var(--salvia-1); border-radius:10px;
  font-size:10.5px; font-style:italic; color:var(--marrom-1); line-height:1.4;
}
/* Rótulo ABAIXO da miniatura, não sobreposto: sobre a foto ele tampava o
   corpo da paciente justamente na altura que ela quer ver. */
.fotos-thumb-angulo{
  margin-top:8px; text-align:center;
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--marrom-1);
}
/* Data SOBRE a própria foto, canto inferior esquerdo — diferente do rótulo
   de ângulo acima (que fica fora, embaixo): a data soltinha na cabeçalho da
   sessão passava despercebida ao rolar a lista de miniaturas. Mesmo visual
   do selo de data do modal em tela cheia (.fmc-data), só menor. */
.fotos-thumb-data{
  position:absolute; left:6px; bottom:6px; z-index:1;
  background:rgba(46,42,32,.65); backdrop-filter:blur(2px); color:var(--card-resumo);
  font-size:0.58rem; font-weight:600; padding:3px 8px; border-radius:20px;
  pointer-events:none; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fotos-thumb-excluir{
  position:absolute; top:7px; right:7px; width:24px; height:24px; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; background:rgba(253,252,250,0.94); border:1px solid var(--hairline-resumo);
}
.fotos-thumb-excluir:hover{ background:var(--card-resumo); border-color:var(--alert-resumo); transform:none; box-shadow:none; }
.fotos-thumb-excluir svg{ width:10px; height:10px; }
.fotos-thumb-carregando, .fotos-thumb-vazio{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:6px; text-align:center; line-height:1.35;
  font-size:10px; font-style:italic; color:var(--marrom-1);
}

/* Confirmação de exclusão no PRÓPRIO card, nunca em modal: a paciente
   continua vendo qual foto está prestes a apagar enquanto confirma. */
.fotos-confirmar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:18px; background:var(--creme-bg); border:1px solid var(--salvia-1);
  border-radius:11px; padding:16px 20px;
}
.fotos-confirmar-titulo{ font-size:13px; font-weight:600; color:var(--ink-resumo); margin-bottom:3px; }
.fotos-confirmar-aviso{ font-size:11.5px; color:var(--marrom-1); }
.fotos-confirmar-acoes{ display:flex; gap:10px; flex-shrink:0; }
.fotos-btn-cancelar{
  width:auto; height:auto; margin:0; padding:9px 18px; border-radius:8px;
  background:transparent; border:1px solid var(--salvia-1); color:var(--marrom-1);
  font-family:var(--sans); font-size:12px; font-weight:600;
}
.fotos-btn-cancelar:hover{ background:var(--salvia-2); color:var(--oliva-1); transform:none; box-shadow:none; }
.fotos-btn-excluir{
  width:auto; height:auto; margin:0; padding:9px 18px; border-radius:8px; border:none;
  background:var(--alert-resumo); color:var(--card-resumo);
  font-family:var(--sans); font-size:12px; font-weight:600;
}
.fotos-btn-excluir:hover{ background:#7E3A2A; transform:none; box-shadow:none; }
.fotos-btn-excluir:disabled{ opacity:.6; }

/* ── Estados vazios ── */
.fotos-vazio{
  background:var(--card-resumo); border:1px dashed var(--salvia-1);
  border-radius:18px; padding:48px 40px; text-align:center;
}
.fotos-vazio-titulo{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink-resumo); margin-bottom:8px; }
.fotos-vazio-texto{ font-size:13px; color:var(--marrom-1); line-height:1.7; max-width:440px; margin:0 auto; }
.fotos-aviso-simples{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:28px 32px; font-size:13px; font-style:italic; color:var(--marrom-1);
}

/* ── Comparar duas datas ── */
.fotos-comparacao-toolbar{ display:flex; align-items:flex-end; gap:16px; margin-bottom:28px; }
/* Botão alinhado à base dos selects (ignora a altura do rótulo acima deles) —
   mesmo raciocínio de um campo de busca com botão ao lado. */
#fotos-btn-comparar{ flex-shrink:0; }
#fotos-btn-comparar:disabled{ background:var(--salvia-1); color:var(--marrom-1); cursor:not-allowed; }
.fotos-comparacao-campo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.fotos-comparacao-campo label{
  margin:0; font-size:10px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--marrom-1);
}
.fotos-comparacao-campo select{
  width:100%; height:auto; padding:12px 16px; border-radius:9px;
  background:var(--card-resumo); border:1px solid var(--salvia-1); color:var(--ink-resumo);
  font-family:var(--sans); font-size:13px;
}
.fotos-comparacao-campo select:focus{ outline:none; border-color:var(--oliva-2); box-shadow:0 0 0 3px rgba(148,140,99,.14); }
.fotos-comparacao-linha{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo);
  border-radius:18px; padding:22px 26px; margin-bottom:14px;
}
.fotos-comparacao-angulo-label{
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--oliva-1); margin-bottom:16px;
}
.fotos-comparacao-par{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fotos-comparacao-data{ font-size:11px; color:var(--marrom-1); margin-bottom:8px; }
.fotos-data-curta{ display:none; }
/* Altura fixa nas duas colunas: com altura automática, uma foto retrato ao
   lado de uma paisagem desalinhava a comparação inteira. */
.fotos-comparacao-celula{
  position:relative; height:230px; border-radius:10px; overflow:hidden;
  background:var(--creme-bg); border:1px solid var(--hairline-resumo);
}
.fotos-comparacao-celula img{ width:100%; height:100%; object-fit:contain; display:block; }
.fotos-comparacao-vazia{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:230px; padding:0 20px; box-sizing:border-box;
  border:1px dashed var(--salvia-1); border-radius:10px;
  font-size:12px; font-style:italic; color:var(--marrom-1); line-height:1.5;
}

/* Modal de comparação em tela cheia — fundo escuro de propósito (diferente
   dos cards claros do resto da aba): é um visualizador de foto, não mais um
   card de conteúdo, e o contraste escuro faz a imagem em si ser o foco. */
.fotos-modal-comparar{
  position:fixed; inset:0; z-index:950; background:rgba(46,42,32,0.94);
  flex-direction:column; padding:18px; box-sizing:border-box;
}
.fmc-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-shrink:0; }
.fmc-angulo{
  font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--card-resumo);
  letter-spacing:0.06em; text-transform:uppercase;
}
.fmc-fechar{
  width:38px; height:38px; margin-top:0; flex-shrink:0; border-radius:50%;
  border:1px solid rgba(253,252,250,.3); background:transparent; color:var(--card-resumo);
  font-size:1.3rem; line-height:1; cursor:pointer;
}
.fmc-fechar:hover{ background:rgba(253,252,250,.12); }
.fmc-corpo{ flex:1; display:flex; align-items:center; gap:10px; min-height:0; }
.fmc-seta{
  width:44px; height:44px; margin-top:0; flex-shrink:0; border-radius:50%;
  border:1px solid rgba(253,252,250,.3); background:rgba(253,252,250,.06); color:var(--card-resumo);
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.fmc-seta:hover{ background:rgba(253,252,250,.16); }
.fmc-par{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:14px; height:100%; min-width:0; min-height:0; }
/* .fmc-coluna vira o âncora de posicionamento do selo de data — ele some do
   fluxo normal (position:absolute) e flutua sobre a foto, então .fmc-img-wrap
   passa a usar a altura inteira da coluna, sem precisar dividir espaço com
   um rótulo ao lado. */
.fmc-coluna{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; }
.fmc-data{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2;
  background:rgba(46,42,32,.65); backdrop-filter:blur(2px); color:var(--card-resumo);
  font-size:0.72rem; font-weight:600; padding:5px 11px; border-radius:20px;
  pointer-events:none; max-width:calc(100% - 20px); white-space:nowrap;
}
.fmc-data:empty{ display:none; }
.fmc-img-wrap{
  flex:1; min-height:0; border-radius:10px; overflow:hidden; background:rgba(253,252,250,.04);
  display:flex; align-items:center; justify-content:center;
}
.fmc-img-wrap img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.fmc-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; flex-shrink:0; }
.fmc-dot{ width:7px; height:7px; border-radius:50%; background:rgba(253,252,250,.3); }
.fmc-dot.ativo{ background:var(--card-resumo); }
@media (max-width:640px){
  .fmc-angulo{ font-size:0.88rem; }
  .fmc-seta{ width:34px; height:34px; font-size:1.15rem; }
  .fmc-par{ gap:6px; }
  .fmc-data{ font-size:0.62rem; padding:4px 9px; top:6px; }
}

/* ── Modal de corte (privacidade): mesmo card creme/oliva dos outros
   modais (.ci-modal/.ci-modal-card), com uma área de imagem própria por
   baixo. A área usa aspect-ratio = proporção real da foto (setada via JS
   ao abrir), então o quadro de corte em % bate exatamente com os pixels da
   imagem, sem sobra de letterbox pra calcular. */
.fotos-corte-card{ max-width:420px; overflow-y:auto; }
.fotos-corte-area{
  position:relative; width:100%; overflow:hidden; border-radius:10px;
  background:#1a1a12; margin-bottom:16px; touch-action:none; user-select:none;
}
.fotos-corte-area img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; user-select:none;
}
/* O quadro de corte usa um box-shadow enorme como máscara: tudo fora do
   retângulo escurece, sem precisar desenhar 4 divs de véu em volta. */
.fotos-corte-rect{
  position:absolute; left:0; top:0; width:100%; height:100%;
  border:2px solid var(--card-resumo); box-sizing:border-box;
  box-shadow:0 0 0 9999px rgba(26,26,18,.6);
  cursor:move; touch-action:none;
}
.fotos-corte-alca{
  position:absolute; width:22px; height:22px; margin:-11px;
  background:var(--card-resumo); border:2px solid var(--oliva-1); border-radius:50%;
  touch-action:none;
}
.fotos-corte-alca--nw{ left:0; top:0; cursor:nwse-resize; }
.fotos-corte-alca--ne{ left:100%; top:0; cursor:nesw-resize; }
.fotos-corte-alca--sw{ left:0; top:100%; cursor:nesw-resize; }
.fotos-corte-alca--se{ left:100%; top:100%; cursor:nwse-resize; }
.fotos-corte-pular{
  width:100%; margin-top:10px; padding:8px; background:none; border:none; height:auto;
  font-family:var(--sans); font-size:12px; font-weight:600; color:var(--oliva-1);
  text-decoration:underline; cursor:pointer;
}
.fotos-corte-pular:hover{ color:#5C5535; background:none; transform:none; box-shadow:none; }
@media (max-width:640px){
  .fotos-corte-alca{ width:26px; height:26px; margin:-13px; }
}

/* ── Mobile ── */
@media (max-width:1023px){
  .fotos-cabecalho{ margin-bottom:22px; }
  .fotos-eyebrow{ font-size:9.5px; letter-spacing:0.12em; margin-bottom:6px; }
  .fotos-titulo{ font-size:20px; margin-bottom:14px; }
  .fotos-privacidade{ gap:10px; padding:11px 14px; border-radius:11px; }
  .fotos-privacidade svg{ width:15px; height:15px; }
  .fotos-privacidade-titulo{ font-size:13.5px; margin-bottom:2px; }
  .fotos-privacidade-texto{ font-size:11px; line-height:1.5; }

  /* Os três ângulos ficam LADO A LADO no celular, um por coluna. Antes era
     uma coluna só, com o card horizontal — três cards empilhados ocupavam
     quase uma tela inteira de altura para uma decisão que é "escolher a
     foto de cada ângulo".
     A 390px cada coluna tem ~112px. Nesse espaço a instrução em itálico
     ("De frente para a câmera, braços levemente afastados do corpo.") não
     cabe legível, então ela sai AQUI — é orientação de primeira vez, e o
     desenho da silhueta já mostra a pose. No desktop ela continua. */
  .fotos-captura-grid{ grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:26px; }
  .fotos-card,
  .fotos-card--enviada{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:0; border-radius:12px; padding:12px 8px;
  }
  .fotos-card-titulo,
  .fotos-card--enviada .fotos-card-titulo{ font-size:13.5px; margin-bottom:6px; }
  .fotos-card-visual{ margin-bottom:8px; }
  .fotos-silhueta{ height:64px; }
  .fotos-silhueta svg{ width:37px; height:64px; }
  .fotos-card-instrucao{ display:none; }
  .fotos-selo{ margin-bottom:9px; padding:5px 12px; }
  .fotos-selo span{ font-size:9.5px; }
  /* "Escolher foto" não cabe em ~112px; na coluna estreita o rótulo é só
     "Escolher" — o nome do ângulo logo acima já diz o que se escolhe. */
  .fotos-trigger{ font-size:11px; padding:8px 4px; border-radius:8px; }
  .fotos-preview-img, .fotos-preview-erro{ width:48px; }
  .fotos-preview-img{ height:64px; }
  .fotos-selo{ margin-bottom:7px; padding:4px 8px; }
  .fotos-selo span{ font-size:8.5px; }

  .fotos-secao-head{ margin:32px 0 14px; padding-bottom:9px; }
  .fotos-timeline-titulo{ font-size:17px; }
  .fotos-secao-contagem{ font-size:10px; }

  .fotos-sessao{ border-radius:12px; margin-bottom:11px; }
  .fotos-sessao-head{ padding:16px; gap:10px; }
  .fotos-sessao-corpo{ padding:0 16px 16px; }
  .fotos-sessao-data{ font-size:14.5px; }
  .fotos-sessao-angulos{ display:block; margin-left:0; margin-top:2px; font-size:10px; }
  .fotos-sessao-relativo{ font-size:10px; }
  .fotos-sessao-seta{ width:14px; height:14px; }
  /* Três miniaturas em grade, não em flex: a linha nunca quebra e os três
     ângulos continuam lado a lado em 390px. */
  .fotos-sessao-thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .fotos-thumb{ width:auto; min-width:0; }
  .fotos-thumb-wrap, .fotos-thumb-ausente{ width:100%; height:104px; border-radius:9px; }
  .fotos-thumb-ausente{ padding:0 4px; font-size:8.5px; line-height:1.3; }
  .fotos-thumb-angulo{ margin-top:5px; font-size:8px; letter-spacing:0.04em; }
  .fotos-thumb-excluir{ top:5px; right:5px; width:22px; height:22px; }
  .fotos-thumb-excluir svg{ width:9px; height:9px; }
  .fotos-thumb-carregando, .fotos-thumb-vazio{ font-size:8.5px; }

  .fotos-confirmar{ display:block; margin-top:14px; padding:13px 15px; border-radius:10px; }
  .fotos-confirmar-titulo{ font-size:12px; margin-bottom:2px; }
  .fotos-confirmar-aviso{ font-size:10.5px; margin-bottom:12px; }
  .fotos-confirmar-acoes{ gap:8px; }
  .fotos-btn-cancelar, .fotos-btn-excluir{ flex:1; padding:10px 0; font-size:11.5px; }

  .fotos-vazio{ border-radius:12px; padding:28px 20px; }
  .fotos-vazio-titulo{ font-size:16px; margin-bottom:7px; line-height:1.35; }
  .fotos-vazio-texto{ font-size:11.5px; line-height:1.65; }
  .fotos-aviso-simples{ border-radius:12px; padding:18px 16px; font-size:11.5px; }

  .fotos-comparacao-toolbar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
  .fotos-comparacao-campo{ gap:5px; }
  .fotos-comparacao-campo label{ font-size:9px; letter-spacing:0.09em; }
  .fotos-comparacao-campo select{ padding:11px 12px; font-size:11px; }
  #fotos-btn-comparar{ grid-column:1 / -1; }
  .fotos-comparacao-linha{ border-radius:12px; padding:16px; margin-bottom:11px; }
  .fotos-comparacao-angulo-label{ font-size:10px; letter-spacing:0.09em; margin-bottom:12px; }
  /* As duas datas seguem lado a lado dentro do card do ângulo (é o que faz a
     comparação existir); o que empilha são os ângulos. */
  .fotos-comparacao-par{ gap:8px; }
  .fotos-comparacao-data{ font-size:9px; margin-bottom:6px; white-space:nowrap; }
  .fotos-data-longa{ display:none; }
  .fotos-data-curta{ display:inline; }
  .fotos-comparacao-celula, .fotos-comparacao-vazia{ height:140px; border-radius:9px; }
  .fotos-comparacao-vazia{ padding:0 8px; font-size:9px; line-height:1.4; }
}
/* ═══════ /EVOLUÇÃO FOTOGRÁFICA ═══════ */

label{ display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink2); font-weight:700; margin:14px 0 6px; }
label:first-of-type{ margin-top:0; }
input, select{
  width:100%; height:46px; background:var(--card2); border:1px solid rgba(184,155,82,.22); border-radius:11px;
  padding:0 13px; color:var(--ink); font-family:'Inter',sans-serif; font-size:0.88rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input::placeholder{ color:var(--ink2); opacity:0.6; }
input:focus, select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,155,82,.14); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .grid2{ grid-template-columns:1fr; } }
button{
  width:100%; height:46px; margin-top:14px; padding:0 14px; border-radius:11px; border:none;
  background:linear-gradient(135deg,var(--champagne-1),var(--champagne-2)); color:#10202B; font-family:'Inter',sans-serif;
  font-weight:800; font-size:0.88rem; cursor:pointer; transition:transform 0.2s ease, box-shadow .2s ease;
}
button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(184,155,82,.28); }
button:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
button.botao-secundario{
  background:var(--card); border:1px solid rgba(184,155,82,.3); color:var(--ink); font-weight:700;
}
button.botao-secundario:hover{ box-shadow:0 8px 20px rgba(6,42,52,.1); }
.spinner{
  display:inline-block; width:14px; height:14px; border:2px solid rgba(184,155,82,0.25);
  border-top-color:var(--gold); border-radius:50%; margin-right:8px; vertical-align:middle;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#laudo-status{ display:flex; align-items:center; color:var(--ink2); font-size:0.82rem; }
input[type="file"]{
  height:auto; background:var(--card2); border:1px dashed rgba(184,155,82,.35); border-radius:11px;
  padding:14px 13px; color:var(--ink2); font-size:0.82rem; cursor:pointer;
}
input[type="file"]:hover{ border-color:var(--gold); background:var(--card); }

/* ── EMPTY STATE (sem estilo no arquivo original — adicionado) ── */
.empty-state{
  text-align:center; color:var(--ink2); font-size:0.82rem; font-weight:600;
  padding:18px 16px 8px; line-height:1.6; position:relative;
}
.empty-state::before{
  content:''; display:block; width:150px; height:150px; margin:0 auto 6px;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  opacity:.92;
}
/* Composição e Exames usam o mesmo asset (esferas de luz) */
#bio-timeline-container .empty-state::before,
#meta-timeline-container .empty-state::before,
#cardio-timeline-container .empty-state::before,
#vitaminas-timeline-container .empty-state::before{
  background-image:url('empty-state-exams.png');
}
/* Treinos: ícone de linha simples (sem imagem figurativa), conforme decidido */
#treinos-kpis-container .empty-state::before,
#treinos-lista-container .empty-state::before{
  content:''; width:44px; height:44px; margin:0 auto 14px;
  background:none; opacity:1;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M6.5 6.5l11 11M3 21l3.5-1 1-3.5-3.5 1zM16 3l1 3.5 3.5 1-1-3.5z"/><circle cx="12" cy="12" r="2"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M6.5 6.5l11 11M3 21l3.5-1 1-3.5-3.5 1zM16 3l1 3.5 3.5 1-1-3.5z"/><circle cx="12" cy="12" r="2"/></svg>');
  mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-position:center; -webkit-mask-position:center;
  background-color:var(--oliva-1);
}
#tab-treinos .empty-state{ color:var(--marrom-1); font-weight:500; }
/* ── AVISO (laudo / importação — sem estilo no arquivo original — adicionado) ── */
.laudo-aviso-banner{
  background:rgba(217,164,65,.1); border-left:2px solid var(--warn); border-radius:0 8px 8px 0;
  padding:10px 12px; font-size:0.74rem; color:var(--ink2); line-height:1.5;
}

/* Accordion de meses — Histórico de treinos */
.mes-grupo{ border-bottom:1px solid var(--hairline-resumo); }
.mes-grupo:last-child{ border-bottom:none; }
.mes-grupo-cabecalho{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 4px; background:none; border:none; cursor:pointer;
  text-align:left; color:var(--ink-resumo); font-weight:400;
  font-size:0.88rem; height:auto; margin:0; transition: background .15s;
}
.mes-grupo-cabecalho:hover{ background:rgba(228,222,208,.35); }
.mes-grupo-label-wrap{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.mes-grupo-label{ font-family:var(--serif); font-size:1.05rem; color:var(--ink-resumo); white-space:nowrap; }
.mes-grupo-count{ font-size:0.72rem; font-weight:500; color:var(--marrom-1); white-space:nowrap; }
.mes-grupo-seta{ width:16px; height:16px; stroke:var(--marrom-1); flex-shrink:0; transition:transform .2s ease; }
.mes-grupo-cabecalho.aberto .mes-grupo-seta{ transform:rotate(180deg); }
.mes-grupo-itens{ display:none; padding-bottom:8px; }
.mes-grupo-itens.aberto{ display:block; }

/* Accordion de anos — envolve os grupos de mês quando o ano NÃO é o atual
   (o ano atual fica sem esse wrapper, ver renderizarHistoricoTreinos).
   Mesmo padrão visual/aria dos meses, mas fechado por padrão e com um
   pouco mais de peso (é um nível de agrupamento acima). */
.ano-grupo{ border-bottom:1px solid var(--hairline-resumo); }
.ano-grupo:last-child{ border-bottom:none; }
.ano-grupo-cabecalho{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 4px; background:rgba(228,222,208,.22); border:none; cursor:pointer;
  text-align:left; color:var(--ink-resumo); font-weight:400;
  font-size:0.88rem; height:auto; margin:0; transition: background .15s;
}
.ano-grupo-cabecalho:hover{ background:rgba(228,222,208,.4); }
.ano-grupo-label-wrap{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.ano-grupo-label{ font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--ink-resumo); white-space:nowrap; }
.ano-grupo-count{ font-size:0.72rem; font-weight:500; color:var(--marrom-1); white-space:nowrap; }
.ano-grupo-seta{ width:16px; height:16px; stroke:var(--marrom-1); flex-shrink:0; transition:transform .2s ease; }
.ano-grupo-cabecalho.aberto .ano-grupo-seta{ transform:rotate(180deg); }
.ano-grupo-itens{ display:none; }
.ano-grupo-itens.aberto{ display:block; }
.linha-treino{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--line);
}
.linha-treino:last-child{ border-bottom:none; }
.linha-treino .lt-info{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.82rem; color:var(--ink); }
.linha-treino .lt-info .lt-cat{ font-weight:700; text-transform:uppercase; font-size:0.7rem; color:var(--gold); letter-spacing:0.04em; background:rgba(184,155,82,.10); border-radius:6px; padding:2px 8px; }
.linha-treino .lt-info .lt-data{ color:var(--ink2); font-size:0.75rem; }
.linha-treino .lt-info .lt-meta{ color:var(--ink2); font-size:0.72rem; opacity:.75; }
.linha-treino .lt-acoes{ display:flex; gap:8px; flex-shrink:0; }
.linha-treino .lt-acoes button{ width:auto; margin-top:0; padding:7px 12px; font-size:0.72rem; height:auto; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5px; }
.panel-title { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--ink); }
.panel-tag { font-size:0.52rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(184,155,82,0.3); padding:3px 8px; border-radius:100px; white-space:nowrap; margin-left:8px; flex-shrink:0; }
.panel-desc { font-size:0.73rem; color:var(--ink2); margin-bottom:16px; line-height:1.6; font-weight:600; }
canvas { width:100% !important; }

/* ── MARKER CARDS (timeline) — removidos nesta rodada: eram os cards escuros da
   timeline antiga de Indicadores de Saúde, hoje substituída pela tabela
   "Coletas recentes" (.is-table). Nenhuma outra tela usava estas classes. ── */

/* ── STATUS CARDS (atual) ── */
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media (min-width:640px){ .status-grid{ grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); flex-wrap:nowrap; } }
.status-card { background:var(--card2); border:1px solid rgba(184,155,82,.14); border-radius:14px; padding:15px 14px; position:relative; overflow:hidden; box-shadow:0 8px 20px rgba(6,42,52,.08); }
.status-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
/* Verde da composição (#7aaa7a) para todos os cards de treinos */
.status-card.ok::after { background:#7aaa7a; }
.status-card.warn::after { background:var(--warn); }
.status-card.alert::after { background:var(--alert); }
.status-label { font-size:0.55rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:6px; }
.status-card.ok   .status-label { color:#7aaa7a; }
.status-card.warn .status-label { color:var(--warn); }
.status-card.alert .status-label { color:var(--alert); }
.status-val { font-family:var(--serif); font-size:1.7rem; font-weight:700; line-height:1; margin-bottom:2px; }
.status-card.ok   .status-val { color:#7aaa7a; }
.status-card.warn .status-val { color:var(--warn); }
.status-card.alert .status-val { color:var(--alert); }
.status-ref { font-size:0.6rem; color:var(--ink2); font-weight:600; }
.status-delta { font-size:0.62rem; font-weight:800; padding:1px 6px; border-radius:100px; margin-top:4px; display:inline-block; }
.delta-up   { background:rgba(63,163,122,0.14); color:var(--ok); }
.delta-down { background:rgba(179,96,74,0.14); color:var(--alert); }
.delta-neu  { background:rgba(16,32,43,0.06); color:var(--ink2); }

/* ── VERSUS ── */
.versus-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.versus-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:10px; }
.vs-card { background:var(--card); border:1px solid rgba(184,155,82,.14); border-radius:12px; padding:14px 10px; text-align:center; position:relative; overflow:hidden; box-shadow:0 8px 20px rgba(6,42,52,.07); }
.vs-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
.vs-card.mar::after { background:var(--mar); }
.vs-card.abr::after { background:var(--abr); }
.vs-card.mai::after { background:var(--maio); }
.vs-card.jun::after { background:var(--jun); }
.vs-card .v { font-family:var(--serif); font-size:1.4rem; font-weight:700; line-height:1; margin-bottom:4px; display:block; }
.vs-card.mar .v { color:var(--mar); }
.vs-card.abr .v { color:var(--abr); }
.vs-card.mai .v { color:var(--maio); }
.vs-card.jun .v { color:var(--jun); }
.vs-card .l { font-size:0.56rem; color:var(--ink2); line-height:1.3; font-weight:700; }
.delta-sm { display:inline-flex; align-items:center; gap:2px; font-size:0.56rem; font-weight:700; padding:2px 5px; border-radius:3px; margin-top:4px; }

/* ── CAT CARDS ── */
.cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.cat-card { background:var(--card2); border:1px solid rgba(184,155,82,.14); border-radius:14px; padding:17px 15px; box-shadow:0 8px 20px rgba(6,42,52,.08); }
.cat-card .cat-title { font-size:0.55rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px; }
.cat-card.forca .cat-title  { color:var(--gold); }
.cat-card.cardio .cat-title { color:var(--abr); }
.cat-card .cat-v { font-family:var(--serif); font-size:1.7rem; font-weight:700; line-height:1; margin-bottom:3px; }
.cat-card.forca .cat-v  { color:var(--gold2); }
.cat-card.cardio .cat-v { color:var(--abr); }
.cat-card .cat-l { font-size:0.65rem; color:var(--ink2); font-weight:600; }

/* ══════════════════════════════════════════════════════════
   COMPOSIÇÃO CORPORAL (redesign creme/oliva — irmã do Resumo)
   Breakpoint 1024px, igual ao usado pela sidebar/tab-bar do
   restante do portal.
   ══════════════════════════════════════════════════════════ */
.cc-eyebrow{ font-size:0.62rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:14px; }

/* Timeline — grade de cards (desktop) */
.cc-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
.cc-tcard{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:6px; padding:20px 20px 8px; min-width:0; }
.cc-tcard.current{ background:var(--oliva-1); border-color:var(--oliva-1); }
.cc-tcard-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:14px; }
.cc-tcard-date{ font-family:var(--serif); font-size:17px; font-weight:400; color:var(--oliva-1); line-height:1; }
.cc-tcard.current .cc-tcard-date{ color:var(--card-resumo); }
.cc-tcard-rel{ font-size:9px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--marrom-1); white-space:nowrap; }
.cc-tcard.current .cc-tcard-rel{ font-weight:600; color:var(--card-resumo); border:1px solid var(--salvia-1); border-radius:2px; padding:4px 7px; }
.cc-mrow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--hairline-resumo); }
.cc-tcard.current .cc-mrow{ border-top-color:var(--oliva-2); }
.cc-mlabel{ font-size:9.5px; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; color:var(--marrom-1); }
.cc-tcard.current .cc-mlabel{ color:#F5F2ED; }
.cc-mval-wrap{ display:flex; align-items:baseline; gap:3px; flex-shrink:0; }
.cc-mval{ font-family:var(--serif); font-size:20px; font-weight:400; color:var(--ink-resumo); line-height:1; }
.cc-tcard.current .cc-mval{ font-weight:500; color:var(--card-resumo); }
.cc-munit{ font-size:9px; font-weight:500; color:var(--marrom-1); }
.cc-tcard.current .cc-munit{ color:#F5F2ED; }

/* Timeline — tabela (mobile) */
.cc-mobile-table{ display:none; background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:6px; overflow:hidden; margin-bottom:44px; }
.cc-mt-headrow{ display:flex; align-items:flex-end; padding:0 12px; }
.cc-mt-labelcell{ width:58px; flex:0 0 58px; }
.cc-mt-headcell{ flex:1; min-width:0; text-align:center; padding:12px 2px 10px; font-family:var(--serif); font-size:11.5px; line-height:1.2; color:var(--marrom-1); }
.cc-mt-headcell.cc-mt-current{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px 7px; margin-top:4px; background:var(--oliva-1); border-radius:4px 4px 0 0; }
.cc-mt-current-date{ font-family:var(--serif); font-size:11.5px; line-height:1.2; color:var(--card-resumo); }
.cc-mt-current-tag{ font-size:7px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#F5F2ED; white-space:nowrap; }
.cc-mt-row{ display:flex; align-items:center; padding:0 12px; border-top:1px solid var(--hairline-resumo); }
.cc-mt-rowlabel{ font-size:8px; font-weight:500; letter-spacing:0.09em; text-transform:uppercase; color:var(--marrom-1); line-height:1.25; }
.cc-mt-cell{ flex:1; min-width:0; text-align:center; padding:9px 2px; font-family:var(--serif); font-size:15px; font-weight:400; color:var(--ink-resumo); }
.cc-mt-row .cc-mt-cell.cc-mt-current{ font-weight:500; background:var(--salvia-2); }

@media (max-width:1023px){
  .cc-timeline{ display:none; }
  .cc-mobile-table{ display:block; }
}

/* Painéis de gráfico */
.cc-chart-panel{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:6px; padding:28px 30px 24px; margin-bottom:40px; }
.cc-chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:22px; }
.cc-chart-title{ margin:0; font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.15; color:var(--ink-resumo); }
.cc-chart-desc{ font-size:12.5px; font-weight:400; line-height:1.4; color:var(--marrom-1); margin-top:7px; }
.cc-chart-tag{ flex-shrink:0; font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--oliva-1); border:1px solid var(--salvia-1); border-radius:999px; padding:8px 14px; white-space:nowrap; }
.cc-chart-canvas-wrap{ height:300px; position:relative; }
.cc-chart-legend{ display:flex; flex-wrap:wrap; gap:28px; padding-top:20px; margin-top:18px; border-top:1px solid var(--hairline-resumo); }
.cc-chart-legend span{ display:flex; align-items:center; gap:9px; font-size:10px; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; color:var(--marrom-1); white-space:nowrap; }
.cc-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cc-legend-square{ width:9px; height:9px; flex-shrink:0; }
.cc-legend-dash{ width:14px; height:0; border-top:2px dashed; flex-shrink:0; }

@media (max-width:1023px){
  .cc-chart-panel{ padding:20px 16px 16px; }
  .cc-chart-head{ flex-direction:column; gap:6px; padding-bottom:16px; }
  .cc-chart-title{ font-size:19px; }
  .cc-chart-desc{ font-size:11.5px; line-height:1.45; margin-top:0; }
  .cc-chart-tag{ border:none; border-radius:0; padding:4px 0 0; color:var(--oliva-1); }
  .cc-chart-canvas-wrap{ height:230px; }
  .cc-chart-legend{ flex-wrap:nowrap; justify-content:space-between; gap:8px; padding-top:14px; margin-top:12px; }
  .cc-chart-legend span{ gap:5px; font-size:8px; letter-spacing:0.06em; }
  .cc-legend-dot, .cc-legend-square{ width:8px; height:8px; }
  .cc-legend-dash{ width:13px; }
}

/* Cards de variação */
.cc-deltas{ display:grid; gap:14px; margin-bottom:24px; }
.cc-deltas.cols-4{ grid-template-columns:repeat(4,1fr); }
.cc-deltas.cols-3{ grid-template-columns:repeat(3,1fr); }
.cc-delta-card{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:6px; padding:14px 16px 12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cc-delta-label{ font-size:9.5px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--marrom-1); }
.cc-delta-value-row{ display:flex; align-items:baseline; gap:6px; }
.cc-delta-mark{ font-size:14px; font-weight:500; color:var(--marrom-1); }
.cc-delta-value{ font-family:var(--serif); font-size:25px; font-weight:500; color:var(--oliva-1); white-space:nowrap; }
.cc-delta-flat{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; color:var(--marrom-1); }
.cc-delta-path{ font-size:11.5px; font-weight:400; letter-spacing:0.03em; color:var(--marrom-1); }

@media (max-width:1023px){
  .cc-deltas{ gap:10px; margin-bottom:22px; }
  .cc-deltas.cols-4{ grid-template-columns:1fr 1fr; }
  .cc-deltas.cols-3{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .cc-delta-card{ padding:11px 12px 10px; gap:6px; }
  .cc-deltas.cols-3 .cc-delta-card{ padding:10px 8px 10px; gap:6px; }
  .cc-delta-label{ font-size:8.5px; letter-spacing:0.14em; }
  .cc-deltas.cols-3 .cc-delta-label{ font-size:8px; letter-spacing:0.12em; }
  .cc-delta-mark{ font-size:13px; }
  .cc-deltas.cols-3 .cc-delta-mark{ font-size:11px; }
  .cc-delta-value{ font-size:24px; }
  .cc-deltas.cols-3 .cc-delta-value{ font-size:20px; }
  .cc-delta-flat{ font-size:18px; }
  .cc-deltas.cols-3 .cc-delta-flat{ font-size:15px; line-height:1.15; }
  .cc-delta-path{ font-size:11px; }
  .cc-deltas.cols-3 .cc-delta-path{ font-size:9.5px; line-height:1.3; }
}

@media (max-width:1023px){
  #tab-composicao .cc-eyebrow{ margin-bottom:10px; }
}
/* ── /COMPOSIÇÃO CORPORAL ── */

/* ══════════════════════════════════════════════════════════
   INDICADORES DE SAÚDE (redesign creme/oliva — irmã de
   Composição Corporal e do Resumo). Prefixo .is-*.
   Breakpoint 1024px, o mesmo do resto do portal.

   REGRA DE PRODUTO desta aba: nenhum julgamento de valor.
   O portal não guarda faixas de referência laboratoriais, então
   não existe aqui cor/selo de "normal" ou "alterado" — nada de
   verde/vermelho. As variações mostram apenas DIREÇÃO (subiu,
   desceu, estável) sempre no marrom de apoio, e a cor de cada
   marcador serve só para identificar a série, nunca para
   qualificá-la. A leitura clínica é da médica, no Resumo.
   ══════════════════════════════════════════════════════════ */
#tab-exames .sec-title{ color:var(--ink-resumo); }
#tab-exames .sec-title em{ color:var(--oliva-1); }
#tab-exames .sec-eyebrow .sec-label{ color:var(--marrom-1); }
#tab-exames .sec-eyebrow .sec-rule{ background:var(--hairline-resumo); }
#tab-exames .empty-state{ color:var(--marrom-1); font-weight:500; font-style:italic; }

/* ── Cards de indicador: 4 por seção, cada um com escala própria ──
   (os marcadores são configuráveis pela médica e podem ter ordens de
   grandeza muito diferentes entre si, daí um gráfico por card em vez
   de um gráfico único comparando os quatro) */
.is-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; min-width:0; }
.is-card{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:18px; padding:18px 18px 16px; min-width:0; }
.is-card-head{ display:flex; align-items:center; gap:7px; margin-bottom:12px; min-width:0; }
.is-card-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.is-card-name{ flex:1; min-width:0; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--marrom-1); line-height:1.3; overflow-wrap:anywhere; }
.is-card-value{ font-family:var(--serif); font-size:27px; font-weight:500; color:var(--ink-resumo); line-height:1.05; }
.is-card-unit{ font-family:var(--sans); font-size:11px; font-weight:500; color:var(--marrom-1); margin-left:4px; }
.is-card-empty-val{ font-family:var(--serif); font-size:27px; font-weight:400; color:var(--salvia-1); line-height:1.05; }
.is-card-note{ font-size:10.5px; font-style:italic; color:var(--marrom-1); margin-top:7px; }
.is-delta{ display:inline-block; margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:0.02em; color:var(--marrom-1); background:rgba(115,98,69,0.08); border-radius:100px; padding:2px 9px; white-space:nowrap; }
/* Variação zero: discreta de propósito — não tem o mesmo peso de uma mudança real */
.is-delta.is-delta-flat{ font-weight:400; font-style:italic; background:transparent; padding:2px 0; }

/* ── Sparkline: SVG inline, escala do próprio marcador ──
   A linha é desenhada em SVG esticado na largura (preserveAspectRatio=none,
   com non-scaling-stroke pra espessura não distorcer) e os pontos são spans
   posicionados em %, para continuarem redondos independente da largura do card. */
.is-spark{ display:flex; align-items:stretch; gap:8px; height:44px; margin-top:12px; }
.is-spark-plot{ position:relative; flex:1; min-width:0; }
.is-spark-svg{ display:block; width:100%; height:100%; }
.is-spark-dot{ position:absolute; width:5px; height:5px; border-radius:50%; transform:translate(-50%,-50%); }
.is-spark-dot.is-spark-dot-last{ width:7px; height:7px; box-shadow:0 0 0 2.5px var(--card-resumo); }
.is-spark-scale{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; flex-shrink:0; padding:1px 0; font-size:9.5px; font-weight:600; letter-spacing:0.02em; color:var(--marrom-1); line-height:1; }

/* ── Tabela "Coletas recentes" ──
   Grid explícito único (não uma tabela por célula): a coleta atual é UMA
   faixa oliva contínua atrás da coluna inteira, sem emendas entre linhas,
   e cada linha é separada por um único fio de 1px. Mesma estrutura no
   desktop e no mobile — só mudam medidas e o formato da data. */
.is-eyebrow{ font-size:0.62rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:12px; }
/* Cantos generosos: o contorno da tabela e o da faixa oliva são concêntricos
   (raio de dentro = raio de fora − recuo da faixa), senão a curva interna
   "briga" com a externa em vez de acompanhá-la. */
.is-table{ --is-label-col:1.6fr; position:relative; display:grid; background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:18px; padding:16px 18px; }
.is-table-band{ background:var(--oliva-1); border-radius:11px; margin:-8px; }
.is-th{ grid-row:1; position:relative; text-align:center; padding:0 8px 12px; font-family:var(--serif); font-size:15px; font-weight:400; color:var(--ink-resumo); line-height:1.2; }
.is-th.is-current{ color:var(--card-resumo); padding-top:4px; }
.is-th-short{ display:none; }
.is-th-tag{ display:block; margin-top:4px; font-family:var(--sans); font-size:7.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#F5F2ED; }
.is-td-label{ grid-column:1; min-width:0; padding:11px 16px 11px 0; border-top:1px solid var(--hairline-resumo); font-size:11.5px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink-resumo); line-height:1.3; overflow-wrap:anywhere; }
.is-td-unit{ font-weight:400; color:var(--marrom-1); margin-left:5px; }
.is-td{ position:relative; text-align:center; padding:11px 8px; border-top:1px solid var(--hairline-resumo); font-family:var(--serif); font-size:16px; font-weight:400; color:var(--marrom-1); line-height:1.2; }
.is-td.is-current{ color:var(--card-resumo); font-weight:500; border-top-color:rgba(253,252,250,0.26); }
.is-td.is-vazio{ color:var(--salvia-1); }
.is-td.is-current.is-vazio{ color:rgba(253,252,250,0.55); }

/* Seção inteira sem exames: um único card tracejado, sem repetir os 4 cards vazios */
.is-empty-section{ background:var(--card-resumo); border:1px dashed var(--salvia-1); border-radius:18px; padding:4px 20px 20px; }
#tab-exames .is-empty-section .empty-state::before{ width:112px; height:112px; }

@media (max-width:1023px){
  .is-cards{ grid-template-columns:1fr 1fr; gap:10px; margin-bottom:26px; }
  .is-card{ padding:13px 12px 12px; }
  .is-card-head{ gap:5px; margin-bottom:8px; }
  .is-card-name{ font-size:8.5px; letter-spacing:0.07em; }
  .is-card-value, .is-card-empty-val{ font-size:20px; }
  .is-card-unit{ font-size:9.5px; margin-left:3px; }
  .is-card-note{ font-size:9.5px; margin-top:5px; }
  .is-delta{ font-size:9.5px; padding:2px 7px; margin-top:6px; }
  .is-spark{ height:36px; gap:6px; margin-top:10px; }
  .is-spark-scale{ font-size:8.5px; }
  .is-spark-dot{ width:4px; height:4px; }
  .is-spark-dot.is-spark-dot-last{ width:6px; height:6px; box-shadow:0 0 0 2px var(--card-resumo); }
  .is-eyebrow{ font-size:0.58rem; margin-bottom:9px; }
  /* Coluna de rótulos larga o bastante para o nome mais longo em uso
     ("Triglicerídeos") caber sem quebrar no meio da palavra. */
  .is-card{ border-radius:14px; }
  .is-table{ --is-label-col:1.55fr; padding:13px 11px; border-radius:14px; }
  .is-table-band{ margin:-7px -6px; border-radius:9px; }
  .is-empty-section{ border-radius:14px; }
  .is-th{ font-size:11.5px; padding:0 2px 9px; }
  .is-th-full{ display:none; }
  .is-th-short{ display:inline; }
  .is-th-tag{ margin-top:3px; font-size:6.5px; letter-spacing:0.1em; }
  .is-td-label{ padding:9px 6px 9px 0; font-size:8.5px; letter-spacing:0.01em; }
  .is-td-unit{ display:block; margin-left:0; font-size:8px; }
  .is-td{ font-size:13.5px; padding:9px 2px; }
}
/* ── /INDICADORES DE SAÚDE ── */

/* ── LEGEND ── */
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; text-transform:uppercase; }
.legend span { display:flex; align-items:center; gap:5px; font-size:0.65rem; color:var(--ink2); font-weight:600; letter-spacing:0.04em; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── RESUMO INTEGRADO ── */

.resumo-integrado-texto{
  font-size:0.92rem; color:var(--ink); line-height:1.78; font-weight:500;
  white-space:pre-line; max-width:860px; margin-top:14px;
}
.resumo-integrado-vazio{
  font-size:0.86rem; color:var(--ink2); font-style:italic; line-height:1.6;
  white-space:normal;
}
.resumo-integrado-data{
  font-size:0.66rem; color:var(--marrom-1); font-weight:600; margin-top:10px;
}
.resumo-integrado-data:empty{ display:none; }
@media(max-width:640px){
  .resumo-integrado-texto{ font-size:0.86rem; line-height:1.7; }
}

.resumo-pendencias-lista{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:10px; min-width:0; }
.resumo-pend-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-size:0.8rem; padding:12px 14px; border-radius:14px; min-width:0;
  background:var(--card); border:1px solid var(--hairline-resumo);
  color:var(--ink-resumo); overflow-wrap:break-word;
}
.resumo-pend-status{
  font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  flex-shrink:0; padding:4px 10px; border-radius:100px;
  background:var(--salvia-2); border:1px solid var(--salvia-1);
  color:var(--oliva-1);
}
.resumo-pend-status.ok{ color:var(--ok-resumo); }
.resumo-pend-status.pend{ color:var(--oliva-1); }
.resumo-pend-status.em-prep{ color:var(--ink-resumo); opacity:.7; }
.resumo-pend-label{ color:var(--ink-resumo); overflow-wrap:break-word; }
/* Item em atraso (responsabilidade da paciente, ainda pendente) — paleta de
   alerta padrão, com transparência de fundo pra ficar suave, não um bloco
   vermelho sólido. Só "pend": "em-prep" é responsabilidade da equipe, não
   atraso da paciente, então não entra nesse tratamento. */
.resumo-pend-item.pend{ background:rgba(156,74,54,0.07); border-color:rgba(156,74,54,0.26); }
.resumo-pend-item.pend .resumo-pend-status{ color:var(--alert-resumo); background:rgba(156,74,54,0.14); border-color:rgba(156,74,54,0.32); }
/* Reforço positivo — só aparece no item "Treinos" quando em dia (status
   ok), frase curta abaixo do card, mesmo tom da paleta de sucesso. */
.resumo-pend-reforco{ font-size:0.72rem; color:var(--ok-resumo); line-height:1.4; }

/* Contraste de títulos sobre fundo claro nas abas Resumo e Composição */
#tab-resumo .sec-title, #tab-composicao .sec-title{ color:var(--ink-resumo); }
#tab-resumo .sec-title em, #tab-composicao .sec-title em{ color:var(--oliva-1); }
#tab-resumo .sec-eyebrow .sec-label{ color:var(--marrom-1); }
#tab-resumo .sec-eyebrow .sec-rule{ background:var(--hairline-resumo); }
#tab-resumo > .section > p{ color:var(--ink-resumo); opacity:.65; }

/* min-width:0 em todos os grids da aba Resumo */
.indicadores-grid,
.resumo-pendencias-lista{ min-width:0; }
.indicador-card,
.resumo-pend-item{ min-width:0; overflow-wrap:break-word; }
.hero-resumo *{ overflow-wrap:break-word; }
/* ── /RESUMO INTEGRADO ── */
.exec-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.exec-col-title { font-size:0.6rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:10px; }
.exec-col-title.win   { color:var(--ok); }
.exec-col-title.watch { color:var(--warn); }
.exec-col-title.next  { color:var(--abr); }
.exec-item { padding:11px 14px; border-radius:10px; font-size:0.75rem; font-weight:600; color:var(--ink); margin-bottom:7px; display:flex; align-items:flex-start; gap:8px; }
.exec-item.win   { background:rgba(63,163,122,0.10); border-left:2px solid var(--ok); }
.exec-item.watch { background:rgba(217,164,65,0.10); border-left:2px solid var(--warn); }
.exec-item.next  { background:rgba(92,138,160,0.10); border-left:2px solid var(--abr); }
.exec-item .ei-icon { font-size:1rem; flex-shrink:0; margin-top:-1px; }
.exec-item .ei-text { font-size:0.73rem; line-height:1.5; }
.exec-item .ei-sub { font-size:0.62rem; color:var(--ink2); margin-top:2px; }

/* ── HERO RESUMO (card premium — texto ocupa 100% da largura) ── */
.hero-resumo{
  position:relative; display:flex; align-items:stretch; gap:0;
  background:var(--card); border:1px solid var(--hairline-resumo); border-radius:22px;
  overflow:hidden; margin-bottom:18px; box-shadow:0 20px 50px rgba(46,42,32,.08);
  min-height:120px;
}
.hero-resumo-texto{ position:relative; z-index:2; flex:1 1 100%; padding:20px 24px; display:flex; flex-direction:column; justify-content:center; }
.hero-eyebrow{ font-size:0.62rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--oliva-1); margin-bottom:8px; }
.hero-titulo{ font-family:var(--serif); font-size:clamp(1.3rem, 2.2vw, 1.65rem); font-weight:600; color:var(--ink); line-height:1.25; margin-bottom:6px; }
.hero-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
.hero-sub{ font-size:0.78rem; color:var(--ink2); line-height:1.6; font-weight:500; max-width:520px; }
@media (max-width:640px){
  .hero-resumo{ flex-direction:column; min-height:0; }
  .hero-resumo-texto{ padding:22px 20px 18px; }
}

/* ── INDICADORES (4 cards, visual — dados populados em etapa futura) ── */
.indicadores-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:8px; }
@media (min-width:640px){ .indicadores-grid{ grid-template-columns:repeat(4,1fr); } }
.indicador-card{
  background:var(--card); border:1px solid var(--hairline-resumo); border-radius:16px;
  padding:17px 16px; box-shadow:0 10px 26px rgba(46,42,32,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.indicador-card:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(6,42,52,.13); }
.ind-label{ font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px; }
.ind-val{ font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--ink); line-height:1; }
.ind-unidade{ font-family:var(--sans); font-size:0.7rem; font-weight:700; color:var(--ink2); margin-left:3px; }
/* Placeholder decorativo (só aparece enquanto não há série: aplicarSparkline()
   sobrescreve com os dados reais, ou apaga se houver menos de 2 medições).
   Agora com a mesma área preenchida dos gráficos de dado real, para o card não
   mudar de linguagem quando os dados chegam. */
.ind-spark{ height:28px; margin-top:8px; opacity:.8; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 28" preserveAspectRatio="none"><path d="M0 20 Q15 22 25 14 T50 16 T75 6 T100 10 L100 28 L0 28 Z" fill="%23776E45" fill-opacity="0.16"/><path d="M0 20 Q15 22 25 14 T50 16 T75 6 T100 10" fill="none" stroke="%23776E45" stroke-width="2"/></svg>'); background-repeat:no-repeat; background-size:100% 100%; }
.ind-compara{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:0.66rem; font-weight:700; color:var(--ink2); }
.ind-compara .ic-seta{ display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border-radius:100px; font-weight:800; }
.ind-compara .ic-seta.up{ background:rgba(63,163,122,0.14); color:var(--ok); }
.ind-compara .ic-seta.down{ background:rgba(179,96,74,0.14); color:var(--alert); }
.ind-compara .ic-seta.neu{ background:rgba(16,32,43,0.06); color:var(--ink2); }
.ind-compara .ic-ref{ color:var(--ink2); font-weight:600; opacity:.8; }
.ind-val.discreto{ font-size:1.3rem; color:var(--ink2); opacity:.55; }

/* ── METABÓLICA (card de score, dentro do indicador "Saúde metabólica") ── */
.meta-score-badge{ display:inline-flex; align-items:center; gap:4px; font-size:0.6rem; font-weight:800; padding:2px 7px; border-radius:100px; margin-left:6px; vertical-align:middle; }
.meta-score-badge.up{ background:rgba(63,163,122,0.14); color:var(--ok); }
.meta-score-badge.neu{ background:rgba(16,32,43,0.06); color:var(--ink2); }
.meta-score-sub{ font-size:0.66rem; color:var(--ink2); font-weight:600; margin-top:6px; }

/* Grupo pai na tabela histórico */
.grupo-pai-row td{
  background:var(--card2) !important;
  font-weight:700; color:var(--ink); font-size:0.78rem;
  letter-spacing:0.04em; border-top:2px solid rgba(184,155,82,.18);
}
.grupo-pai-row td:first-child{ text-transform:uppercase; color:var(--gold); }
.marcador-subitem td:first-child{ padding-left:28px !important; font-size:0.76rem; }
.evolucao-seta{ display:inline-flex; width:13px; height:13px; flex-shrink:0; }
.evolucao-seta.up{ color:var(--ok); }
.evolucao-seta.down{ color:var(--alert); }
.badge-status{ display:inline-flex; align-items:center; gap:5px; font-size:0.62rem; font-weight:700; padding:3px 9px; border-radius:100px; white-space:nowrap; }
.badge-status::before{ content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge-status.dentro{ background:rgba(63,163,122,0.12); color:var(--ok); }
.badge-status.dentro::before{ background:var(--ok); }
.badge-status.atencao{ background:rgba(217,164,65,0.14); color:var(--warn); }
.badge-status.atencao::before{ background:var(--warn); }
/* ── INSIGHT DE EVOLUÇÃO (Treinos) ── */
.evolucao-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .evolucao-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .evolucao-grid{ grid-template-columns:repeat(4,1fr); } }
.evolucao-card{ background:var(--card2); border:1px solid rgba(184,155,82,.14); border-radius:14px; padding:15px 14px; }
.evolucao-card .ev-label{ font-size:0.58rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px; }
.evolucao-card .ev-pct{ font-family:var(--serif); font-size:1.5rem; font-weight:700; line-height:1; display:inline-flex; align-items:center; gap:5px; }
.evolucao-card .ev-pct.up{ color:var(--ok); }
.evolucao-card .ev-pct.down{ color:var(--alert); }
.evolucao-card .ev-pct.neu{ color:var(--ink2); font-size:0.95rem; }
.evolucao-card .ev-desc{ font-size:0.68rem; color:var(--ink2); font-weight:600; margin-top:6px; line-height:1.45; }
.evolucao-card .ev-spark{ height:30px; margin-top:10px; }
.evolucao-card .ev-spark svg{ width:100%; height:100%; }
.evolucao-nota{
  display:flex; align-items:flex-start; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:0.66rem; color:var(--ink2); font-weight:600; line-height:1.5;
}
.evolucao-nota svg{ width:13px; height:13px; flex-shrink:0; margin-top:1px; color:var(--gold); }

/* Painel ghost — sem fundo, apenas borda sutil (estilo botão Sair) */
.painel-ghost{
  background: rgba(248,245,238,.04);
  border: 1px solid rgba(232,207,154,.18);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.painel-ghost .panel-title{ color: rgba(248,245,238,.75); }
.painel-ghost .panel-head{ margin-bottom:14px; }
.registros-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width:640px){ .registros-grid{ grid-template-columns:1fr; } }
.btn-registros{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:42px; border-radius:10px; font-size:0.78rem; font-weight:600;
  cursor:pointer; border:1px solid rgba(232,207,154,.22); width:100%; margin:0;
  background: rgba(248,245,238,.07); color:rgba(248,245,238,.8);
  transition: background .2s, border-color .2s;
}
.btn-registros svg{ width:14px; height:14px; stroke:var(--champagne-2); flex-shrink:0; }
.btn-registros:hover{ background:rgba(248,245,238,.13); border-color:rgba(232,207,154,.38); }

/* Gráficos lado a lado */
.graficos-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
@media (min-width:760px){ .graficos-grid{ grid-template-columns:1fr 1fr; } }

.filtro-select-inline{
  height:32px; font-size:0.7rem; padding:0 10px;
  border:1px solid rgba(184,155,82,.22); border-radius:8px;
  background:var(--card2); color:var(--ink); cursor:pointer; width:auto; margin:0;
}
.botao-filtrar-inline{
  height:32px; font-size:0.6rem; font-weight:800; letter-spacing:0.1em;
  padding:0 12px; border-radius:8px; width:auto; margin:0;
  background:var(--ink); color:var(--card); border:none; cursor:pointer; transition: opacity .2s;
}
.botao-filtrar-inline:hover{ opacity:.85; }

/* ── FILTRO DE PERÍODO ── */
.filtro-periodo{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filtro-periodo .fp-campo{ flex:1; min-width:170px; }
.filtro-periodo .fp-campo label{ margin:0 0 6px; }
.filtro-periodo select{ cursor:pointer; }
.filtro-periodo button{ width:auto; margin-top:0; flex-shrink:0; min-width:110px; }

/* ── SUMMARY ── */
.sum-item { display:grid; grid-template-columns:auto 1fr; gap:0 16px; padding:16px 0; border-bottom:1px solid var(--line); }
.sum-item:last-child { border-bottom:none; }
.sum-num { font-family:var(--serif); font-size:2rem; font-style:italic; color:var(--gold); opacity:.3; line-height:1; padding-top:2px; }
.sum-t { font-size:0.78rem; font-weight:700; color:var(--ink); margin-bottom:3px; }
.sum-b { font-size:0.73rem; color:var(--ink2); line-height:1.65; font-weight:600; }

footer { text-align:center; font-size:0.72rem; color:rgba(248,245,238,.6); letter-spacing:0.04em; text-transform:none; padding:24px; border-top:1px solid rgba(232,207,154,.12); font-weight:600; position:relative; z-index:1; }
footer em{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--champagne-2); letter-spacing:0.02em; }
@media (min-width:1024px){ footer{ margin-left:var(--sidebar-w); } }

/* ── Lockup Íris / Atria ──────────────────────────────────────────
   Rodapé oficial, idêntico em todas as telas do sistema: símbolo +
   wordmark Íris lado a lado, seguidos de "powered by Atria Group".
   Playfair Display 11px peso 400, cor #AFA98F; símbolo 16px, wordmark
   14px, ambos a 85% de opacidade. Usado em dois lugares neste arquivo
   — no rodapé do dashboard e no fim da coluna do login da paciente —
   daí a classe compartilhada. Os dois fundos já são o mesmo creme
   #F5F2ED do hub (body e --creme-bg), então o tratamento do logo é
   idêntico, sem adaptação (a var --bg #062A34 é legado e não pinta
   mais o body).
   ───────────────────────────────────────────────────────────────── */
.iris-lockup{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--serif); font-size:11px; font-weight:400;
  color:#AFA98F; letter-spacing:normal; text-align:center;
}
.iris-lockup-marca{ display:flex; align-items:center; gap:6px; }
.iris-lockup-marca img{
  width:auto; display:block; opacity:.85; flex-shrink:0; object-fit:contain;
}
.iris-lockup-simbolo{ height:16px; }
.iris-lockup-wordmark{ height:14px; }
.iris-lockup span{ line-height:1.4; }
.iris-lockup em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:#AFA98F; letter-spacing:normal;
}
@media (max-width:480px){
  .iris-lockup{ font-size:10.5px; gap:8px; }
  .iris-lockup-simbolo{ height:14px; }
  .iris-lockup-wordmark{ height:12px; }
}

/* Rodapé do dashboard: as regras genéricas de `footer` acima cuidam do
   padding, do hairline e do recuo da sidebar no desktop. Abaixo de
   1024px a .tab-bar vira bottom-nav fixa e o rodapé fica fora da
   .main-area, então precisa da mesma folga de 90px que ela usa — senão
   a barra cobre o texto. */
@media (max-width:1023.98px){
  footer.iris-lockup{ padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ── LOGIN (identidade oficial creme/oliva — redesign) ── */
#login-gate {
  position: fixed; inset: 0; z-index: 999;
  overflow-y: auto;
  background: var(--creme-bg);
  display: flex; flex-direction: column;
}
#login-marca {
  position: relative; overflow: hidden; flex: none;
  background: var(--oliva-1);
  padding: 40px 24px 68px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#login-marca::before {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(212,207,177,0.2);
  width: 420px; height: 420px; left: -120px; bottom: -300px;
}
.login-marca-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: var(--creme-bg); position: relative; }
.login-marca-titulo {
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.12;
  color: var(--creme-bg); letter-spacing: -0.015em; position: relative; margin-top: 10px;
}
.login-marca-titulo em { font-style: italic; font-weight: 500; color: var(--salvia-1); }
.login-marca-linha { width: 40px; height: 1px; background: var(--salvia-1); margin: 10px auto 0; position: relative; }
.login-marca-quote, .login-marca-privacidade { display: none; }

#login-content {
  flex: 1; position: relative; z-index: 1;
  margin-top: -48px;
  padding: 0 20px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
#login-box {
  position: relative; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--hairline-resumo); border-radius: 16px;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 16px 36px -22px rgba(46,42,32,0.3);
}
#login-box .login-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--marrom-1);
}
#login-box h2 {
  font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--ink-resumo); margin-top: 8px;
}
#login-box h2 em { font-style: italic; font-weight: 400; color: var(--oliva-1); }
#login-box label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5C5443; margin: 16px 0 8px;
}
#login-box label:first-of-type { margin-top: 0; }
#login-box .login-campo-senha { position: relative; display: flex; }
#login-box input {
  width: 100%; height: 56px; border-radius: 10px; border: 1px solid #E3DECF;
  background: var(--creme-bg); color: var(--ink-resumo);
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  padding: 0 16px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#login-box .login-campo-senha input { padding-right: 74px; }
#login-box input::placeholder { color: #9C9482; }
#login-box input:focus {
  border-color: var(--oliva-1);
  box-shadow: 0 0 0 3px rgba(212,207,177,0.55);
}
#login-box .login-ver-senha {
  position: absolute; right: 8px; top: 10px; height: 36px; width: auto; margin: 0; padding: 0 12px;
  border: none; background: transparent; border-radius: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oliva-1); cursor: pointer;
}
#login-box .login-ver-senha:hover { background: #EFEBDE; }
#login-box button {
  width: 100%; height: 56px; margin-top: 6px; padding: 0 14px; border-radius: 10px; border: none;
  background: var(--oliva-1); color: var(--creme-bg);
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease;
}
#login-box button:hover { background: #625A36; }
#login-box button:disabled { opacity: 0.55; cursor: not-allowed; transform:none; box-shadow:none; }
.login-alerta {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.45;
}
.login-alerta:empty { display: none; }
.login-alerta::before {
  content: ''; width: 17px; height: 17px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  font-size: 11px; font-weight: 700;
}
.login-alerta--erro { background: #FBEEEB; border: 1px solid #E7C7BF; border-left: 3px solid #A33A2A; color: #7A2A1D; }
.login-alerta--erro::before { content: '!'; background: #A33A2A; color: #FBEEEB; }
.login-alerta--sucesso { background: #EBF1E6; border: 1px solid #C7D9BC; border-left: 3px solid var(--ok-resumo); color: #33472A; }
.login-alerta--sucesso::before { content: '✓'; background: var(--ok-resumo); color: #EBF1E6; }
.login-alerta--info { background: var(--salvia-2); border: 1px solid var(--salvia-1); border-left: 3px solid var(--oliva-1); color: #5C5443; }
.login-alerta--info::before { content: 'i'; font-family: Georgia, serif; font-style: italic; background: var(--oliva-1); color: var(--creme-bg); }
#login-box .login-link {
  display: block; text-align: center; font-size: 13px; text-decoration: none;
  color: var(--oliva-1); cursor: pointer; transition: color 0.2s ease;
}
#login-box .login-link:hover { color: #5F5837; }
.login-privacidade { font-size: 12px; line-height: 1.55; color: #6B6350; text-align: center; padding: 0 16px; }

@media (min-width: 1024px) {
  #login-gate { flex-direction: row; }
  #login-marca {
    width: 44%; max-width: 620px; flex: none;
    padding: 64px; align-items: flex-start; text-align: left; justify-content: space-between;
  }
  #login-marca::before { width: 760px; height: 760px; left: -240px; bottom: -430px; }
  #login-marca::after {
    content: ''; position: absolute; border-radius: 50%;
    border: 1px solid rgba(212,207,177,0.16);
    width: 560px; height: 560px; left: -120px; bottom: -330px;
  }
  .login-marca-eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .login-marca-titulo { font-size: 44px; line-height: 1.08; margin-top: 30px; }
  .login-marca-linha { width: 72px; margin: 30px 0 0; }
  .login-marca-quote {
    display: block; position: relative; margin-top: 30px; max-width: 380px;
    font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.5; color: var(--salvia-1);
  }
  .login-marca-privacidade { display: block; position: relative; font-size: 13px; line-height: 1.6; color: var(--creme-bg); }
  #login-content { flex: 1; margin-top: 0; padding: 48px; justify-content: center; }
  #login-box { padding: 48px 48px 40px; box-shadow: 0 18px 40px -24px rgba(119,110,69,.28); }
  #login-box h2 { font-size: 28px; margin-top: 12px; }
  .login-alerta { font-size: 14px; padding: 14px 16px; }
  .login-alerta::before { width: 18px; height: 18px; font-size: 12px; }
  .login-privacidade { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ABA TREINOS (redesign creme/oliva — irmã do Resumo, da
   Composição Corporal e dos Indicadores de Saúde). Prefixo .treinos-*.
   Breakpoint 1024px, o mesmo do resto do portal.

   REGRA DE PRODUTO desta aba: sem julgamento de desempenho — nenhum
   selo ou cor do tipo "abaixo da meta"/"excelente ritmo". As únicas
   cores de estado usadas são as variações do comparativo (Positivo/
   Alerta), que marcam direção, não mérito.
   ══════════════════════════════════════════════════════════ */
/* Cabeçalho de aba — nome neutro (.aba-*) porque quatro abas usam o mesmo
   padrão: Treinos, Minha Jornada, Check-in e Indicadores de Saúde. Antes
   se chamava .treinos-*, e reaproveitar aquele nome nas outras confundia
   quem fosse ler depois.
   (As abas Prescrições, Fale com a Equipe e Histórico usam outro
   cabeçalho, .pf-*, com desenho um pouco diferente. Não foram unificadas
   aqui: elas já estavam certas e mexer só ampliaria o risco.) */
.aba-cabecalho{ margin-bottom:16px; }
.aba-eyebrow{
  display:block; font-family:var(--sans); font-size:0.62rem; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:8px;
}
/* A escada de tamanhos, medida a 390px, é intencional:
     nome da paciente (header h1)  25,6px
     título da aba  (.aba-titulo)  21,1px
     título de seção (.sec-title)  18,4px
   Cada nível fica abaixo do anterior. Antes o .sec-title era 1.9rem FIXO
   e passava os dois no celular — "Saúde metabólica" ficava maior que o
   nome da paciente. Ao mexer em um destes três, conferir os outros. */
.aba-titulo{
  font-family:var(--serif); font-size:clamp(1.32rem,4.2vw,1.6rem); font-weight:600;
  line-height:1.28; color:var(--ink-resumo);
}
.aba-titulo em{ font-style:italic; font-weight:400; color:var(--oliva-1); }
.aba-sub{ font-size:0.82rem; line-height:1.6; color:var(--marrom-1); margin-top:8px; max-width:46ch; }

/* Toolbar — período à esquerda, ações à direita; envolve em duas linhas
   no mobile em vez de rolar horizontalmente (ação principal precisa ficar
   sempre visível, não escondida por scroll). */
.treinos-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:20px;
}
.treinos-toolbar-esq{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.treinos-toolbar-dir{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.treinos-select-periodo{
  background:var(--card-resumo); border:1px solid var(--salvia-1); color:var(--ink-resumo);
  border-radius:6px; padding:10px 14px; font-size:0.82rem; font-weight:500; font-family:var(--sans);
  cursor:pointer; flex-shrink:0;
}
.treinos-periodo-custom{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.treinos-periodo-custom input[type="date"]{
  background:var(--card-resumo); border:1px solid var(--salvia-1); color:var(--ink-resumo);
  border-radius:6px; padding:9px 10px; font-size:0.78rem; font-family:var(--sans);
}
.treinos-periodo-custom span{ font-size:0.78rem; color:var(--marrom-1); flex-shrink:0; }
.treinos-btn-primario{
  width:auto; margin-top:0; padding:11px 20px; font-size:0.82rem; font-weight:600; border-radius:6px;
  background:var(--oliva-1); color:var(--card-resumo); border:none; cursor:pointer; white-space:nowrap;
  flex-shrink:0;
}
.treinos-btn-primario:hover{ background:#5f5738; }
.treinos-btn-secundario{
  width:auto; margin-top:0; padding:10px 16px; font-size:0.82rem; font-weight:500; border-radius:6px;
  background:var(--card-resumo); color:var(--marrom-1); border:1px solid var(--salvia-1); cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
.treinos-btn-secundario:hover{ background:var(--salvia-2); }
/* No celular a toolbar fica numa linha só: filtro de período + os dois
   botões. Cabe porque sobrou um botão a menos (o de planilha saiu) e porque
   "+ Adicionar treino" perde o " treino" via .so-largo. O período
   personalizado é a exceção: são dois campos de data, precisam da linha
   inteira, e por isso quebram abaixo (flex-basis:100%). */
@media (max-width:640px){
  .treinos-toolbar{ flex-wrap:nowrap; gap:8px; }
  .treinos-toolbar-esq{ flex:1; min-width:0; gap:8px; }
  .treinos-select-periodo{ flex:1; min-width:0; padding-left:10px; padding-right:8px; font-size:0.74rem; }
  .treinos-periodo-custom{ flex-basis:100%; }
  .treinos-toolbar-dir{ flex-wrap:nowrap; gap:8px; flex-shrink:0; }
  .treinos-toolbar-dir .treinos-btn-primario,
  .treinos-toolbar-dir .treinos-btn-secundario{
    min-width:0; padding-left:9px; padding-right:9px; font-size:0.72rem; text-align:center;
  }

}

/* KPIs */
.treinos-kpis-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
@media (min-width:640px){ .treinos-kpis-grid{ grid-template-columns:repeat(4,1fr); } }
.treinos-kpi-card{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:12px; padding:16px 16px;
}
.treinos-kpi-label{ font-size:0.62rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--marrom-1); margin-bottom:8px; }
.treinos-kpi-valor{ font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--ink-resumo); }
.treinos-kpi-valor .unidade{ font-family:var(--sans); font-size:0.8rem; font-weight:500; color:var(--marrom-1); }
/* Nota de cobertura — ressalva de confiabilidade, não um destaque: por isso
   sempre abaixo do número, nunca como badge colorido. */
.treinos-kpi-cobertura{ font-size:0.68rem; color:var(--marrom-1); margin-top:6px; line-height:1.4; }
@media (max-width:640px){
  /* Os quatro contadores numa linha só: ~83px por card a 390px. O rótulo
     encolhe via .so-largo e o número cai de 1,7rem para caber. */
  .treinos-kpis-grid{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .treinos-kpi-card{ padding:12px 8px; }
  .treinos-kpi-label{ font-size:0.56rem; letter-spacing:0.04em; margin-bottom:6px; }
  .treinos-kpi-valor{ font-size:1.15rem; line-height:1.2; }
  .treinos-kpi-valor .unidade{ display:block; font-size:0.62rem; }
  .treinos-kpi-cobertura{ font-size:0.6rem; }
}

/* Gráficos */
.treinos-graficos-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
@media (min-width:960px){ .treinos-graficos-grid{ grid-template-columns:1fr 1fr; } }
.treinos-card{ background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:12px; padding:18px; }
.treinos-card-titulo{ font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink-resumo); margin-bottom:2px; }
.treinos-card-desc{ font-size:0.76rem; color:var(--marrom-1); margin-bottom:12px; }
/* Os dois cards de gráfico (Consistência e Duração/esforço) usam a MESMA
   altura de canvas — antes um tinha uma altura "alta" própria e o outro não,
   o que fazia o par ficar com bases desalinhadas lado a lado. */
.treinos-grafico-canvas-wrap{ position:relative; height:300px; }
.treinos-grafico-canvas-wrap canvas{ max-width:100%; }
@media (max-width:1023px){
  .treinos-card{ padding:14px; }
  .treinos-grafico-canvas-wrap{ height:230px; }
}

/* Comparativo com período anterior — barras (CSS puro, sem gráfico): treinos,
   duração total e calorias não cabem numa escala única, e o par de barras
   (anterior/atual) por métrica comunica a variação melhor que um Y comum. */
.treinos-comparativo-legenda{ display:flex; gap:16px; margin-bottom:20px; font-size:0.68rem; color:var(--marrom-1); }
.treinos-comparativo-legenda span{ display:flex; align-items:center; gap:6px; }
.treinos-comparativo-legenda .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.treinos-comparativo-lista{ display:flex; flex-direction:column; gap:18px; }
.treinos-comp-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.treinos-comp-label{ font-size:0.82rem; color:var(--ink-resumo); }
/* Direção, não mérito: verde/vermelho aqui indicam só se o número aumentou
   ou caiu, nunca se isso é bom ou ruim (o produto não avalia desempenho). */
.treinos-comp-delta{ font-size:0.76rem; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.treinos-comp-delta.up{ color:var(--ok-resumo); background:rgba(74,100,56,0.10); }
.treinos-comp-delta.down{ color:var(--alert-resumo); background:rgba(156,74,54,0.10); }
.treinos-comp-bars{ display:flex; flex-direction:column; gap:7px; }
.treinos-comp-bar-row{ display:flex; align-items:center; gap:18px; }
.treinos-comp-bar-track{ flex:1; height:18px; background:var(--creme-bg); border-radius:3px; overflow:hidden; min-width:0; }
.treinos-comp-bar-fill{ height:18px; border-radius:3px; }
.treinos-comp-bar-fill.anterior{ background:var(--salvia-1); }
.treinos-comp-bar-fill.atual{ background:var(--oliva-1); }
/* Largura fixa e texto centralizado dentro dela — não colado no fim do
   valor nem grudado na borda direita do card. */
.treinos-comp-bar-valor{ width:96px; font-size:0.76rem; color:var(--oliva-2); text-align:center; flex-shrink:0; }
.treinos-comp-bar-valor.atual{ font-size:0.82rem; color:var(--ink-resumo); font-weight:600; }
@media (max-width:640px){ .treinos-comp-bar-valor{ width:72px; font-size:0.7rem; } }

/* Histórico — filtro por tipo (pílulas, em vez de <select>). nowrap +
   overflow-x pra nunca quebrar linha (mesmo padrão da toolbar principal). */
.treinos-historico-filtro{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.treinos-filtro-pill{
  width:auto; height:auto; margin-top:0; /* sobrescreve o reset global de <button> (width:100%; height:46px) */
  border:1px solid var(--salvia-1); padding:7px 15px; border-radius:20px; font-family:var(--sans);
  font-size:0.76rem; cursor:pointer; background:var(--card-resumo); color:var(--marrom-1);
  white-space:nowrap; flex-shrink:0;
}
.treinos-filtro-pill.ativo{ background:var(--oliva-1); border-color:var(--oliva-1); color:var(--card-resumo); }
.treinos-filtro-pill:hover:not(.ativo){ background:var(--salvia-2); }

/* Histórico — accordion de meses: recolhido por padrão, mostrando nome do
   mês + contagem + uma barra proporcional força/cardio, para dar noção de
   volume sem exigir clique. */
.mes-grupo-cabecalho{ gap:14px; }
.mes-grupo-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.mes-grupo-barra{ display:flex; height:6px; width:90px; border-radius:3px; overflow:hidden; flex-shrink:0; }
.mes-grupo-barra .forca{ background:var(--oliva-1); }
.mes-grupo-barra .cardio{ background:var(--salvia-1); }
@media (max-width:640px){ .mes-grupo-barra{ width:52px; } }

/* Histórico — cabeçalho de colunas (desktop) e linhas (grid responsivo via
   áreas nomeadas) */
.treinos-linha-head{
  display:none; padding:10px 6px; font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--marrom-1);
}
@media (min-width:760px){
  .treinos-linha-head{ display:grid; grid-template-columns:84px 130px 58px 66px 92px 92px 28px; gap:8px; }
}
.treinos-linha{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:
    "data tag menu"
    "dur  dur  kcal"
    "fc   fc   esf";
  gap:3px 10px; align-items:center;
  padding:12px 4px; border-bottom:1px solid var(--hairline-resumo);
  font-size:0.8rem; color:var(--ink-resumo);
}
.treinos-linha:last-child{ border-bottom:none; }
@media (min-width:760px){
  .treinos-linha{
    grid-template-columns:84px 130px 58px 66px 92px 92px 28px;
    grid-template-areas: "data tag dur kcal fc esf menu";
    gap:8px; padding:12px 6px;
  }
}
.tl-f-data{ grid-area:data; color:var(--marrom-1); font-size:0.76rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-f-tag{ grid-area:tag; justify-self:start; min-width:0; max-width:100%; }
.tl-f-dur{ grid-area:dur; font-size:0.76rem; color:var(--marrom-1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-f-kcal{ grid-area:kcal; font-size:0.76rem; color:var(--marrom-1); justify-self:end; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:760px){ .tl-f-kcal{ justify-self:start; } }
.tl-f-fc{ grid-area:fc; font-size:0.76rem; color:var(--marrom-1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-f-esf{ grid-area:esf; font-size:0.76rem; color:var(--marrom-1); justify-self:end; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:760px){ .tl-f-esf{ justify-self:start; } }
.tl-f-menu{ grid-area:menu; justify-self:end; position:relative; flex-shrink:0; }
.tl-tag{
  display:inline-flex; align-items:center; gap:6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:bottom; font-size:0.76rem; color:var(--ink-resumo);
}
.tl-tag::before{ content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.tl-tag-forca::before{ background:var(--oliva-1); }
.tl-tag-cardio::before{ background:var(--salvia-1); }
.tl-tag-outros::before{ background:var(--oliva-2); }
.tl-menu-btn{
  width:28px; height:28px; margin-top:0; border-radius:8px; border:1px solid transparent; background:none;
  color:var(--marrom-1); font-size:1.1rem; font-weight:700; cursor:pointer; line-height:1;
}
.tl-menu-btn:hover, .tl-menu-btn:focus-visible{ background:var(--salvia-2); outline:none; }
.tl-menu-dropdown{
  position:absolute; top:calc(100% + 4px); right:0; min-width:140px; z-index:20;
  background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:8px; padding:5px;
  box-shadow:0 14px 34px rgba(46,42,32,.14);
}
.tl-menu-dropdown button{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink-resumo);
  font-size:0.78rem; font-weight:500; padding:8px 9px; border-radius:6px; cursor:pointer; margin-top:0;
}
.tl-menu-dropdown button:hover{ background:var(--salvia-2); }
.tl-menu-dropdown button.tl-menu-excluir{ color:var(--alert-resumo); }
.tl-menu-dropdown button.tl-menu-excluir:hover{ background:rgba(156,74,54,0.08); }

.treinos-mes-empty{ padding:24px 4px; }

/* Painéis de registro (formulário manual, upload, IA): o .painel-ghost
   original é uma superfície translúcida pensada pra um fundo escuro — sobre
   o creme desta aba ficava quase invisível. Aqui ganha o mesmo cartão claro
   do resto da aba, e campos/labels/botões seguem a mesma identidade (em vez
   dos tons dourados/escuros do formulário genérico do resto do arquivo). */
#treinos-paineis-registro{
  background:var(--card-resumo); border:1px solid var(--hairline-resumo); border-radius:12px;
  padding:20px; margin-bottom:18px; backdrop-filter:none; -webkit-backdrop-filter:none;
}
#treinos-paineis-registro label, #treino-modal-form label{
  color:var(--marrom-1); font-size:0.68rem; font-weight:700; letter-spacing:0.05em; margin:12px 0 5px;
}
#treinos-paineis-registro label:first-of-type, #treino-modal-form label:first-of-type{ margin-top:0; }
#treinos-paineis-registro input, #treinos-paineis-registro select, #treino-modal-form input, #treino-modal-form select{
  height:42px; background:var(--creme-bg); border:1px solid var(--hairline-resumo); border-radius:8px;
  color:var(--ink-resumo); font-size:0.84rem;
}
#treinos-paineis-registro input::placeholder, #treino-modal-form input::placeholder{ color:var(--marrom-1); opacity:.55; }
#treinos-paineis-registro input:focus, #treinos-paineis-registro select:focus,
#treino-modal-form input:focus, #treino-modal-form select:focus{
  border-color:var(--salvia-1); box-shadow:0 0 0 3px rgba(148,140,99,.14);
}
#treinos-paineis-registro .grid2, #treino-modal-form .grid2{ gap:12px; }
#treinos-paineis-registro button{
  background:var(--oliva-1); color:var(--card-resumo); font-weight:600; height:44px; border-radius:8px;
}
#treinos-paineis-registro button:hover{ background:#5f5738; }
#treinos-paineis-registro button:disabled{ background:var(--salvia-1); color:var(--marrom-1); cursor:not-allowed; }
#treinos-paineis-registro .panel-desc, #treino-modal-form .panel-desc{ color:var(--marrom-1) !important; }
/* ── /TREINOS ── */

/* ══════════════════════════════════════════
   MINHA JORNADA — reaproveita .treinos-card, .treinos-filtro-pill,
   .fotos-input/.fotos-trigger e o componente .cc-delta-card (mesmo usado em
   Composição Corporal) de outras abas. Só o que não existe em nenhuma outra
   aba (linha do tempo, formato do post, prévia de compartilhamento) ganha
   CSS novo aqui.
══════════════════════════════════════════ */
.jornada-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:960px){ .jornada-grid{ grid-template-columns:1.05fr 0.95fr; align-items:start; } }

.jornada-timeline-item{ display:flex; gap:12px; }
.jornada-timeline-rail{ display:flex; flex-direction:column; align-items:center; width:12px; flex-shrink:0; }
.jornada-timeline-dot{ width:9px; height:9px; border-radius:50%; background:var(--oliva-2); flex-shrink:0; margin-top:3px; }
.jornada-timeline-dot.marco{ background:var(--ok-resumo); }
.jornada-timeline-dot.atual{ background:transparent; border:1.5px solid var(--oliva-2); }
.jornada-timeline-line{ width:1px; flex:1; min-height:30px; background:var(--hairline-resumo); margin-top:2px; }
.jornada-timeline-body{ padding-bottom:22px; min-width:0; }
.jornada-timeline-titulo{ font-family:var(--serif); font-size:0.86rem; font-weight:600; color:var(--ink-resumo); }
.jornada-timeline-titulo.atual{ font-style:italic; font-weight:500; color:var(--marrom-1); }
.jornada-timeline-data{ font-size:0.72rem; color:var(--marrom-1); margin-top:2px; }
/* Variação acumulada até aquele ponto da jornada — linha discreta, fonte
   menor que o título do marco, sem cor de julgamento (mesma seta neutra
   de jornadaFormatarDelta usada no resto do dashboard). */
.jornada-timeline-indicadores{ font-size:0.68rem; color:var(--oliva-1); margin-top:5px; line-height:1.5; }

.jornada-campo-label{
  font-size:0.62rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--marrom-1); margin-bottom:8px; display:block;
}
.jornada-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
/* Seletor de indicadores da aba Minha Jornada. Substituiu a lista de nove
   chips empilhados: ocupava quase uma tela para uma escolha de até quatro.
   O <select> é nativo (roda do sistema no celular) e some quando o teto de
   4 é atingido — daí não existir mais estado "chip desabilitado". */
.jornada-select-indicador{
  width:100%; max-width:340px; height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--hairline-resumo); background:var(--card-resumo);
  color:var(--ink-resumo); font-family:var(--sans); font-size:16px; font-weight:600;
}
/* Chip do que já foi escolhido: clicar remove. O × depois do rótulo é o
   que diz isso — sem ele, um chip "ativo" parece só um estado ligado. */
.jornada-chip-escolhido{ display:inline-flex; align-items:center; gap:8px; }
.jornada-chip-escolhido span{ font-size:15px; line-height:1; opacity:.75; }
.jornada-limite-metricas{ font-size:0.68rem; color:var(--marrom-1); margin-bottom:18px; }
/* Cada bloco de seleção (Indicadores / Foto / Frase) é uma decisão
   independente — espaçamento maior entre blocos do que entre chips dentro
   do mesmo bloco, pra ficar visualmente claro que não é uma lista única. */
.jornada-bloco-selecao{ margin-bottom:20px; }
.jornada-bloco-selecao .jornada-chips{ margin-bottom:0; }

#tab-jornada input[type="text"]{
  width:100%; height:auto; background:var(--creme-bg); border:1px solid var(--hairline-resumo);
  border-radius:8px; color:var(--ink-resumo); font-family:var(--serif); font-style:italic;
  font-size:0.9rem; padding:10px 12px; margin:0 0 10px;
}
#tab-jornada input[type="text"]:focus{ outline:none; border-color:var(--salvia-1); box-shadow:0 0 0 3px rgba(148,140,99,.14); }
.jornada-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.jornada-preset-btn{
  width:auto; height:auto; margin-top:0; border:1px solid var(--hairline-resumo); background:var(--creme-bg);
  color:var(--marrom-1); font-size:0.68rem; padding:5px 10px; border-radius:14px; cursor:pointer;
}
.jornada-preset-btn:hover{ background:var(--salvia-2); }

#tab-jornada .fotos-input + .fotos-trigger{ width:auto; height:auto; margin-top:0; display:inline-flex; margin-bottom:18px; }

.jornada-formato-toggle{ display:flex; gap:8px; margin-bottom:20px; }
.jornada-formato-btn{ flex:1; text-align:center; }
.jornada-formato-btn.ativo{ background:var(--oliva-1); color:var(--card-resumo); border-color:var(--oliva-1); }

.jornada-preview-shell{ display:flex; justify-content:center; margin-bottom:20px; }
/* O card inteiro (fundo, foto, título, frase, métricas, rodapé — tudo) é
   desenhado uma única vez, no canvas (jornadaDesenharCard). Esse MESMO
   <canvas> é o que aparece aqui como prévia (escalado por CSS, resolução
   real por trás) e o que vira o PNG salvo/compartilhado — não existe mais
   nenhuma versão em HTML/CSS tentando reproduzir esse layout em paralelo.
   As duas implementações divergiam a cada ajuste justamente porque eram,
   na prática, duas fontes de verdade independentes do mesmo design; com
   uma só, não tem como haver diferença entre prévia e imagem final. */
.jornada-preview-card{
  width:220px; border-radius:14px; border:1px solid var(--hairline-resumo);
  overflow:hidden; background:var(--creme-bg);
}
.jornada-preview-card.formato-stories{ width:180px; }
#jornada-preview-canvas{ display:block; width:100%; height:auto; touch-action:none; }
/* Arrastar diretamente sobre a foto do preview reposiciona o enquadramento
   (arraste ligado no bloco de script principal) — cursor de "arrastar" só quando há foto pra
   arrastar; o resto do card (texto, sem foto) não reage ao arraste. */
.jornada-preview-card.tem-foto #jornada-preview-canvas{ cursor:grab; }
.jornada-preview-card.tem-foto #jornada-preview-canvas:active{ cursor:grabbing; }

.jornada-hint{ font-size:0.68rem; color:var(--marrom-1); margin-top:10px; text-align:center; line-height:1.4; }

/* ── Editor manual de foto (arrastar + zoom) ── */
.jornada-ajuste-card{ max-width:380px; overflow-y:auto; }
.jornada-ajuste-area{
  position:relative; width:100%; overflow:hidden; border-radius:10px;
  background:#1a1a12; touch-action:none; cursor:grab; user-select:none;
  margin-bottom:16px;
}
.jornada-ajuste-area:active{ cursor:grabbing; }
.jornada-ajuste-area img{
  position:absolute; left:0; top:0; max-width:none; pointer-events:none;
}
.jornada-ajuste-zoom-linha{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.jornada-ajuste-zoom-icone{ font-size:1rem; color:var(--marrom-1); font-weight:700; flex-shrink:0; width:14px; text-align:center; }
.jornada-ajuste-zoom-linha input[type="range"]{
  flex:1; accent-color:var(--oliva-1); cursor:pointer;
}
/* ── /MINHA JORNADA ── */

/* ══════════════════════════════════════════════════════════
   iOS: campo com fonte menor que 16px faz o Safari DAR ZOOM
   ══════════════════════════════════════════════════════════
   Ao focar um input com font-size < 16px, o Safari amplia a página — e
   NÃO desfaz a ampliação quando o campo perde o foco. O efeito é que a
   paciente digita e-mail e senha, entra, e o portal inteiro fica zoomado,
   com o texto cortado nas laterais.

   Por isso, no toque, todo campo vale 16px. No desktop as medidas do
   desenho seguem valendo — lá o problema não existe.

   O seletor lista os casos por nome porque regras de classe vencem o
   seletor de elemento; e este bloco fica no FIM do arquivo para ganhar
   por ordem de quem tiver a mesma especificidade. */
@media (max-width: 1023px) {
  input, select, textarea,
  #login-box input,
  .pf-select, .pf-textarea,
  .ci-textarea,
  #checkin-retroativo-select,
  .fotos-data-campo input[type="date"],
  .fotos-comparacao-campo select { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   Rodapé do login: no pé da tela, não colado no card
   ══════════════════════════════════════════════════════════
   #login-content é uma coluna flex com gap de 20px, então o aviso de
   privacidade e a assinatura Íris ficavam logo abaixo do cartão, no meio
   da tela — não liam como rodapé. O margin-top:auto empurra os dois para
   o fim do espaço disponível.

   Só abaixo de 1024px: no desktop o layout é lado a lado e centralizado,
   e o aviso de privacidade nem aparece (fica no painel da marca). */
@media (max-width: 1023px) {
  /* O aviso acompanha o CARTÃO (fica logo abaixo dele); quem desce para o
     pé da tela é só a assinatura Íris — por isso o margin-top:auto está
     nela, e não no aviso. */
  .login-privacidade { padding-top: 18px; }
  /* A barra de gestos do iPhone come o pé da tela; sem o env() a
     assinatura fica embaixo dela em aparelho com notch. */
  #login-content > .iris-lockup {
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}


/* ══════════════════════════════════════════════════════════
   Faixa de contexto no celular — três cards numa linha
   ══════════════════════════════════════════════════════════
   Depois que o card "Início do acompanhamento" saiu, sobram três. A 390px
   a largura útil é 354px; com o gap e o separador de 22px de cada lado
   sobravam ~88px por card, e nem o rótulo "PRÓXIMA CONSULTA" cabia. Gap e
   separador encolhem, e a data usa o formato curto — ver o hc-consulta-val
   em dashboard.js, que escolhe o formato pela largura da tela. */
@media (max-width:640px){
  .header-cards{ gap:10px; }
  .hc-card + .hc-card{ padding-left:10px; }
  .hc-label{ font-size:0.5rem; letter-spacing:0.06em; line-height:1.25; }
  /* break-word, não anywhere: quebra a palavra só quando ela realmente
     não cabe. O nome do plano é texto livre cadastrado na Central de
     Pacientes, então um nome muito longo tem que quebrar em vez de
     invadir o card vizinho — mas sem partir "Acompanhamento" ao meio
     quando há espaço. */
  .hc-val{ font-size:0.92rem; overflow-wrap:break-word; }
  .hc-sub{ font-size:0.58rem; overflow-wrap:break-word; }
}


/* Nome próprio (-urgencia) porque .pf-aviso JÁ EXISTE, e é a nota neutra
   sobre agendar pelo WhatsApp — reaproveitar o nome pintaria aquela nota
   de alerta vermelho.
   Aviso de urgência do Fale com a Equipe — lê diferente do subtítulo por
   ser aviso de segurança clínica, não informação de contexto. Tom de alerta
   da identidade (--alert-resumo/erro), fundo suave e barra à esquerda; a
   palavra "Importante" em caixa alta, como as etiquetas do portal. */
.pf-aviso-urgencia{
  margin-top:12px; padding:12px 14px; border-radius:10px;
  background:#FBEEEB; border:1px solid #E7C7BF; border-left:3px solid #A33A2A;
  font-size:13.5px; line-height:1.55; color:#7A2A1D; max-width:640px;
}
.pf-aviso-urgencia strong{
  display:inline-block; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; font-size:11.5px; margin-right:4px;
}


/* Trecho de texto que só aparece em tela larga. Usado nos botões dos três
   ângulos da Evolução Fotográfica: no celular eles ficam em colunas de
   ~112px e "Escolher foto" não cabe; o nome do ângulo, logo acima, já diz
   o que se escolhe. */
@media (max-width:1023px){ .so-largo{ display:none; } }