/* ============================================================
   ORBI SALUS — App Styles (Mobile-First)
   ============================================================ */

/* ============================================================
   VARIÁVEIS MOBILE
   ============================================================ */
:root {
  --bottom-nav-h:    64px;
  --page-px:         1rem;
  --card-pad:        1rem;
  --header-pt:       1rem;
}
@media (min-width: 768px) {
  :root {
    --page-px:  1.5rem;
    --card-pad: 1.5rem;
  }
}
@media (min-width: 1440px) {
  :root {
    --page-px:  2rem;
    --card-pad: 1.5rem;
  }
}

/* ============================================================
   CARD — padding responsivo
   ============================================================ */
.card, .stat-card { padding: var(--card-pad); }

/* ============================================================
   APP LAYOUT — garante espaço acima do bottom-nav
   ============================================================ */
.app-layout {
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1440px) {
  .app-layout {
    margin-left: 260px;
    padding-bottom: 0;
  }
}

/* ============================================================
   PAGE CONTENT — espaçamento mobile-first
   ============================================================ */
.page-content {
  padding: var(--header-pt) var(--page-px) 2rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 1440px) {
  .page-content {
    padding: 2rem var(--page-px) 2rem;
    max-width: 960px;
  }
}

/* ============================================================
   PAGE HEADER — compacto no mobile
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .page-header { margin-bottom: 2rem; }
}

/* ============================================================
   BOTTOM NAV — altura fixa + safe area iOS
   ============================================================ */
.bottom-nav {
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  font-size: 0.625rem;
  padding: 0.5rem 0.25rem 0;
  gap: 3px;
  min-width: 0;
}
.bottom-nav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.bottom-nav-item span { display: block; line-height: 1.2; }

.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item.active svg {
  filter: drop-shadow(0 2px 6px rgba(161,18,22,0.12));
  transform: translateY(-2px);
}

/* ============================================================
   NAV FAB — botão central maior
   ============================================================ */
.bottom-nav-item.nav-center {
  position: relative;
  overflow: visible;
}
.nav-fab {
  width: 52px; height: 52px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-primary);
  margin-top: -18px;
  box-shadow: 0 4px 20px rgba(161,18,22,0.4);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.bottom-nav-item.nav-center:active .nav-fab { transform: scale(0.95); }

/* ============================================================
   BOTÕES — touch targets mínimos 44px
   ============================================================ */
.btn { min-height: 44px; }
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 52px; padding: 0.875rem 1.75rem; }
.btn-full { width: 100%; }

/* ============================================================
   INPUTS — touch targets confortáveis
   ============================================================ */
.input {
  min-height: 48px;
  padding: 0.875rem var(--sp-4);
  font-size: 1rem; /* evita zoom no iOS */
}
textarea.input { min-height: 80px; }
select.input { min-height: 48px; }

/* ============================================================
   AUTH PAGE
   ============================================================ */
#auth-container .card { position: relative; z-index: 1; }

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
.page-content > * {
  animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RADAR SPIDER
   ============================================================ */
.radar-container canvas {
  filter: drop-shadow(0 2px 6px rgba(161,18,22,0.12));
}
#radar-step-content { animation: fadeInUp 0.3s ease; }

/* ============================================================
   STAT CARD — glow
   ============================================================ */
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(161,18,22,0.08) 0%, transparent 70%);
  transition: opacity 0.3s;
}
.stat-card:hover::before { opacity: 1; }

/* ============================================================
   STAT VALUE — menor no mobile
   ============================================================ */
.stat-value {
  font-size: 1.75rem;
}
@media (min-width: 480px) {
  .stat-value { font-size: 2rem; }
}

/* ============================================================
   CARDS — orbital decoration
   ============================================================ */
.card--orbital::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(161,18,22,0.06);
  pointer-events: none;
}

/* ============================================================
   BIO ITEMS
   ============================================================ */
.bio-item { transition: all 0.2s; cursor: default; }

/* ============================================================
   GRID — responsivo mobile-first
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { gap: 1rem; }
  .grid-3 { gap: 1rem; }
}

/* ============================================================
   SCALE BUTTONS — emoji grade
   ============================================================ */
.scale-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.scale-btn {
  min-height: 52px;
  font-size: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-container-highest);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.scale-btn:active   { transform: scale(0.93); }
.scale-btn.active   { border-color: var(--primary); background: var(--primary-dim); }

/* ============================================================
   CHARTS
   ============================================================ */
canvas { max-height: 300px; }
@media (min-width: 768px) { canvas { max-height: 400px; } }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--outline) transparent;
}

/* ============================================================
   TOAST — acima do bottom-nav
   ============================================================ */
@media (max-width: 1023px) {
  .toast-container {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
    right: var(--page-px);
    left: var(--page-px);
  }
  .toast { min-width: 0; max-width: 100%; }
}

/* ============================================================
   CARDS DIMENSÃO — borda colorida
   ============================================================ */
.card[data-dimensao="1"] { border-left: 3px solid #a78bfa; }
.card[data-dimensao="2"] { border-left: 3px solid #34d399; }
.card[data-dimensao="3"] { border-left: 3px solid #f87171; }
.card[data-dimensao="4"] { border-left: 3px solid #60a5fa; }
.card[data-dimensao="5"] { border-left: 3px solid #fbbf24; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  gap: var(--sp-4);
  color: var(--on-surface-variant);
}
.empty-state .empty-icon { font-size: 3rem; }

/* ============================================================
   HEADLINE — menor em telas muito pequenas
   ============================================================ */
@media (max-width: 380px) {
  .headline-lg { font-size: 1.35rem; }
  .headline-md { font-size: 1.125rem; }
  .display-sm  { font-size: 1.5rem; }
}

/* ============================================================
   ACESSIBILIDADE — focus visible
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .bottom-nav, .sidebar, .btn { display: none !important; }
  body { background: white; color: black; }
}

/* ============================================================
   VITALITY ORBIT — animação
   ============================================================ */
.vitality-orbit .progress {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* ============================================================
   TAGS UTILITÁRIAS
   ============================================================ */
.mb-4  { margin-bottom: var(--sp-4); }
.mb-5  { margin-bottom: var(--sp-5); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mt-2  { margin-top: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.mt-5  { margin-top: var(--sp-5); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }

/* ============================================================
   PULL-TO-REFRESH — sem bounce indesejado no iOS
   ============================================================ */
html { overscroll-behavior-y: none; }
.page-content { overscroll-behavior-y: auto; }

/* ============================================================
   ACTIVE STATE MOBILE — feedback tátil
   ============================================================ */
.card[onclick]:active,
[onclick]:active:not(.btn):not(.scale-btn) {
  opacity: 0.82;
  transform: scale(0.99);
  transition: transform 0.1s, opacity 0.1s;
}
.btn:active { opacity: 0.85; }

/* ============================================================
   HIIT — fundo gradiente (referência: teal → preto), resumo, cores de esforço
   ============================================================ */
.hiit-flow-bg {
  margin-left: calc(-1 * var(--page-px));
  margin-right: calc(-1 * var(--page-px));
  margin-top: calc(-1 * var(--header-pt));
  padding: var(--header-pt) var(--page-px) 2rem;
  min-height: min(100vh, 920px);
  background: #f8f9fa;
  border-radius: 0;
}

.hiit-resumo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hiit-resumo-back {
  flex-shrink: 0;
}
.hiit-resumo-header-title {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-surface);
}
.hiit-resumo-header-spacer {
  width: 40px;
  flex-shrink: 0;
}

.hiit-resumo-hero {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--on-surface);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.hiit-resumo-sub {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  margin: 0 0 1.5rem;
}

.hiit-resumo-muted {
  color: var(--on-surface-variant) !important;
}

.hiit-resumo-kpi.card {
  background: #ffffff;
  border: 1px solid var(--outline-variant);
}

.hiit-resumo-kcal {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--font-data);
  color: var(--primary);
  margin-top: 0.25rem;
}
.hiit-resumo-kcal-unit {
  font-size: 0.95rem;
  font-weight: 600;
}

.hiit-resumo-table-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.hiit-resumo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.hiit-resumo-table thead tr {
  border-bottom: 1px solid var(--outline-variant);
}
.hiit-resumo-table th {
  padding: 0.65rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  text-align: left;
}
.hiit-resumo-th-center { text-align: center; }
.hiit-resumo-th-right { text-align: right; }

.hiit-resumo-row:last-child .hiit-resumo-td {
  border-bottom: none;
}
.hiit-resumo-td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--on-surface);
  font-family: var(--font-data);
}
.hiit-resumo-td--time {
  text-align: left;
  font-weight: 600;
}
.hiit-resumo-td--speed {
  text-align: center;
  font-weight: 600;
}
.hiit-resumo-td--effort {
  text-align: right;
  font-family: var(--font-display);
}

.hiit-resumo-cta {
  margin-top: 0.25rem;
}

/* ============================================================
   HIIT — cartões e lista (claro / escuro via tokens)
   ============================================================ */
.btn-reset {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.hiit-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1rem 0.75rem;
  background: var(--surface-container);
  transition: border-color 0.2s, background 0.2s;
}
.hiit-card--on {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.hiit-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
  color: var(--on-surface-variant);
}
.hiit-card--on .hiit-card__icon { color: var(--primary); }
.hiit-card__lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hiit-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  background: var(--surface-container);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  /* <button> herdava cor do UA (texto escuro); força legível no tema escuro */
  color: var(--on-surface);
}
.hiit-row--on {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.hiit-row__bar {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.hiit-row__bar--facil { background: #0891b2; }
.hiit-row__bar--moderado { background: #c7aa00; }
.hiit-row__bar--moderado_forte { background: #ca8a04; }
.hiit-row__bar--forte { background: #ea580c; }
.hiit-row__bar--maximo { background: #dc2626; }

/* Título branco + faixa lateral já com cor; fundo sutil por zona */
.hiit-row--effort-facil:not(.hiit-row--on) {
  background: rgba(91, 192, 222, 0.08);
  border-color: rgba(91, 192, 222, 0.25);
}
.hiit-row--effort-moderado:not(.hiit-row--on) {
  background: rgba(199,170,0,0.10);
  border-color: rgba(199,170,0,0.28);
}
.hiit-row--effort-moderado_forte:not(.hiit-row--on) {
  background: rgba(240, 173, 78, 0.1);
  border-color: rgba(240, 173, 78, 0.3);
}
.hiit-row--effort-forte:not(.hiit-row--on) {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.28);
}
.hiit-row--effort-maximo:not(.hiit-row--on) {
  background: rgba(217, 83, 79, 0.1);
  border-color: rgba(217, 83, 79, 0.28);
}
[data-theme="light"] .hiit-row--effort-facil:not(.hiit-row--on) {
  background: rgba(91, 192, 222, 0.12);
}
[data-theme="light"] .hiit-row--effort-moderado:not(.hiit-row--on) {
  background: rgba(199,170,0,0.12);
}
[data-theme="light"] .hiit-row--effort-moderado_forte:not(.hiit-row--on) {
  background: rgba(240, 173, 78, 0.12);
}
[data-theme="light"] .hiit-row--effort-forte:not(.hiit-row--on) {
  background: rgba(249, 115, 22, 0.1);
}
[data-theme="light"] .hiit-row--effort-maximo:not(.hiit-row--on) {
  background: rgba(217, 83, 79, 0.1);
}
.hiit-row__txt { flex: 1; min-width: 0; }
.hiit-row__title {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--on-surface);
}
.hiit-row__desc { display: block; font-size: 0.75rem; color: var(--on-surface-variant); margin-top: 0.15rem; }
.hiit-row__chk { width: 1.5rem; flex-shrink: 0; color: var(--primary); }
/* —— Sessão HIIT (#hiit-sessao): blocos empilhados, sem texto longo dentro do anel —— */
.hiit-session--active {
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: min(100vh, 900px);
}

/* Painel execução — mesma “caixa” do resumo (borda fina + fundo cartão escuro) */
.hiit-sessao-tab {
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  overflow: hidden;
  margin-top: 0.35rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .hiit-sessao-tab {
  /* Alinhado a .hiit-resumo-table-card */
  background: #ffffff;
  border: 1px solid var(--outline-variant);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.hiit-sessao-tab__head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
}
[data-theme="dark"] .hiit-sessao-tab__head {
  border-bottom: 1px solid var(--outline-variant);
}

.hiit-sessao-tab__pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .hiit-sessao-tab__pill {
  color: var(--on-surface-variant);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
}

.hiit-sessao-tab__body {
  padding: 0.5rem 0.75rem 1rem;
}

.hiit-ring-track {
  stroke: rgba(15, 23, 42, 0.12);
}
[data-theme="dark"] .hiit-ring-track {
  stroke: rgba(25,28,29,0.12);
}

.hiit-sessao-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.hiit-sessao-header__title {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.hiit-sessao-header__spacer {
  width: 40px;
  flex-shrink: 0;
}
.hiit-sessao-header__btn {
  flex-shrink: 0;
}

.hiit-active-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.hiit-timer-section {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 1rem;
}

.hiit-timer-ring-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
}

.hiit-timer-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.75rem;
  pointer-events: none;
  text-align: center;
  overflow: hidden;
}

.hiit-timer-digit {
  font-family: var(--font-data);
  font-weight: 800;
  font-size: clamp(2.75rem, 14vw, 4rem);
  line-height: 1;
  color: #191c1d;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.hiit-timer-unit {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  line-height: 1.2;
  max-width: 9rem;
}

.hiit-status-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.35rem 1rem 0.5rem;
  min-height: 7.5rem;
  box-sizing: border-box;
}

.hiit-status-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

.hiit-speed-value {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiit-next-line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--on-surface-variant);
  max-width: 22rem;
  min-height: 2.2rem;
  padding-top: 0.15rem;
}

.hiit-zone-section {
  flex-shrink: 0;
  text-align: center;
  padding: 0.15rem 1rem 0.35rem;
}

.hiit-zone-badge {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  min-height: 1.35rem;
}

.hiit-bars-section {
  flex-shrink: 0;
  width: 100%;
  padding: 0.5rem 0.35rem 1rem;
}

.hiit-bars-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  gap: 4px;
  width: 100%;
  height: 108px;
  min-height: 108px;
  max-width: 100%;
}

.hiit-bars-wrap .hiit-bar {
  flex: 1;
  min-width: 0;
  border-radius: 4px 4px 0 0;
  opacity: 0.58;
}
.hiit-bars-wrap .hiit-bar.hiit-bar--active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(161,18,22,0.40), 0 4px 12px rgba(0,0,0,0.12);
  filter: saturate(1.2);
}

.hiit-sessao-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1.1rem;
  padding-bottom: 0.15rem;
  flex-shrink: 0;
}

.hiit-sessao-tab .hiit-action-btn--pause {
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}
.hiit-sessao-tab .hiit-action-btn--abort {
  background: var(--surface-container-highest);
  color: #ba1a1a;
  border: 1px solid rgba(186,26,26,0.25);
}


.hiit-action-btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.95rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.hiit-action-btn:active {
  transform: scale(0.98);
  opacity: 0.92;
}

.hiit-action-btn--pause {
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}

.hiit-action-btn--abort {
  background: var(--surface-container-highest);
  color: #ba1a1a;
  border: 1px solid rgba(186,26,26,0.25);
}

.hiit-timer-svg circle { transition: stroke-dashoffset 0.2s linear, stroke 0.25s ease; }

/* Dashboard — botão Treino HIIT (abaixo de TREINO DE HOJE) */
.dash-hiit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.dash-hiit-btn:active {
  transform: scale(0.99);
}
.dash-hiit-btn:hover {
  border-color: rgba(161,18,22, 0.28);
  background: var(--surface-container-highest);
}
[data-theme="light"] .dash-hiit-btn {
  background: var(--surface-container);
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.06);
}
[data-theme="light"] .dash-hiit-btn:hover {
  background: var(--surface-container-high);
}
.dash-hiit-btn__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(161,18,22, 0.14);
  color: var(--primary);
}
[data-theme="light"] .dash-hiit-btn__icon-wrap {
  background: rgba(161,18,22, 0.16);
  color: var(--primary);
}
.dash-hiit-btn__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dash-hiit-btn__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.dash-hiit-btn__sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--on-surface-variant);
}
.dash-hiit-btn__chev {
  flex-shrink: 0;
  color: var(--on-surface-variant);
  opacity: 0.75;
}

/* ─── Mobile topbar (logo símbolo, visível < 1440px) ─── */
.mobile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  padding: env(safe-area-inset-top) 1rem 0;
}
.mobile-topbar__badge {
  font-family: 'Lexend', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}
@media (min-width: 1440px) {
  .mobile-topbar { display: none !important; }
}