/* v1.21: nova interface (em teste — só utilizadores com ui_beta). Tudo aqui depende de html.ui-beta ou html[data-theme="light"]. */

/* ---------- Tema claro ---------- */
html[data-theme="light"] {
  --bg: #f3f5f7; --panel: #ffffff; --panel2: #f0f3f5; --panel3: #e7ecef; --line: #e0e6ea; --line2: #cfd7dc;
  --text: #17212a; --muted: #586874; --dim: #8a98a3;
  --teal: #12a1a6; --teal-d: #0d7e82; --orange: #e0681c; --red: #d64545; --green: #1e9a5a; --yellow: #c2930c;
  --run: #12a1a6; --bike: #e0681c; --swim: #3b7be6; --strength: #8f5fe0; --crossfit: #d6404b; --hyrox: #9aa318; --other: #7d8b96; --race: #c2930c; --note: #8a98a3;
  --shadow: 0 8px 30px rgba(20,40,52,.12);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] img[src="/img/logo-wordmark.png"] { content: url(/img/logo-wordmark-light.png); }
html[data-theme="light"] img[src="/img/logo-mark.png"] { content: url(/img/logo-mark-light.png); }
html[data-theme="light"] .btn.primary { color: #fff; }
html[data-theme="light"] .btn.primary:hover { background: var(--teal-d); border-color: var(--teal-d); }
html[data-theme="light"] .avatar { color: #fff; }
html[data-theme="light"] .nav a.on { background: rgba(18,161,166,.10); }
html[data-theme="light"] .item { background: var(--panel2); }
html[data-theme="light"] .c-atl { color: #8a5bd6; }
html[data-theme="light"] .card, html[data-theme="light"] .kpi, html[data-theme="light"] .ath { box-shadow: 0 1px 2px rgba(20,40,52,.05); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff; }
html[data-theme="light"] .modal, html[data-theme="light"] .modal-box { box-shadow: 0 18px 50px rgba(20,40,52,.18); }
html[data-theme="light"] .topbar { background: rgba(255,255,255,.92); }
html[data-theme="light"] .bnav { background: rgba(255,255,255,.96); border-top-color: var(--line); }

/* ---------- Seletor de tema (menu da conta) ---------- */
.th-sw { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.th-sw button { background: transparent; border: 0; color: var(--muted); padding: 3px 10px; font: 13px var(--font); cursor: pointer; line-height: 1.2; }
.th-sw button.on { background: var(--teal); color: #fff; }
.th-sw button:hover:not(.on) { color: var(--text); }

/* ---------- Menu lateral em ícones (computador) ---------- */
@media (min-width: 761px) {
  html.ui-beta .shell.rail-ok { transition: grid-template-columns .18s ease; }
  html.ui-beta .shell.rail-ok .side { transition: width .18s ease, box-shadow .18s; }
  .rail-pin { align-self: flex-end; margin: -10px -6px -6px 0; background: transparent; border: 0; color: var(--dim); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
  .rail-pin:hover { color: var(--text); background: var(--panel2); }
  html.ui-beta .shell.rail { grid-template-columns: 64px 1fr; }
  html.ui-beta .shell.rail .main { grid-column: 2; }
  html.ui-beta .shell.rail .side { width: 64px; padding: 14px 8px; overflow-x: hidden; }
  html.ui-beta .shell.rail.peek .side { position: fixed; left: 0; top: 0; z-index: 60; width: 248px; padding: 18px 14px; box-shadow: var(--shadow); }
  html.ui-beta .shell.rail:not(.peek) .side .nt,
  html.ui-beta .shell.rail:not(.peek) .side .side-nm,
  html.ui-beta .shell.rail:not(.peek) .side .side-q,
  html.ui-beta .shell.rail:not(.peek) .side .side-lbl,
  html.ui-beta .shell.rail:not(.peek) .side .side-grp,
  html.ui-beta .shell.rail:not(.peek) .side .side-clubs,
  html.ui-beta .shell.rail:not(.peek) .side .side-hid,
  html.ui-beta .shell.rail:not(.peek) .side .side-more,
  html.ui-beta .shell.rail:not(.peek) .side .nbadge,
  html.ui-beta .shell.rail:not(.peek) .side .me > :not(.me-top),
  html.ui-beta .shell.rail:not(.peek) .side .me-top > div,
  html.ui-beta .shell.rail:not(.peek) .side .rail-pin { display: none !important; }
  html.ui-beta .shell.rail:not(.peek) .side .nav a { justify-content: center; padding: 9px 0; gap: 0; }
  html.ui-beta .shell.rail:not(.peek) .side .nav .ni { font-size: 18px; }
  html.ui-beta .shell.rail:not(.peek) .side .brand { padding: 2px 0 12px; }
  html.ui-beta .shell.rail:not(.peek) .side .brand img { content: url(/img/icon-192.png); width: 36px; height: 36px; border-radius: 9px; margin: 0 auto; }
  html.ui-beta .shell.rail:not(.peek) .side .me { padding: 8px 0; display: flex; justify-content: center; }
  html.ui-beta .shell.rail:not(.peek) .side .sep { margin: 8px 6px; }
  html.ui-beta .shell.rail:not(.peek) .side a.side-ath-a { justify-content: center; }
}
@media (max-width: 760px) { .rail-pin { display: none; } }

/* ---------- Vista simples do atleta ---------- */
html.sv-mode body.has-bg::before { display: none; }
.sv { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sv h1 { margin: 2px 0 0; font-size: 24px; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-race-cd { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.sv-race-cd b { font: 700 26px var(--font-h); color: var(--yellow); }
.sv-race-cd span { font-size: 11.5px; color: var(--muted); line-height: 1.25; max-width: 150px; }
.sv-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sv-tile { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); }
.sv-tile:hover { text-decoration: none; border-color: var(--teal-d); }
.sv-tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.sv-tile b { font: 700 28px/1.15 var(--font-h); font-variant-numeric: tabular-nums; }
.sv-tile small { font-size: 11.5px; color: var(--dim); }
.sv-rec { font-size: 17px !important; display: flex; align-items: center; gap: 7px; min-height: 32px; }
.sv-rec i { width: 11px; height: 11px; border-radius: 50%; background: var(--dim); flex: none; }
.sv-rec.ok i { background: var(--green); } .sv-rec.warn i { background: var(--yellow); } .sv-rec.bad i { background: var(--red); }
.sv-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sv-chart { height: 240px; }
.sv-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sv-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.sv-bar { height: 6px; background: var(--panel3); border-radius: 99px; overflow: hidden; margin: 10px 0 6px; }
.sv-bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.sv-day { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: start; }
.sv-day:first-of-type { border-top: 0; }
.sv-day.today .sv-dl b { color: var(--teal); }
.sv-day.past { opacity: .78; }
.sv-dl { display: flex; flex-direction: column; line-height: 1.15; padding-top: 3px; }
.sv-dl b { font-size: 12px; text-transform: capitalize; }
.sv-dl span { font: 700 17px var(--font-h); color: var(--muted); }
.sv-items { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-w { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 16px; gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--panel2); border: 0; border-left: 3px solid var(--other); border-radius: 7px; padding: 7px 9px; color: var(--text); font: 13px var(--font); cursor: pointer; }
.sv-w:hover { background: var(--panel3); }
.sv-w .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-w .du { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sv-w .st { font-weight: 700; text-align: center; }
.sv-w.done .st { color: var(--green); } .sv-w.miss .st { color: var(--red); } .sv-w.miss .nm { text-decoration: line-through; color: var(--muted); }
.sv-w.extra { border-left-style: dashed; }
.sv-w.s-run { border-left-color: var(--run); } .sv-w.s-bike { border-left-color: var(--bike); } .sv-w.s-swim { border-left-color: var(--swim); } .sv-w.s-strength { border-left-color: var(--strength); }
.sv-w.s-crossfit { border-left-color: var(--crossfit); } .sv-w.s-hyrox { border-left-color: var(--hyrox); }
.sv-rest { color: var(--dim); font-size: 12.5px; padding-top: 5px; }
.sv-race { font-size: 12.5px; font-weight: 600; color: var(--yellow); }
.sv-explain p { margin: 0 0 8px; }
.sv .td-card { margin: 0; }
html.sv-mode .page-head.hero { background: none; min-height: 0; padding: 0; }
html.sv-mode .page-head.hero h1 { text-shadow: none; }
.sv-simplehead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sv-simplehead h1 { margin: 0; }
@media (max-width: 1000px) { .sv-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sv-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv-tile { padding: 10px 12px; } .sv-tile b { font-size: 24px; }
  .sv h1 { font-size: 21px; }
  .sv-race-cd { padding: 6px 10px; } .sv-race-cd b { font-size: 21px; } .sv-race-cd span { max-width: 110px; }
  .sv-chart { height: 200px; }
}
/* gerado automaticamente a partir de app.css (tools/genlight.js) */
html[data-theme="light"] .day:hover {
    background: #eef4f6
}
html[data-theme="light"] .day.other {
    background: #eef1f4
}
html[data-theme="light"] svg.blocks.mini {
    background: rgba(20,40,52,0.033)
}
html[data-theme="light"] body.has-bg::before {
    background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.93) 45%, rgba(255,255,255,.96)), var(--page-bg) center / cover no-repeat
}
html[data-theme="light"] body.has-bg .main .card, html[data-theme="light"] body.has-bg .main .kpi, html[data-theme="light"] body.has-bg .main .ath, html[data-theme="light"] body.has-bg .main .cal, html[data-theme="light"] body.has-bg .main .aday {
    background: rgba(255,255,255,.95)
}
html[data-theme="light"] .page-head.hero {
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.70) 45%, rgba(255,255,255,.15) 100%), var(--hero) center 40% / cover no-repeat
}
html[data-theme="light"] .page-head.hero h1 {
    text-shadow: 0 2px 12px rgba(20,40,52,0.175)
}
html[data-theme="light"] .auth.photo {
    background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.88)), var(--hero) center / cover no-repeat
}
html[data-theme="light"] .auth.photo .card {
    background: rgba(255,255,255,.88)
}
html[data-theme="light"] .auth.photo .tag {
    text-shadow: 0 1px 8px rgba(20,40,52,0.210)
}
html[data-theme="light"] .auth.photo .inv-form {
    background: rgba(255,255,255,.92)
}
html[data-theme="light"] .ad-map {
    background: #eef1f4
}
html[data-theme="light"] .ad-map.leaflet-container {
    background: #eef2f4
}
html[data-theme="light"] .club-chip {
    background: rgba(20,40,52,0.066)
}
html[data-theme="light"] .lib-drawer {
    background: var(--card,#ffffff);
    border: 1px solid var(--line,#dde3e7)
}
@media (max-width:900px) {
    html[data-theme="light"] .lib-drawer {
        box-shadow: 0 -8px 30px rgba(20,40,52,0.175)
    }
}
html[data-theme="light"] .lib-cat {
    color: var(--muted,#5b6b77)
}
html[data-theme="light"] .lib-card {
    background: var(--bg2,#f6f8f9);
    border: 1px solid var(--line,#dde3e7)
}
html[data-theme="light"] .lib-card .m {
    color: var(--muted,#5b6b77)
}
html[data-theme="light"] .lib-own {
    background: rgba(20,40,52,0.066)
}
html[data-theme="light"] .exa {
    background: #fafbfc
}
html[data-theme="light"] .exa img {
    background: #fafbfc
}
html[data-theme="light"] .ex-card {
    background: var(--bg2,#f6f8f9);
    border: 1px solid var(--line,#dde3e7)
}
html[data-theme="light"] .ex-row {
    background: var(--bg2,#f6f8f9);
    border: 1px solid var(--line,#dde3e7)
}
html[data-theme="light"] .ex-f label {
    color: var(--muted,#5b6b77)
}
html[data-theme="light"] .grp-m .chip {
    background: rgba(20,40,52,0.077)
}
html[data-theme="light"] .grp-pick {
    border: 1px solid var(--line,#dde3e7)
}
@media (max-width: 760px) {
    html[data-theme="light"] .bnav {
        background: rgba(255,255,255,.97)
    }
}
@media (max-width: 760px) {
    html[data-theme="light"] .bnav {
        background: #ffffff
    }
}
html[data-theme="light"] .pt-ax {
    fill: var(--muted, #6b7a86)
}
html[data-theme="light"] .pt-ref {
    stroke: var(--muted, #6b7a86)
}
html[data-theme="light"] .tabcats a {
    background: var(--panel2, rgba(20,40,52,0.055))
}
html[data-theme="light"] .cal .pair, html[data-theme="light"] .agenda .pair {
    background: rgba(20,40,52,0.022)
}
html[data-theme="light"] .th-bk {
    box-shadow: 0 1px 3px rgba(20,40,52,0.122)
}
html[data-theme="light"] .td-w {
    background: rgba(20,40,52,0.022)
}
html[data-theme="light"] .shop-tag {
    box-shadow: 0 2px 6px rgba(20,40,52,0.105)
}
html[data-theme="light"] .shop-old {
    color: var(--dim, #7d8b96)
}
html[data-theme="light"] .cl-card {
    border: 1px solid var(--line, #d5dce1)
}
html[data-theme="light"] .om-tbl tfoot th {
    border-top: 1px solid var(--line2, #cfd7dc)
}
html[data-theme="light"] .nt-timeline {
    border-left: 2px solid var(--line2, #cfd7dc)
}
html[data-theme="light"] .nt-row::before {
    border: 2px solid var(--line2, #cfd7dc)
}
html[data-theme="light"] .fit-kpis>div {
    background: var(--bg2,rgba(20,40,52,0.033));
    border: 1px solid var(--line,rgba(20,40,52,0.088))
}
html[data-theme="light"] .cr-row {
    border-top: 1px solid var(--line,rgba(20,40,52,0.088))
}
html[data-theme="light"] .cr-msg {
    background: rgba(20,40,52,0.033)
}
html[data-theme="light"] .pred-t th, html[data-theme="light"] .pred-t td {
    border-bottom: 1px solid var(--line,rgba(20,40,52,0.088))
}
html[data-theme="light"] .st-notes {
    border-bottom: 1px solid var(--line,rgba(20,40,52,0.088))
}
html[data-theme="light"] .st-nview {
    background: rgba(20,40,52,0.033)
}
html[data-theme="light"] .cl-logo {
    background: var(--bg2,rgba(20,40,52,0.066))
}
html[data-theme="light"] .lib-folders > a:hover {
    background: rgba(20,40,52,0.055)
}