/* ==========================================================
   Segue o Treino — fundamentos + componentes
   Mobile primeiro (390 px, mínimo 360 px); desktop a partir de 1024 px.
   Contrastes conferidos (WCAG 2.1) — ver docs/fundamentos.html.
   ========================================================== */

:root {
  /* Marca */
  --berinjela: #34243E;      /* principal: títulos, navegação, áreas escuras */
  --berinjela-2: #4A3858;    /* hover/pressionado em áreas escuras */
  --berinjela-tinta: #EFEAF2;/* fundo suave de seleção neutra */
  --turquesa: #31C5CB;       /* ações principais, seleção, destaques (NÃO para texto pequeno sobre claro) */
  --turquesa-hover: #27B3B9;
  --turquesa-texto: #0B7379; /* turquesa escurecido p/ texto e ícones sobre claro (5,3:1) */
  --turquesa-tinta: #E2F5F6;
  --branco-quente: #FAF8F4;  /* fundo */

  /* Neutros */
  --superficie: #FFFFFF;
  --superficie-2: #F3F0EA;
  --linha: #E4DED4;
  --linha-forte: #CFC7BB;
  --texto: #34243E;
  --texto-2: #5E5266;        /* 6,9:1 sobre fundo */
  --texto-3: #6F6476;        /* 5,3:1 — legendas */

  /* Estados (sem laranja e sem verde-lima) */
  --sucesso: #1D6F55;  --sucesso-tinta: #E3F2EB;
  --alerta: #6E5300;   --alerta-tinta: #FBF1D2;
  --erro: #B0233F;     --erro-tinta: #FBE8EC;
  --info: var(--turquesa-texto); --info-tinta: var(--turquesa-tinta);

  /* Forma */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sombra: 0 1px 2px rgba(52, 36, 62, .06);
  --sombra-flutuante: 0 8px 28px rgba(52, 36, 62, .16);
  --toque: 48px;

  /* Espaço (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  --fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--branco-quente);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: var(--turquesa-texto); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.ic { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 32px; height: 32px; }

/* Texto auxiliar */
.legenda { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.sobretitulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.muted { color: var(--texto-2); }
.forte { font-weight: 800; }

/* ==================== Estrutura ==================== */
.app { min-height: 100vh; min-height: 100dvh; }
.conteudo {
  padding: var(--e4) var(--e4) calc(var(--nav-h) + var(--safe-b) + var(--e6));
  max-width: 640px; margin: 0 auto;
}
.foco .conteudo, .sem-nav .conteudo { padding-bottom: calc(var(--e6) + var(--safe-b)); }
.pilha > * + * { margin-top: var(--e4); }
.pilha-lg > * + * { margin-top: var(--e6); }
.linha { display: flex; align-items: center; gap: var(--e3); }
.linha-sep { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.quebra { flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); }
.grade-2 > .btn { padding: 0 var(--e3); }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin: var(--e6) 0 var(--e3); }
.secao-titulo h2 { font-size: 18px; }

/* Barra superior (mobile) */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--branco-quente) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: calc(var(--safe-t) + var(--e2)) var(--e2) var(--e2);
  display: flex; align-items: center; gap: var(--e1);
  min-height: 60px;
  border-bottom: 1px solid transparent;
}
.topo.com-linha { border-bottom-color: var(--linha); }
.topo h1 { font-size: 18px; flex: 1; min-width: 0; padding: 0 var(--e2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .acoes { display: flex; gap: var(--e1); margin-left: auto; }

/* Navegação inferior */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--safe-b);
}
.nav-inferior a {
  min-height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texto-2); text-decoration: none; font-size: 12px; font-weight: 700;
}
.nav-inferior a .pilula { width: 56px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; }
.nav-inferior a[aria-current=page] { color: var(--berinjela); }
.nav-inferior a[aria-current=page] .pilula { background: var(--turquesa); }

/* Barra "voltar ao treino ativo" (aparece acima da nav quando há sessão) */
.retorno-treino {
  position: fixed; left: var(--e3); right: var(--e3); z-index: 29;
  bottom: calc(var(--nav-h) + var(--safe-b) + var(--e2));
  background: var(--berinjela); color: #fff; border-radius: var(--r-lg);
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e2) var(--e2) var(--e4); min-height: 56px;
  text-decoration: none; box-shadow: var(--sombra-flutuante);
}
.retorno-treino .cresce { line-height: 1.25; }
.retorno-treino small { display: block; color: #D9CFE0; font-weight: 600; font-size: 12px; }
.retorno-treino strong { font-size: 15px; }
.retorno-treino .tempo { font-weight: 800; font-size: 17px; color: var(--turquesa); }
body.com-retorno .conteudo { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 90px); }

/* Menu lateral (desktop) */
.lateral { display: none; }
.marca-linha { display: flex; align-items: center; gap: var(--e3); font-weight: 800; font-size: 18px; color: inherit; text-decoration: none; }

/* Espaço reservado para o logo aprovado (ativo ainda não recebido) */
.logo-slot {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  border: 2px dashed currentColor; opacity: .7;
  display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.05;
}
.logo-slot.grande { width: 72px; height: 72px; border-radius: 18px; font-size: 11px; }

@media (min-width: 1024px) {
  body:not(.foco):not(.sem-nav) .app { display: grid; grid-template-columns: 264px 1fr; }
  .lateral {
    display: flex; flex-direction: column; gap: var(--e1);
    position: sticky; top: 0; height: 100vh;
    background: var(--berinjela); color: #fff; padding: var(--e6) var(--e4);
  }
  .lateral .marca-linha { padding: var(--e2) var(--e3) var(--e6); color: #fff; }
  .lateral a.item {
    display: flex; align-items: center; gap: var(--e3);
    min-height: 48px; padding: 0 var(--e4); border-radius: var(--r);
    color: #E6DEEB; text-decoration: none; font-weight: 700; font-size: 15px;
  }
  .lateral a.item:hover { background: var(--berinjela-2); color: #fff; }
  .lateral a.item[aria-current=page] { background: var(--turquesa); color: var(--berinjela); }
  .lateral .rodape { margin-top: auto; }
  .lateral .ativo-card { background: var(--berinjela-2); border-radius: var(--r); padding: var(--e4); margin-bottom: var(--e3); }
  .lateral .ativo-card small { color: #D9CFE0; font-weight: 600; display: block; font-size: 12px; }
  .lateral .ativo-card .tempo { color: var(--turquesa); font-weight: 800; font-size: 22px; }
  .nav-inferior, .retorno-treino { display: none; }
  .conteudo { max-width: 1200px; padding: var(--e8) var(--e10) var(--e10); }
  body.com-retorno .conteudo { padding-bottom: var(--e10); }
  .topo { padding: var(--e5) var(--e10) var(--e3); background: var(--branco-quente); backdrop-filter: none; }
  .topo h1 { font-size: 28px; padding: 0; }
  .topo .so-mobile { display: none; }
  .so-mobile { display: none !important; }
  .grade-desk-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e6); align-items: start; }
  .grade-desk-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
  .grade-desk-2 > * + *, .grade-desk-3 > * + * { margin-top: 0 !important; }
}
@media (max-width: 1023.98px) { .so-desktop { display: none !important; } }

/* ==================== Botões ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: 0 var(--e5);
  border-radius: var(--r); border: 2px solid transparent;
  font-weight: 800; font-size: 16px; line-height: 1.1; text-decoration: none; cursor: pointer;
  background: var(--superficie); color: var(--berinjela);
  transition: background-color .12s, border-color .12s;
  user-select: none; -webkit-user-select: none;
}
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--turquesa); color: var(--berinjela); }
.btn-primario:hover { background: var(--turquesa-hover); }
.btn-escuro { background: var(--berinjela); color: #fff; }
.btn-escuro:hover { background: var(--berinjela-2); }
.btn-contorno { border-color: var(--linha-forte); background: var(--superficie); }
.btn-contorno:hover { border-color: var(--berinjela); }
.btn-contorno-escuro { border-color: var(--berinjela); background: transparent; }
.btn-texto { background: transparent; color: var(--berinjela); padding: 0 var(--e3); }
.btn-texto:hover { background: var(--berinjela-tinta); }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo-contorno { background: var(--superficie); border-color: #E6B3BE; color: var(--erro); }
.btn-g { min-height: 60px; font-size: 18px; border-radius: var(--r-lg); padding: 0 var(--e6); }
.btn-gg { min-height: 72px; font-size: 20px; border-radius: var(--r-lg); padding: 0 var(--e6); }
.btn-bloco { width: 100%; }
.btn-icone { width: var(--toque); height: var(--toque); min-height: 0; padding: 0; border-radius: var(--r); background: transparent; border: 0; }
.btn-icone:hover { background: var(--berinjela-tinta); }
.btn-icone.redondo { border-radius: 50%; }
.btn-icone.cheio { background: var(--superficie); border: 1px solid var(--linha); }
.acoes-pe { display: flex; flex-direction: column; gap: var(--e3); }

/* Barra de ação fixa no alcance do polegar */
.barra-acao {
  position: sticky; bottom: 0; z-index: 15;
  margin: var(--e6) calc(-1 * var(--e4)) 0;
  padding: var(--e3) var(--e4) calc(var(--e3) + var(--safe-b));
  background: linear-gradient(to top, var(--branco-quente) 75%, color-mix(in srgb, var(--branco-quente) 0%, transparent));
}
body:not(.foco):not(.sem-nav) .barra-acao { bottom: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--e3); }
@media (min-width: 1024px) {
  .barra-acao, body:not(.foco):not(.sem-nav) .barra-acao { position: static; background: none; margin: var(--e6) 0 0; padding: 0; }
}

/* ==================== Cards ==================== */
.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: var(--e4); }
.card-plano { background: var(--superficie-2); border-color: transparent; }
.card-escuro { background: var(--berinjela); color: #fff; border-color: var(--berinjela); }
.card-escuro .legenda, .card-escuro .muted { color: #D9CFE0; }
.card-destaque { border: 2px solid var(--turquesa); }
.card-link { display: block; text-decoration: none; color: inherit; font-weight: inherit; }
.card-link:hover { border-color: var(--linha-forte); }
.card-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.divisor { height: 1px; background: var(--linha); margin: var(--e4) 0; border: 0; }

/* Etiquetas (sempre ícone + texto, nunca só cor) */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto);
}
.tag .ic { width: 16px; height: 16px; }
.tag-tipo { background: var(--berinjela-tinta); color: var(--berinjela); }
.tag-andamento { background: var(--turquesa-tinta); color: var(--turquesa-texto); }
.tag-concluido, .tag-realizado { background: var(--sucesso-tinta); color: var(--sucesso); }
.tag-pausado { background: var(--alerta-tinta); color: var(--alerta); }
.tag-pulado { background: var(--superficie-2); color: var(--texto-2); }
.tag-planejado { background: var(--superficie); color: var(--texto-2); border: 1px dashed var(--linha-forte); }
.tag-reagendado { background: var(--berinjela-tinta); color: var(--berinjela); }
.tag-nao-realizado { background: var(--superficie-2); color: var(--texto-2); }
.tag-editado { background: var(--superficie-2); color: var(--texto-2); }
.tag-local { background: var(--alerta-tinta); color: var(--alerta); }
.tag-sync { background: var(--sucesso-tinta); color: var(--sucesso); }
.tag-escuro { background: rgba(255,255,255,.12); color: #fff; }

/* ==================== Campos ==================== */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo + .campo { margin-top: var(--e4); }
.rotulo { font-size: 14px; font-weight: 800; color: var(--berinjela); }
.rotulo .opcional { font-weight: 600; color: var(--texto-3); }
.ajuda { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--linha-forte); border-radius: var(--r);
  background: var(--superficie); font-size: 16px; font-weight: 600; color: var(--berinjela);
}
textarea.entrada { min-height: 104px; resize: vertical; line-height: 1.45; }
.entrada::placeholder { color: #8C8290; font-weight: 500; }
.entrada:focus { outline: none; border-color: var(--turquesa-texto); box-shadow: 0 0 0 3px rgba(49, 197, 203, .35); }
.campo.invalido .entrada { border-color: var(--erro); }
.msg-erro { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--erro); }
.msg-erro .ic { width: 16px; height: 16px; }
.entrada-com-unidade { position: relative; }
.entrada-com-unidade .entrada { padding-right: 64px; }
.entrada-com-unidade .unidade { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--texto-2); font-size: 14px; }
.senha-wrap { position: relative; }
.senha-wrap .entrada { padding-right: 56px; }
.senha-wrap .btn-icone { position: absolute; right: 2px; top: 2px; }

/* Interruptor */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 56px; cursor: pointer; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 32px; background: var(--linha-forte); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked { background: var(--berinjela); }
.interruptor input:checked::after { transform: translateX(20px); background: var(--turquesa); }
.interruptor .texto strong { display: block; font-weight: 700; }
.interruptor .texto span { font-size: 13px; color: var(--texto-3); font-weight: 600; }

/* Controle segmentado e chips */
.segmentado { display: flex; background: var(--superficie-2); border-radius: var(--r); padding: 4px; gap: 4px; }
.segmentado button { flex: 1; min-height: 44px; border: 0; background: transparent; border-radius: 9px; font-weight: 800; font-size: 14px; cursor: pointer; color: var(--texto-2); }
.segmentado button[aria-pressed=true] { background: var(--superficie); color: var(--berinjela); box-shadow: var(--sombra); }
.chips { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--e4)); padding: 2px var(--e4); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: var(--toque); padding: 0 var(--e4); border-radius: var(--r-pill);
  border: 1.5px solid var(--linha-forte); background: var(--superficie);
  font-weight: 700; font-size: 15px; cursor: pointer; color: var(--berinjela); text-decoration: none;
}
.chip[aria-pressed=true], .chip.ativo { background: var(--berinjela); border-color: var(--berinjela); color: #fff; }
.chip .ic { width: 18px; height: 18px; }
.chip .check { display: none; }
.chip[aria-pressed=true] .check { display: block; }

/* ==================== Seletor de carga / número ==================== */
.seletor-num { display: grid; grid-template-columns: 64px 1fr 64px; align-items: stretch; gap: var(--e2); }
.seletor-num .menos, .seletor-num .mais {
  min-height: 64px; border-radius: var(--r-lg); border: 1.5px solid var(--linha-forte);
  background: var(--superficie); cursor: pointer; display: grid; place-items: center; color: var(--berinjela);
  font-weight: 800; font-size: 13px;
}
.seletor-num .menos:active, .seletor-num .mais:active { background: var(--berinjela-tinta); }
.seletor-num .valor { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: var(--superficie-2); min-height: 64px; }
.seletor-num .valor input {
  width: 100%; border: 0; background: transparent; text-align: center;
  font-size: 40px; font-weight: 800; color: var(--berinjela); padding: 0 64px 0 8px; min-height: 64px;
  font-variant-numeric: tabular-nums; border-radius: var(--r-lg);
}
.seletor-num .valor input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--turquesa-texto); }
.seletor-num .valor .un { position: absolute; right: 12px; font-size: 15px; font-weight: 800; color: var(--texto-2); pointer-events: none; text-align: right; line-height: 1.1; }
.seletor-num.compacto { grid-template-columns: 48px 1fr 48px; }
.seletor-num.compacto .menos, .seletor-num.compacto .mais, .seletor-num.compacto .valor, .seletor-num.compacto .valor input { min-height: 48px; }
.seletor-num.compacto .valor input { font-size: 22px; padding: 0 4px; }
.seletor-num.compacto .valor .un { position: static; margin-right: 8px; font-size: 13px; }
.passo-carga { display: flex; gap: var(--e2); margin-top: var(--e2); align-items: center; }

/* ==================== Cronômetros ==================== */
.cron { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.cron-g { font-size: 44px; }
.cron-m { font-size: 28px; }
.cron-gg { font-size: clamp(96px, 34vw, 200px); letter-spacing: -.05em; }
.bloco-tempo { display: flex; flex-direction: column; gap: 4px; }
.bloco-tempo .rotulo-tempo { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.bloco-tempo .rotulo-tempo .ic { width: 15px; height: 15px; }
.bloco-tempo .sub { font-size: 13px; font-weight: 600; }

/* ==================== Cards de treino ==================== */
.treino-card { display: flex; flex-direction: column; gap: var(--e3); }
.treino-card .titulo { font-size: 19px; font-weight: 800; }
.meta { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font-size: 14px; font-weight: 600; color: var(--texto-2); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta .ic { width: 17px; height: 17px; }
.icone-tipo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--berinjela-tinta); color: var(--berinjela); flex-shrink: 0; }
.icone-tipo.t-cardio { background: var(--turquesa-tinta); color: var(--turquesa-texto); }
.icone-tipo.t-esporte { background: var(--berinjela); color: var(--turquesa); }

/* ==================== Itens de exercício ==================== */
.lista-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.ex-item {
  display: flex; align-items: center; gap: var(--e3);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r);
  padding: var(--e3); min-height: 64px;
}
.ex-item .estado { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 2px solid var(--linha-forte); color: var(--texto-2); font-weight: 800; font-size: 14px; }
.ex-item .nome { font-weight: 700; line-height: 1.3; }
.ex-item .det { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.ex-item.ativo { border: 2px solid var(--turquesa); background: var(--turquesa-tinta); }
.ex-item.ativo .estado { background: var(--turquesa); border-color: var(--turquesa); color: var(--berinjela); }
.ex-item.concluido .estado { background: var(--berinjela); border-color: var(--berinjela); color: #fff; }
.ex-item.concluido .nome { color: var(--texto-2); }
.ex-item.pulado { background: var(--superficie-2); border-style: dashed; }
.ex-item.pulado .estado { border-style: dashed; }
.ex-item.pulado .nome { color: var(--texto-2); }
.ex-item .ordem { display: flex; flex-direction: column; }
.ex-item .ordem .btn-icone { height: 32px; width: 40px; }

/* Barra de progresso segmentada (ativo ≠ concluído) */
.progresso-seg { display: flex; gap: 4px; }
.progresso-seg span { flex: 1; height: 8px; border-radius: 4px; background: var(--linha); }
.progresso-seg span.c { background: var(--berinjela); }
.progresso-seg span.a { background: repeating-linear-gradient(45deg, var(--turquesa) 0 4px, var(--turquesa-tinta) 4px 8px); }
.progresso-seg span.p { background: var(--superficie-2); outline: 1px dashed var(--linha-forte); outline-offset: -1px; }

/* ==================== Calendário / semana ==================== */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.semana .dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; border-radius: var(--r); border: 1.5px solid transparent; background: transparent;
  cursor: pointer; text-decoration: none; color: var(--texto-2); font-weight: 700; padding: 4px 0;
}
.semana .dia .sem { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.semana .dia .n { font-size: 18px; font-weight: 800; color: var(--berinjela); font-variant-numeric: tabular-nums; }
.semana .dia .marcas { display: flex; gap: 3px; height: 8px; align-items: center; }
.semana .dia .marcas i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); }
.semana .dia .marcas i.r { background: var(--berinjela); }
.semana .dia .marcas i.p { background: transparent; border: 1.5px solid var(--berinjela); width: 7px; height: 7px; }
.semana .dia.hoje { border-color: var(--berinjela); }
.semana .dia[aria-pressed=true], .semana .dia.sel { background: var(--berinjela); border-color: var(--berinjela); }
.semana .dia[aria-pressed=true] .n, .semana .dia[aria-pressed=true] .sem, .semana .dia.sel .n, .semana .dia.sel .sem { color: #fff; }
.semana .dia[aria-pressed=true] .marcas i.r, .semana .dia.sel .marcas i.r { background: var(--turquesa); }
.semana .dia[aria-pressed=true] .marcas i.p, .semana .dia.sel .marcas i.p { border-color: var(--turquesa); }

.mes { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; background: var(--superficie); }
.mes .cab { padding: var(--e2); font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--texto-3); background: var(--superficie-2); text-align: center; }
.mes .cel { min-height: 104px; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); padding: 6px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.mes .cel:nth-child(7n+1) { border-left: 0; }
.mes .cel .d { font-weight: 800; font-size: 13px; }
.mes .cel.fora { background: var(--branco-quente); color: var(--texto-3); }
.mes .cel.hoje .d { background: var(--berinjela); color: #fff; border-radius: 6px; width: 26px; text-align: center; }
.evento { border-radius: 6px; padding: 3px 6px; font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.evento .ic { width: 13px; height: 13px; }
.evento.realizado { background: var(--sucesso-tinta); color: var(--sucesso); }
.evento.planejado { background: var(--superficie); border: 1px dashed var(--linha-forte); color: var(--berinjela); }
.evento.reagendado { background: var(--berinjela-tinta); color: var(--berinjela); }
.evento.nao-realizado { background: var(--superficie-2); color: var(--texto-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.evento.descanso { color: var(--texto-3); font-weight: 600; }

/* ==================== Escala de esforço ==================== */
.esforco { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e2); }
.esforco button {
  min-height: 56px; border-radius: var(--r); border: 1.5px solid var(--linha-forte); background: var(--superficie);
  font-size: 22px; font-weight: 800; cursor: pointer; color: var(--berinjela); font-variant-numeric: tabular-nums;
}
.esforco button[aria-pressed=true] { background: var(--berinjela); border-color: var(--berinjela); color: #fff; box-shadow: inset 0 -4px 0 var(--turquesa); }
.esforco-extremos { display: flex; justify-content: space-between; gap: var(--e4); font-size: 13px; font-weight: 700; color: var(--texto-2); margin-top: var(--e2); }
.esforco-extremos span:last-child { text-align: right; }
.esforco-valor { display: flex; align-items: baseline; gap: var(--e2); }
.esforco-valor strong { font-size: 40px; font-weight: 800; line-height: 1; }

/* ==================== Diálogos, folhas, mensagens ==================== */
.fundo-modal { position: fixed; inset: 0; background: rgba(35, 24, 42, .55); z-index: 60; display: none; align-items: flex-end; justify-content: center; }
.fundo-modal.aberto { display: flex; }
.folha {
  background: var(--superficie); width: 100%; max-width: 560px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--e3) var(--e4) calc(var(--e5) + var(--safe-b));
  max-height: 88vh; overflow-y: auto;
}
.folha::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--linha-forte); margin: 0 auto var(--e4); }
.folha h2 { margin-bottom: var(--e2); }
.dialogo { background: var(--superficie); width: calc(100% - 32px); max-width: 420px; border-radius: var(--r-xl); padding: var(--e6); margin: auto; }
.fundo-modal.centro { align-items: center; }
.dialogo h2 { margin-bottom: var(--e2); }
.dialogo p { color: var(--texto-2); }
.dialogo .acoes-pe { margin-top: var(--e6); }
@media (min-width: 1024px) { .fundo-modal { align-items: center; } .folha { border-radius: var(--r-xl); } .folha::before { display: none; } }

.aviso { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r); font-size: 14px; font-weight: 600; line-height: 1.4; }
.aviso .ic { width: 20px; height: 20px; margin-top: 1px; }
.aviso strong { display: block; font-weight: 800; }
.aviso-info { background: var(--info-tinta); color: #0A5C61; }
.aviso-sucesso { background: var(--sucesso-tinta); color: var(--sucesso); }
.aviso-alerta { background: var(--alerta-tinta); color: var(--alerta); }
.aviso-erro { background: var(--erro-tinta); color: var(--erro); }
.aviso-neutro { background: var(--superficie-2); color: var(--texto-2); }
.aviso .acao { margin-left: auto; align-self: center; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(var(--nav-h) + var(--safe-b) + var(--e4));
  background: var(--berinjela); color: #fff; border-radius: var(--r); padding: var(--e3) var(--e4);
  display: flex; align-items: center; gap: var(--e3); font-weight: 700; font-size: 15px;
  width: max-content; max-width: calc(100% - 32px); box-shadow: var(--sombra-flutuante);
}
.foco .toast, .sem-nav .toast { bottom: calc(150px + var(--safe-b)); }
.toast .ic { color: var(--turquesa); }

.vazio { text-align: center; padding: var(--e8) var(--e4); display: flex; flex-direction: column; align-items: center; gap: var(--e3); }
.vazio .ilustra { width: 72px; height: 72px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-2); }
.vazio p { color: var(--texto-2); max-width: 32ch; }

.esqueleto { background: linear-gradient(90deg, var(--superficie-2) 0%, #ECE8E0 50%, var(--superficie-2) 100%); background-size: 200% 100%; border-radius: var(--r-sm); animation: brilho 1.4s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* Lista de configurações / links */
.lista-links { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; }
.lista-links li + li { border-top: 1px solid var(--linha); }
.lista-links a, .lista-links .item { display: flex; align-items: center; gap: var(--e3); min-height: 60px; padding: var(--e2) var(--e4); color: var(--berinjela); text-decoration: none; font-weight: 700; }
.lista-links a:hover { background: var(--branco-quente); }
.lista-links .det { display: block; font-size: 13px; color: var(--texto-3); font-weight: 600; }
.lista-links .seta { margin-left: auto; color: var(--texto-3); }

/* Tabela (desktop) que vira cards (mobile) */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; font-size: 15px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); background: var(--superficie-2); padding: 12px 16px; font-weight: 800; }
.tabela td { padding: 14px 16px; border-top: 1px solid var(--linha); font-weight: 600; }
.tabela td.n { font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .tabela.vira-card, .tabela.vira-card tbody, .tabela.vira-card tr, .tabela.vira-card td { display: block; }
  .tabela.vira-card { border: 0; background: transparent; }
  .tabela.vira-card thead { display: none; }
  .tabela.vira-card tr { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: var(--e3) var(--e4); margin-bottom: var(--e2); }
  .tabela.vira-card td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--e4); }
  .tabela.vira-card td::before { content: attr(data-r); color: var(--texto-3); font-size: 13px; font-weight: 700; }
  .tabela.vira-card td.prim { font-size: 17px; font-weight: 800; }
  .tabela.vira-card td.prim::before { display: none; }
}

/* Etapas (formulários longos) */
.etapas { display: flex; gap: var(--e2); align-items: center; }
.etapas .et { flex: 1; height: 6px; border-radius: 3px; background: var(--linha); }
.etapas .et.ok { background: var(--berinjela); }
.etapas .et.atual { background: var(--turquesa); }

/* Barra de protótipo (alternar estados de demonstração — não faz parte do produto) */
.proto {
  position: fixed; top: 38%; right: 0; z-index: 90;
  font-size: 12px; font-family: ui-monospace, Consolas, monospace;
  display: flex; flex-direction: column; align-items: flex-end;
}
.proto summary { list-style: none; cursor: pointer; background: #1d1324; color: #fff; padding: 10px 6px; border-radius: 8px 0 0 8px; opacity: .7; writing-mode: vertical-rl; }
.proto summary::-webkit-details-marker { display: none; }
.proto[open] summary { opacity: 1; }
.proto .lista { margin-top: 4px; background: #1d1324; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.proto button, .proto a { background: transparent; color: #fff; border: 0; text-align: left; padding: 8px; border-radius: 6px; cursor: pointer; font: inherit; text-decoration: none; }
.proto button[aria-pressed=true] { background: var(--turquesa); color: var(--berinjela); }
@media print { .proto, .nav-inferior, .lateral, .retorno-treino { display: none !important; } }

/* Chip com checkbox real (formulários enviados ao servidor) */
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--berinjela); border-color: var(--berinjela); color: #fff; }
.chip-check:has(input:checked) .check { display: block; }
.chip-check:has(input:focus-visible) { outline: 3px solid var(--turquesa); outline-offset: 2px; }