/* Fuentes de marca (OFL, locales) para el wordmark JAbeFIT. */ @font-face { font-family: "Archivo Black"; src: url("/static/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Great Vibes"; src: url("/static/fonts/GreatVibes-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================= SISTEMA DE DISEÑO — todo lo estético vive acá, en tokens. Para re-tematizar la app (colores, tipografía, radios, densidad) toca SOLO el bloque :root de abajo. El resto consume variables. Estética: "cuaderno de entrenamiento" — papel cálido, tinta casi negra, un único acento, números en monoespaciada, líneas finas, sin sombras. ========================================================================= */ :root { /* Paleta JAbeFIT: verde oliva + crema + terracota. */ --paper: #ebe7db; /* fondo crema cálido */ --surface: #f5f2e9; /* cards, un punto más luminoso */ --surface-2: #e2dcca; /* hover / relieve sutil */ --ink: #33321e; /* verde oliva muy oscuro (texto + fondos oscuros) */ --ink-soft: #5f5d44; --ink-faint: #948f76; --line: #d9d2c0; --line-strong: #c4bca4; --olive: #5e5d40; /* verde oliva de marca (topbar) */ --olive-deep: #4a4931; --on-olive: #f1ede0; /* texto sobre el oliva */ --accent: #a05c34; /* terracota de marca (CTAs, badges, activo) */ --accent-deep: #874c29; --on-accent: #f6f1e7; --good: #4f7a48; /* verde "hecho" — armoniza con el oliva */ --good-bg: #e4ecdc; --font-ui: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --r: 5px; --r-lg: 9px; --pad: 16px; --maxw: 880px; --shadow: 0 1px 0 rgba(24,22,15,.04); } /* Modo oscuro: se activa con data-theme="dark" en . El script inline del lo resuelve antes de pintar según la preferencia guardada (Automático / Claro / Oscuro). "Automático" = sigue al sistema. */ :root[data-theme="dark"] { --paper: #14130c; --surface: #1d1b12; --surface-2: #282518; --ink: #ece7d5; --ink-soft: #b3ad96; --ink-faint: #837d66; --line: #322f20; --line-strong: #47432d; --olive: #565536; --olive-deep: #424126; --on-olive: #f1ede0; --accent: #c2784b; --accent-deep: #a05c34; --on-accent: #15120c; --good: #7fae6f; --good-bg: #1f2a1a; --shadow: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); } a { color: inherit; } /* ----------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad); background: var(--olive); border-bottom: 1px solid var(--olive-deep); color: var(--on-olive); } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--on-olive); } /* wordmark JAbeFIT con las fuentes de marca (hereda color → sirve claro/oscuro) */ .wordmark { font-family: "Archivo Black", var(--font-ui); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1; color: inherit; display: inline-flex; align-items: baseline; white-space: nowrap; } .wordmark b { font-family: "Archivo Black", var(--font-ui); font-weight: 400; } .wordmark i { font-family: "Great Vibes", "Snell Roundhand", cursive; font-style: normal; font-weight: 400; font-size: 1.5em; margin: 0 .04em; transform: translateY(.04em); } .wordmark-lg { font-size: 2.6rem; color: var(--ink); } .topnav { display: flex; align-items: center; gap: 2px; } .topnav a { text-decoration: none; color: color-mix(in srgb, var(--on-olive) 70%, transparent); padding: 7px 10px; border-radius: var(--r); font-size: .92rem; transition: color .15s, background .15s; } .topnav a:hover { color: var(--on-olive); background: rgba(255, 255, 255, .12); } .topnav .who { font-weight: 600; color: var(--on-olive); } .topnav .ghost-link { color: color-mix(in srgb, var(--on-olive) 55%, transparent); } /* ----------------------------------------------------------------- layout */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 22px var(--pad) 40px; } .wrap.narrow { max-width: 460px; } .stack > * + * { margin-top: 14px; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap-row { flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .spacer { flex: 1; } /* ------------------------------------------------------------- typography */ h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; margin: 0; } h1 { font-size: 1.6rem; font-weight: 750; } h2 { font-size: 1.15rem; font-weight: 700; } h3 { font-size: 1rem; font-weight: 650; } .eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .page-head { margin-bottom: 20px; } .page-head p { margin: 4px 0 0; } /* ------------------------------------------------------------------ cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad); box-shadow: var(--shadow); } .card + .card { margin-top: 14px; } .card-tight { padding: 12px 14px; } /* ----------------------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: .82rem; padding: 3px 8px; border-radius: 100px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; } .tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 100px; background: var(--accent); } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: .95rem; font-weight: 600; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: transform .04s, background .15s; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-deep); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); } .btn-ghost:hover { color: var(--ink); border-color: var(--line-strong); } .btn-danger { color: var(--accent); border-color: transparent; background: transparent; } .btn-sm { min-height: 36px; padding: 0 12px; font-size: .86rem; } .btn-block { width: 100%; } .btn-icon { min-height: 36px; min-width: 36px; padding: 0; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 1.1rem; line-height: 1; } .btn-icon:hover { color: var(--accent); } /* ----------------------------------------------------------------- forms */ .field { display: block; } .field + .field { margin-top: 12px; } .field > label, .label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 11px 12px; min-height: 44px; appearance: none; -webkit-appearance: none; } input:focus, select, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); } textarea { min-height: 84px; resize: vertical; line-height: 1.5; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23938d7e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } /* ------------------------------------------------------- selector de tema */ .theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 4px; } .theme-seg button { font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; border-radius: calc(var(--r) - 2px); padding: 9px 4px; min-height: 40px; cursor: pointer; transition: background .15s ease, color .15s ease; } .theme-seg button:hover { color: var(--ink); } .theme-seg button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } /* ----------------------------------------------------------- dev login */ .dev-login { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); } .dev-login-label { display: block; text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } /* ------------------------------------------------------------------ flash */ .flash { background: var(--ink); color: var(--paper); padding: 11px 14px; border-radius: var(--r); font-size: .9rem; margin-bottom: 18px; } /* ------------------------------------------------------------- list rows */ .list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .list-row { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad); text-decoration: none; color: inherit; } .list-row + .list-row { border-top: 1px solid var(--line); } .list-row:hover { background: var(--surface-2); } .list-row .grow { flex: 1; min-width: 0; } .list-row .chev { color: var(--ink-faint); } .list-row strong { font-weight: 650; } .list-row .sub { font-size: .85rem; color: var(--ink-soft); } /* ----------------------------------------------------------- empty state */ .empty { text-align: center; padding: 38px 20px; color: var(--ink-faint); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); } .empty .big { font-size: 1.5rem; margin-bottom: 6px; } /* ===================================================================== PANTALLA DE ENTRENAMIENTO (alumna) — el corazón mobile. ===================================================================== */ .day-banner { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 16px var(--pad); margin-bottom: 16px; } .day-banner .eyebrow { color: color-mix(in srgb, var(--paper) 60%, transparent); } .day-banner h1 { color: var(--paper); margin-top: 2px; } .ex-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 14px; overflow: hidden; } .ex-head { padding: 14px var(--pad) 10px; } .ex-head .between { align-items: flex-start; } .ex-name { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; } .ex-target { margin-top: 5px; } .ex-cue { margin-top: 8px; font-size: .88rem; color: var(--ink-soft); } .ex-cue.coach::before { content: "✎ "; color: var(--accent); } .video-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 0; } .video-frame { position: relative; padding-top: 56.25%; margin: 10px var(--pad) 0; border-radius: var(--r); overflow: hidden; background: #000; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* tabla de series */ .sets { padding: 4px var(--pad) 14px; } .sets-head, .setrow { display: grid; grid-template-columns: 26px 1fr 1fr 1fr 30px; gap: 8px; align-items: center; } .sets-head { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 2px 4px; } .sets-head span { text-align: center; } .sets-head .h-set { text-align: left; } .setrow { padding: 4px 0; position: relative; } .setrow input[type=text] { text-align: center; padding: 9px 4px; min-height: 46px; font-family: var(--font-num); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .setrow .set-n { font-family: var(--font-num); font-size: .95rem; color: var(--ink-faint); text-align: center; font-weight: 600; } /* serie con datos = "hecha": marca sutil sin checkbox manual */ .setrow:has(input:not(:placeholder-shown)) .set-n { color: var(--good); } .setrow:has(input:not(:placeholder-shown)) .set-n::after { content: "●"; font-size: .5em; vertical-align: super; margin-left: 1px; } .del-spacer { width: 30px; height: 1px; } .del-set { width: 30px; height: 38px; color: var(--ink-faint); background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0; } .del-set:hover { color: var(--accent); } .add-set { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: none; border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 9px; width: 100%; cursor: pointer; } .add-set:hover { color: var(--ink); border-color: var(--ink-faint); } /* tick de "guardado" */ .saved-tick { position: absolute; right: -2px; top: -8px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--good); opacity: 0; pointer-events: none; } .saved-tick.on { animation: tick 1.4s ease forwards; } @keyframes tick { 0%,15% { opacity: 1; } 100% { opacity: 0; } } /* barra de acción inferior */ .sticky-bar { position: sticky; bottom: 0; z-index: 20; margin: 18px calc(var(--pad) * -1) 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); } .banner-hint { margin: 6px 0 0; font-size: .82rem; color: color-mix(in srgb, var(--paper) 62%, transparent); } .finish-hint { margin: 0 0 8px; font-size: .76rem; color: var(--ink-faint); text-align: center; } /* video plegable (abre y cierra) */ .video-box { margin-top: 8px; } .video-box > summary { list-style: none; cursor: pointer; } .video-box > summary::-webkit-details-marker { display: none; } .video-box .v-caret { display: inline-block; transition: transform .15s; } .video-box[open] .v-caret { transform: rotate(90deg); } /* ===== bi/tri-series ===== */ .ex-card.superset { border-color: var(--line-strong); } .ss-head { padding: 13px var(--pad) 9px; display: flex; flex-direction: column; gap: 4px; } .ss-tag { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 10px; border-radius: 100px; } .ss-hint { font-size: .8rem; color: var(--ink-soft); } .ss-body { border-left: 3px solid var(--accent); margin-left: var(--pad); } .ss-body .ex-head { padding-left: 11px; } .ss-body .sets { padding-left: 11px; } .ss-body .exblock + .exblock { border-top: 1px dashed var(--line); padding-top: 4px; } .ss-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 0 6px; margin-right: 8px; font-family: var(--font-num); font-size: .78rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 5px; vertical-align: middle; } .ss-chip { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); padding: 1px 7px; border-radius: 100px; margin-left: 5px; } /* botón de descanso */ .rest-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad) 14px; min-height: 44px; padding: 0 14px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; } .rest-btn:active { transform: translateY(1px); } .rest-ico { font-size: 1.05rem; } /* timer de descanso (overlay, lo crea app.js) */ .rest-timer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 13px var(--pad) calc(13px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(0,0,0,.28); transform: translateY(0); transition: transform .26s ease; } .rest-timer.hide { transform: translateY(115%); } .rest-timer .rt-info { display: flex; flex-direction: column; line-height: 1.1; } .rest-timer .rt-label { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; } .rest-timer .rt-time { font-family: var(--font-num); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; } .rest-timer .rt-grow { flex: 1; } .rest-timer button { font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--paper); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r); min-height: 42px; min-width: 46px; padding: 0 12px; cursor: pointer; } .rest-timer button:active { transform: translateY(1px); } .rest-timer .rt-skip { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .rest-timer.done { background: var(--good); } .rest-timer.done .rt-time { color: #fff; } /* historial / observaciones */ .logblock + .logblock { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .logblock h3 { margin-bottom: 8px; } .setline { display: flex; gap: 14px; font-family: var(--font-num); font-size: .95rem; padding: 3px 0; color: var(--ink-soft); } .setline .sn { color: var(--ink-faint); width: 26px; } .setline b { color: var(--ink); font-weight: 650; } .note-box { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 10px 12px; font-size: .92rem; } .note-box .label { color: var(--ink-faint); margin-bottom: 3px; } .note-box.coach { border-left-color: var(--good); } /* ----------------------------------------------------------- bottom nav */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; text-decoration: none; color: var(--ink-faint); font-size: .7rem; font-weight: 600; } .bottomnav a.active { color: var(--accent); } .bottomnav .bn-ico { font-size: 1.15rem; line-height: 1; } body:has(.bottomnav) .wrap { padding-bottom: 88px; } /* --------------------------------------------------------------- helpers */ .divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; } .section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; } details.box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } details.box > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; } details.box > summary::-webkit-details-marker { display: none; } details.box[open] > summary { border-bottom: 1px solid var(--line); } details.box .box-body { padding: 14px; } @media (min-width: 720px) { h1 { font-size: 1.9rem; } .grid-2.wide-3 { grid-template-columns: repeat(3, 1fr); } } /* ===== días en home alumna (checklist cumplido/pendiente) ===== */ .week-progress { font-size: .8rem; color: var(--ink-faint); margin: 0 2px 10px; } .week-progress .num { font-weight: 700; color: var(--ink-soft); } .day-card { transition: border-color .15s; } .day-card.is-done { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); } .day-btn { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: 11px; width: 100%; } .day-check { flex: none; width: 23px; height: 23px; border-radius: 100px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; color: transparent; line-height: 1; } .day-check.on { background: var(--good); border-color: var(--good); color: #fff; } .day-check.prog { border-color: var(--accent); border-style: dashed; } .day-name { flex: 1; min-width: 0; font-weight: 650; font-size: 1.05rem; } .day-card.is-done .day-name { color: var(--ink-soft); } .day-btn .badge { flex: none; } .accent-badge { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .done-badge { background: var(--good-bg); color: var(--good); border-color: transparent; } /* ===== semanas (tabs) ===== */ .week-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .week-tab { text-decoration: none; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-soft); padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); cursor: pointer; } .week-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .week-tab.add { color: var(--ink-faint); border-style: dashed; } /* ===== estado de ánimo ===== */ .mood { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .mood-q { font-size: .8rem; font-weight: 600; color: var(--ink-soft); } .mood-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mood-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; } .mood-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .mood-emoji { font-size: 1.5rem; line-height: 1; } .mood-label { font-size: .66rem; color: var(--ink-faint); font-weight: 600; } .mood-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .mood-opt:has(input:checked) .mood-label { color: var(--accent); } /* ===== calentamiento ===== */ .warmup .warm-list { list-style: none; padding: 0; margin: 0; } .warm-list li + li { border-top: 1px solid var(--line); } .warm-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; cursor: pointer; } .warm-item input { width: 21px; height: 21px; accent-color: var(--good); flex: none; } .warm-item:has(input:checked) span { text-decoration: line-through; color: var(--ink-faint); } /* ===== ayuda RIR ===== */ .rir-help { margin-bottom: 14px; } .rir-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 8px; } .rir-table th, .rir-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); } .rir-table th { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .rir-table td.num { font-family: var(--font-num); font-weight: 650; } /* ===== nota por ejercicio (alumna) ===== */ .exnote { margin: 10px var(--pad) 0; } .exnote > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-soft); padding: 4px 0; } .exnote > summary::-webkit-details-marker { display: none; } .exnote textarea { margin-top: 6px; min-height: 60px; } .ex-note-view { margin-top: 6px; font-size: .85rem; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--r); padding: 6px 10px; } /* ===== edición inline (click en ✎ para revelar el form) ===== */ .inline-edit { min-width: 0; } .inline-edit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .inline-edit > summary::-webkit-details-marker { display: none; } .inline-edit .edit-hint { color: var(--ink-faint); font-size: .85rem; opacity: 0; transition: opacity .15s; } .inline-edit > summary:hover .edit-hint { opacity: 1; } .inline-edit[open] > summary .edit-hint { opacity: 1; color: var(--accent); } /* ===== builder coach: grupos y filas chicas ===== */ .ss-coach-head { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 10px 0 2px; } .ss-coach-item { border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-left: 10px; } .mini-row { padding: 7px 0; } .mini-row + .mini-row { border-top: 1px solid var(--line); } /* ===================================================================== MOVIMIENTO — micro-transiciones. Todo se anula con prefers-reduced-motion. ===================================================================== */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { /* entrada escalonada del contenido al cargar cada pantalla */ .wrap > * { animation: rise .42s cubic-bezier(.22, .7, .2, 1) both; } .wrap > *:nth-child(2) { animation-delay: .05s; } .wrap > *:nth-child(3) { animation-delay: .10s; } .wrap > *:nth-child(4) { animation-delay: .14s; } .wrap > *:nth-child(5) { animation-delay: .18s; } .wrap > *:nth-child(6) { animation-delay: .22s; } .wrap > *:nth-child(n+7) { animation-delay: .26s; } /* despliegues suaves (video, notas, ayuda RIR) y nuevas filas de series */ details[open] > .box-body, details[open] > .video-load, .video-frame { animation: fadein .22s ease both; } .setrow { animation: fadein .2s ease both; } /* check de día cumplido aparece con un pop */ .day-check.on { animation: pop .3s cubic-bezier(.3, 1.4, .5, 1) both; } } /* hovers / press — viven fuera del media query (transición, no animación) */ .list-row { transition: background .15s ease; } .day-card { transition: border-color .15s ease, transform .12s ease; } .day-card:active { transform: scale(.99); } .day-check { transition: background .2s ease, border-color .2s ease, color .2s ease; } .week-tab { transition: background .15s ease, color .15s ease, border-color .15s ease; } .mood-opt { transition: background .15s ease, border-color .15s ease; } .video-load .video-frame { will-change: opacity; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===== "Anterior" (previous performance) ===== */ .prev-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-family: var(--font-num); font-size: .82rem; color: var(--ink-soft); } .prev-tag { font-family: var(--font-ui); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; } .prev-set { background: var(--surface-2); border-radius: 100px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .prev-set i { color: var(--ink-faint); font-style: normal; margin: 0 1px; } /* ===== Banner de récord (PR) ===== */ .pr-banner { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--on-accent); border-radius: var(--r-lg); padding: 16px var(--pad); margin-bottom: 18px; } @media (prefers-reduced-motion: no-preference) { .pr-banner { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; } .pr-burst { animation: pop .5s cubic-bezier(.3, 1.5, .5, 1) .1s both; } } .pr-burst { font-size: 2rem; line-height: 1; flex: none; } .pr-body strong { display: block; font-size: 1.05rem; margin-bottom: 4px; } .pr-body ul { margin: 0; padding-left: 16px; font-size: .9rem; } .pr-body li { margin: 2px 0; } .pr-body .faint { color: color-mix(in srgb, var(--on-accent) 70%, transparent); } /* ===== Gráfico de progreso ===== */ .metric-seg { display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--r); padding: 4px; margin-bottom: 14px; } .metric-seg button { flex: 1; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; border-radius: calc(var(--r) - 2px); padding: 8px 4px; cursor: pointer; transition: background .15s, color .15s; } .metric-seg button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .chart { width: 100%; } .chart svg { display: block; overflow: visible; } .cg-grid { stroke: var(--line); stroke-width: 1; } .cg-axis { fill: var(--ink-faint); font-size: 10px; font-family: var(--font-num); } .cg-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; } .cg-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .cg-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } @media (prefers-reduced-motion: no-preference) { .cg-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } } .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .chart-stats > div { display: flex; flex-direction: column; gap: 2px; } .cs-k { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .cs-v { font-size: 1.15rem; font-weight: 700; } .cs-v.up { color: var(--good); } .cs-v.down { color: var(--accent); } /* ===== Membresía / acceso ===== */ .access-banner { border-radius: var(--r-lg); padding: 13px var(--pad); margin-bottom: 16px; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; } .access-banner strong { font-size: .98rem; } .access-banner.expired { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .access-banner.expiring { background: var(--surface-2); border: 1px solid var(--line-strong); } .access-banner span { color: var(--ink-soft); } .access-pill { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 100px; } .access-pill.sm { margin: 0 0 0 6px; font-size: .64rem; padding: 1px 7px; vertical-align: middle; } .access-pill.none { background: var(--surface-2); color: var(--ink-faint); } .access-pill.active { background: var(--good-bg); color: var(--good); } .access-pill.expiring { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); } .access-pill.expired { background: var(--accent); color: var(--on-accent); } .expired-screen { text-align: center; padding: 8vh 0 4vh; } .expired-ico { font-size: 3rem; margin-bottom: 12px; } .expired-screen h1 { margin-bottom: 10px; } .expired-screen p { color: var(--ink-soft); max-width: 32ch; margin: 6px auto; } /* ===== Racha / adherencia (home alumna) ===== */ .streak-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; } .streak-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 6px; } .streak-big { font-family: var(--font-num); font-size: 1.7rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: baseline; gap: 2px; } .streak-flame { font-size: 1rem; } .streak-k { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; text-align: center; } /* ===== Reporte mensual (coach) ===== */ .report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .report-stat { display: flex; flex-direction: column; gap: 3px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 6px; } .rs-v { font-size: 1.6rem; font-weight: 700; line-height: 1; } .rs-k { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; text-align: center; } .vol-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .vol-bar-row + .vol-bar-row { border-top: 1px solid var(--line); } .vol-name { flex: 0 0 33%; font-size: .88rem; font-weight: 600; } .vol-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: 100px; overflow: hidden; } .vol-fill { height: 100%; background: var(--accent); border-radius: 100px; } @media (prefers-reduced-motion: no-preference) { .vol-fill { animation: growx .6s ease both; } @keyframes growx { from { transform: scaleX(0); transform-origin: left; } } } .vol-val { flex: 0 0 auto; font-size: .82rem; color: var(--ink-soft); min-width: 54px; text-align: right; }