/* Estilo comum do Duo Treino. Carregado depois do estilo de cada página, então sobrescreve. */

:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1a2030;
  --muted: #5d6679;
  --accent: #1f6feb;
  --accent-texto: #ffffff;
  --ok: #2e7d32;
  --danger: #c62828;
  --border: #c9cfdb;
  --foco: rgba(31, 111, 235, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116;
    --card: #161b24;
    --text: #f0f3fa;
    --muted: #a7b0c2;
    --accent: #2581c4;
    --accent-texto: #ffffff;
    --ok: #66bb6a;
    --danger: #ff7b7b;
    --border: #2a3242;
    --foco: rgba(37, 129, 196, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #0e1116;
  --card: #161b24;
  --text: #f0f3fa;
  --muted: #a7b0c2;
  --accent: #2581c4;
  --accent-texto: #ffffff;
  --ok: #66bb6a;
  --danger: #ff7b7b;
  --border: #2a3242;
  --foco: rgba(37, 129, 196, 0.45);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-size: 16px;
  line-height: 1.5;
  padding: 20px 16px;
}

h1 { font-size: 26px; letter-spacing: -0.01em; }
h2 { font-size: 18px; }

/* Cabeçalho e navegação */
header { gap: 12px; flex-wrap: wrap; }
header nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

a.link,
button.link,
a.back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

a.link:hover,
button.link:hover,
a.back:hover { border-color: var(--accent); color: var(--accent); }

/* Botões de ação */
button.primary {
  min-height: 48px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-texto);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

button.primary:hover { filter: brightness(1.06); }

button.acao,
button.secundario {
  min-height: 36px;
  padding: 7px 14px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

button.acao:hover,
button.secundario:hover { border-color: var(--accent); color: var(--accent); }

/* Botões de texto dentro das listas (Ver vídeo, Adicionar exercício) */
li button:not(.acao):not(.primary) {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Campos */
label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 6px;
}

input,
select,
textarea {
  min-height: 46px;
  font-size: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
}

textarea { min-height: 90px; }

input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 0.85; }

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--foco);
}

/* Cartões e listas */
.card,
section.card {
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

li { padding: 14px 0; }
.meta { font-size: 15px; }

.msg { font-size: 15px; }

/* Celular: sem rolagem lateral e com alvos de toque maiores */
@media (max-width: 480px) {
  body { padding: 16px; }
  .row { flex-direction: column; }
  .row > * { width: 100%; }
  header { align-items: flex-start; }
}

/* Abas do personal: Alunos, Treinos e Cobrança */
nav.abas {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;
}

a.aba {
  flex: 1;
  min-width: max-content;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

a.aba:hover { color: var(--text); }

a.aba.on {
  background: var(--accent);
  color: var(--accent-texto);
}

/* Lapidação: tipografia de pôster (Archivo) e cores da família EVOX. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');

:root {
  --bg: #0e1116;
  --card: #161b24;
  --text: #f2f4f8;
  --muted: #9aa3b5;
  --accent: #2581c4;
  --accent-texto: #ffffff;
  --border: #2a3242;
  --foco: rgba(37, 129, 196, 0.45);
}

body {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  background: var(--bg);
}

h1 { font-weight: 900; font-size: 30px; letter-spacing: -0.02em; }
h2 { font-weight: 800; font-size: 19px; }
.nome { font-weight: 700; }
label { font-weight: 600; }

button.primary {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}

button.primary:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
button.primary:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }

a.aba { font-weight: 700; }
a.aba.on { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }

/* Polimento: presença nos botões principais, tipografia com tracking controlado, foco e seleção da marca. */
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.015em; }

button.primary {
  color: #ffffff;
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(37, 129, 196, 0.28), 0 2px 4px rgba(0, 0, 0, 0.35);
}
button.primary:hover { box-shadow: 0 8px 22px rgba(37, 129, 196, 0.36), 0 2px 6px rgba(0, 0, 0, 0.4); }

::selection { background: rgba(37, 129, 196, 0.45); color: #ffffff; }

.card, section.card { border-radius: 16px; }

/* Inspirado no Técnico de Bolso: números em fonte de dados com colunas alinhadas, camadas de superfície e cantos mais firmes nos controles. */
:root {
  --f-dados: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;
}

body, input, select, textarea, button { font-variant-numeric: tabular-nums; }

.numero,
.meta,
.empty {
  font-variant-numeric: tabular-nums;
}

.numero {
  font-family: var(--f-dados);
  font-weight: 700;
  letter-spacing: -0.01em;
}

input, select, textarea {
  background: #1e2530;
  border-color: #2a3242;
  border-radius: 10px;
}

:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
  background: #1e2530;
}

.card, section.card {
  background: #161b24;
  border-color: #2a3242;
}