/* ===== ClhoeFit — Styles ===== */ :root { /* Paleta ClhoeFit — alineada con las guías de Canva de Clhoe (jul 2026) */ --pine: #0A5E62; --blush: #F1C5E0; --blush-soft: #FFE0F3; --rose: #B3717C; --powder: #E6F3FA; --celeste: #D0E3EC; --cream: #FAF6EF; --ink: #14302F; --surface: #FAF6EF; --surface-container: #F0EBE3; --surface-high: #E6DFD5; --on-surface: #14302F; --on-surface-variant: #6B7B7B; --outline: #C8BFB5; --error: #C62828; } * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; margin:0; padding:0; box-sizing:border-box; } input, textarea { -webkit-user-select:text; user-select:text; } html, body { font-family:'Manrope',sans-serif; height:100%; background:var(--cream); color:var(--ink); overflow:hidden; } h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; } .material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-size:24px; display:inline-flex; align-items:center; justify-content:center; } .material-symbols-outlined.sm { font-size:20px; } .material-symbols-outlined.lg { font-size:32px; } .material-symbols-outlined.xl { font-size:48px; } .material-symbols-outlined.filled { font-variation-settings:'FILL' 1; } /* Screen system */ .screen { display:none !important; position:absolute; top:0; left:0; right:0; bottom:0; overflow-y:auto; overflow-x:hidden; z-index:1; background:var(--cream); } .screen.active { display:flex !important; flex-direction:column; } .screen::-webkit-scrollbar { display:none; } .screen { -ms-overflow-style:none; scrollbar-width:none; } /* Screens that live under the bottom nav: leave room for the nav plus the iOS home indicator / Safari toolbar so the last button never gets covered */ .screen.with-nav { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } /* Transition animations */ @keyframes screenInRight { from { transform:translateX(40px); opacity:0; } to { transform:translateX(0); opacity:1; } } @keyframes screenInLeft { from { transform:translateX(-40px); opacity:0; } to { transform:translateX(0); opacity:1; } } @keyframes screenOutLeft { from { transform:translateX(0); opacity:1; } to { transform:translateX(-20px); opacity:0; } } @keyframes screenOutRight { from { transform:translateX(0); opacity:1; } to { transform:translateX(20px); opacity:0; } } @keyframes screenInFade { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } } @keyframes screenOutFade { from { opacity:1; } to { opacity:0; } } .screen-enter-right { animation: screenInRight 0.32s cubic-bezier(0.22,1,0.36,1) both; } .screen-enter-left { animation: screenInLeft 0.32s cubic-bezier(0.22,1,0.36,1) both; } .screen-enter-fade { animation: screenInFade 0.22s ease both; } .screen-exit-left { animation: screenOutLeft 0.28s cubic-bezier(0.55,0,1,0.45) both; } .screen-exit-right { animation: screenOutRight 0.28s cubic-bezier(0.55,0,1,0.45) both; } .screen-exit-fade { animation: screenOutFade 0.2s ease both; } #app { position:relative; width:100%; height:100%; max-width:480px; margin:0 auto; background:var(--cream); overflow:hidden; } /* Loading screen */ #screen-loading { align-items:center; justify-content:center; } #screen-loading::after { content:''; width:40px; height:40px; border:3px solid var(--outline); border-top-color:var(--pine); border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Bottom nav */ .bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; z-index:50; background:rgba(250,246,239,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--outline); padding:8px 0 calc(6px + env(safe-area-inset-bottom)); } /* iOS floats position:fixed elements over the page while the keyboard is open; hide the nav during text input so it never covers the form (see ui.js) */ body.kb-open .bottom-nav { display:none !important; } .nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; cursor:pointer; color:var(--on-surface-variant); transition:color 0.2s; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; } .nav-item.active { color:var(--rose); } .nav-item.active .material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; } /* App header */ .app-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(250,246,239,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--outline); } /* Logo */ .logo-text { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:var(--pine); letter-spacing:-0.02em; } .logo-mark { width:52px; height:52px; border-radius:50%; background:var(--pine); color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* Icon buttons */ .icon-btn { width:40px; height:40px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background 0.2s; } .icon-btn:hover { background:var(--surface-container); } .icon-btn.pine-icon { color:var(--pine); } .icon-btn-sm { width:28px; height:28px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant); } .icon-btn-sm.danger { color:var(--rose); } /* Welcome screen */ .welcome-hero { position:relative; height:55%; } .welcome-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,rgba(20,48,47,0.1),rgba(20,48,47,0.75)); } .welcome-img { width:100%; height:100%; object-fit:cover; } .welcome-logo { position:absolute; top:20px; left:24px; z-index:2; font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--cream); } .welcome-headline { position:absolute; bottom:24px; left:24px; right:24px; z-index:2; } .welcome-headline h1 { font-family:'Cormorant Garamond',serif; font-size:42px; font-weight:700; color:white; line-height:1.1; } .welcome-bottom { flex:1; padding:28px 24px; display:flex; flex-direction:column; justify-content:center; background:var(--cream); } /* Buttons */ .google-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:16px; border:none; border-radius:9999px; background:white; cursor:pointer; font-weight:600; font-size:15px; color:var(--ink); font-family:'Manrope',sans-serif; box-shadow:0 1px 4px rgba(20,48,47,0.12); transition:all 0.2s; } .google-btn:hover { box-shadow:0 3px 12px rgba(20,48,47,0.16); } .lang-btn { flex:1; padding:12px; border-radius:9999px; font-weight:700; font-size:13px; cursor:pointer; border:1.5px solid var(--outline); background:none; color:var(--on-surface-variant); font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.05em; transition:all 0.2s; } .lang-btn.active { background:var(--blush); color:var(--ink); border-color:var(--rose); } .cta-primary { width:100%; padding:16px; border:none; border-radius:9999px; font-weight:700; font-size:15px; cursor:pointer; font-family:'Manrope',sans-serif; background:var(--pine); color:var(--cream); transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; } .cta-primary:hover { box-shadow:0 4px 16px rgba(10,93,97,0.3); } .cta-primary:disabled { opacity:0.5; cursor:default; } .cta-secondary { width:100%; padding:14px; border:1.5px solid var(--outline); border-radius:9999px; font-weight:700; cursor:pointer; font-family:'Manrope',sans-serif; background:none; color:var(--ink); transition:all 0.2s; display:flex; align-items:center; justify-content:center; } .cta-danger { width:100%; padding:14px; border:none; border-radius:9999px; font-weight:700; cursor:pointer; font-family:'Manrope',sans-serif; background:#C62828; color:white; transition:all 0.2s; } /* Cards */ .card { background:white; border-radius:1rem; padding:20px; box-shadow:0 1px 4px rgba(20,48,47,0.06); } /* Forms */ .form-input { width:100%; padding:14px 16px; border:1.5px solid var(--outline); border-radius:0.75rem; font-size:16px; font-family:'Manrope',sans-serif; background:white; color:var(--ink); transition:all 0.2s; outline:none; } .form-input:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(179,113,124,0.12); } .form-label { display:block; font-size:11px; font-weight:700; color:var(--on-surface-variant); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.1em; font-family:'Manrope',sans-serif; } .form-group { margin-bottom:16px; } /* Chips */ .chip { background:var(--surface-container); border:1.5px solid transparent; border-radius:9999px; padding:9px 18px; cursor:pointer; transition:all 0.2s; font-size:13px; font-weight:600; color:var(--on-surface-variant); font-family:'Manrope',sans-serif; } .chip.active { background:var(--blush); color:var(--ink); border-color:var(--rose); } .chip-group { display:flex; flex-wrap:wrap; gap:8px; } /* Gender buttons */ .gender-btn { flex:1; padding:16px; border:1.5px solid var(--outline); border-radius:1rem; text-align:center; cursor:pointer; transition:all 0.2s; background:white; font-weight:600; color:var(--ink); font-family:'Manrope',sans-serif; } .gender-btn.active { background:var(--blush); border-color:var(--rose); color:var(--ink); } /* Location / Equipment */ .loc-option { background:white; border-radius:1rem; padding:20px; text-align:center; cursor:pointer; transition:all 0.2s; border:1.5px solid var(--outline); } .loc-option.active { border-color:var(--rose); background:rgba(241,197,224,0.25); } .loc-option .material-symbols-outlined { color:var(--on-surface-variant); } .loc-option.active .material-symbols-outlined { color:var(--rose); } .equip-option { background:white; border-radius:1rem; padding:18px 14px; text-align:center; cursor:pointer; transition:all 0.2s; border:1.5px solid var(--outline); } .equip-option.active { border-color:var(--rose); background:rgba(241,197,224,0.25); } .equip-option.active .material-symbols-outlined { color:var(--rose); } /* Progress bar */ .progress-bar { height:6px; background:var(--surface-container); width:100%; border-radius:3px; } .progress-fill { height:100%; background:linear-gradient(90deg,var(--rose),var(--blush)); border-radius:3px; transition:width 0.5s; } /* Onboarding header */ .ob-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 12px; } .ob-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; color:var(--ink); margin-bottom:8px; } .ob-sub { color:var(--on-surface-variant); font-size:14px; margin-bottom:24px; line-height:1.5; } /* Stats */ .stat-card { background:white; border-radius:1rem; padding:18px 12px; text-align:center; box-shadow:0 1px 4px rgba(20,48,47,0.06); } .stat-value { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:700; color:var(--rose); line-height:1; } .stat-label { font-size:10px; color:var(--on-surface-variant); text-transform:uppercase; letter-spacing:0.1em; margin-top:6px; font-weight:700; } /* Section labels */ .section-label { font-size:11px; font-weight:700; color:var(--rose); text-transform:uppercase; letter-spacing:0.12em; display:block; } .section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } /* Page greeting */ .page-greeting { padding-top:16px; margin-bottom:20px; } /* Client cards */ .client-list { display:flex; flex-direction:column; gap:12px; } .client-card { background:white; border-radius:1rem; padding:16px; cursor:pointer; transition:all 0.2s; box-shadow:0 1px 4px rgba(20,48,47,0.06); } .client-card:active { transform:scale(0.98); } .client-card-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; } .client-card-bottom { display:flex; justify-content:space-between; align-items:center; } .client-avatar, .client-avatar-ring { border-radius:50%; color:white; font-family:'Cormorant Garamond',serif; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 10px rgba(0,0,0,0.18); letter-spacing:-0.01em; line-height:1; } .client-avatar-ring { width:44px; height:44px; font-size:20px; background:linear-gradient(135deg,var(--blush),var(--rose)); } .adherence-pct { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; line-height:1; } .adherence-pct.good { color:var(--pine); } .adherence-pct.ok { color:#D4A017; } .adherence-pct.low { color:var(--rose); } /* "Revisar" en vez del ⚡ mudo, y dentro de la paleta (13/08/2026) */ .badge-alert { background:var(--blush); color:var(--ink); border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:700; } .status-chip { font-size:11px; font-weight:700; border-radius:9999px; padding:3px 10px; text-transform:uppercase; letter-spacing:0.05em; } .status-chip.active { background:rgba(241,197,224,0.4); color:var(--rose); } .status-chip.inactive { background:var(--surface-container); color:var(--on-surface-variant); } /* Tab bar */ .tab-bar { display:flex; border-bottom:1px solid var(--outline); background:white; padding:0 20px; } .tab-btn { flex:1; padding:12px 8px; border:none; background:none; cursor:pointer; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:var(--on-surface-variant); border-bottom:2px solid transparent; transition:all 0.2s; } .tab-btn.active { color:var(--rose); border-bottom-color:var(--rose); } /* Plan display */ .plan-day-card { background:white; border-radius:1rem; margin-bottom:12px; overflow:hidden; box-shadow:0 1px 4px rgba(20,48,47,0.06); } .plan-day-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:rgba(241,197,224,0.22); } .plan-ex-list { padding:8px 0; } .plan-ex-row { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; border-bottom:1px solid var(--surface-container); } .plan-ex-row:last-child { border-bottom:none; } /* Routine builder */ .builder-day-chips { display:flex; gap:6px; justify-content:space-between; margin-bottom:16px; } .day-chip { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--outline); background:white; cursor:pointer; font-size:13px; font-weight:700; color:var(--on-surface-variant); transition:all 0.2s; display:flex; align-items:center; justify-content:center; } .day-chip.training { background:rgba(241,197,224,0.35); border-color:var(--rose); color:var(--rose); } .day-chip.selected { background:var(--rose); color:var(--cream); border-color:var(--rose); } .day-chip.training.selected { background:var(--rose); } .suggest-btn { flex:1; padding:10px 16px; border:1.5px solid var(--rose); border-radius:9999px; background:rgba(241,197,224,0.25); color:var(--rose); font-weight:700; font-size:13px; cursor:pointer; font-family:'Manrope',sans-serif; transition:all 0.2s; } .suggest-btn:hover { background:rgba(241,197,224,0.45); } .builder-day-section { margin-top:8px; } .builder-day-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .builder-ex-card { background:white; border-radius:1rem; margin-bottom:10px; overflow:hidden; box-shadow:0 1px 3px rgba(20,48,47,0.08); } .builder-ex-header { display:flex; align-items:center; padding:14px 12px; cursor:pointer; gap:8px; } /* Orden de ejercicios: número de posición + botones subir/bajar */ .builder-reorder-hint { font-size:11px; color:var(--on-surface-variant); margin:-6px 0 10px; } .builder-ex-num { flex:none; width:22px; height:22px; border-radius:50%; background:var(--blush-soft); color:var(--ink); font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } .icon-btn-move { width:36px; height:36px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--rose); transition:background 0.15s; } .icon-btn-move:active { background:var(--blush-soft); } .icon-btn-move:disabled { color:var(--outline); opacity:0.4; cursor:default; } .builder-ex-editor { padding:14px 16px; border-top:1px solid var(--surface-container); background:var(--surface-container); } .add-ex-btn { width:100%; padding:12px; border:1.5px dashed var(--outline); border-radius:1rem; background:none; cursor:pointer; font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; color:var(--on-surface-variant); display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; margin-top:4px; } .add-ex-btn:hover { border-color:var(--rose); color:var(--rose); } /* Exercise search */ .ex-search-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--surface-container); cursor:pointer; } /* Today / client screens */ .today-card { background:white; border-radius:1.25rem; padding:24px; margin-bottom:16px; box-shadow:0 2px 8px rgba(20,48,47,0.08); } .done-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(34,197,94,0.12); color:#15803d; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:700; } .done-card { border:2px solid rgba(34,197,94,0.3); } .no-plan-card, .rest-card-client { background:white; border-radius:1.25rem; padding:32px 24px; text-align:center; margin-bottom:16px; box-shadow:0 1px 4px rgba(20,48,47,0.06); } .week-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:16px; } .att-day { aspect-ratio:1; border-radius:0.75rem; background:var(--surface-container); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--on-surface-variant); } .att-day.done { background:var(--rose); color:var(--cream); } .att-day.today { background:var(--blush-soft); color:var(--rose); outline:2px solid var(--rose); } .att-day.rest-mark { opacity:0.4; } .next-workout-card { background:var(--blush-soft); border-radius:1rem; padding:16px; } /* Progress */ .pr-card { background:white; border-radius:1rem; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; box-shadow:0 1px 3px rgba(20,48,47,0.06); } .summary-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--surface-container); } .summary-row:last-child { border-bottom:none; } .milestone-row { display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--surface-container); } .milestone-row:last-child { border-bottom:none; } /* Training */ .training-back-row { display:flex; align-items:center; justify-content:space-between; padding:8px 4px; margin-bottom:16px; } .train-ex-counter { font-family:'Cormorant Garamond',serif; font-size:56px; font-weight:700; color:var(--rose); text-align:center; line-height:1; margin-bottom:16px; } /* Lista de ejercicios del día (solicitud Andreina 13/08/2026): verlos todos y entrar a cada uno, en vez del asistente que los iba soltando de uno en uno. */ .ex-list { background:var(--surface-container); border-radius:0.75rem; padding:4px 14px; } .ex-row { display:flex; align-items:center; gap:12px; width:100%; padding:14px 0; background:none; border:none; border-bottom:1px solid var(--surface-high); text-align:left; cursor:pointer; font-family:'Manrope',sans-serif; } .ex-row:last-child { border-bottom:none; } .ex-row-mark { flex-shrink:0; width:32px; height:32px; border-radius:9999px; background:var(--surface-high); color:var(--on-surface-variant); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; } .ex-row-done .ex-row-mark { background:var(--blush); color:var(--pine); } .ex-row-done .ex-row-mark .material-symbols-outlined { font-size:20px; } .ex-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .ex-row-name { font-size:15px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ex-row-done .ex-row-name { color:var(--on-surface-variant); } .ex-row-sub { font-size:12px; color:var(--on-surface-variant); } .ex-row-go { flex-shrink:0; color:var(--on-surface-variant); font-size:20px; } /* Aviso de entreno a medias en la pantalla de Hoy (solicitud Clhoe 12/08/2026) */ .resume-chip { display:inline-flex; align-items:center; gap:6px; background:var(--blush-soft); color:var(--pine); border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:700; margin-bottom:10px; } .target-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:var(--surface-container); border-radius:0.75rem; padding:16px; margin-top:12px; } .target-val { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:700; color:var(--rose); text-align:center; } .target-lbl { font-size:10px; color:var(--on-surface-variant); text-transform:uppercase; letter-spacing:0.1em; text-align:center; margin-top:2px; font-weight:700; } /* Rest timer */ .rest-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:40; padding:40px; } .rest-countdown { font-family:'Cormorant Garamond',serif; font-size:80px; font-weight:700; color:var(--rose); line-height:1; } .rest-ring { width:200px; height:200px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:28px; } .rest-ring svg { position:absolute; top:-2px; left:-2px; width:204px; height:204px; transform:rotate(-90deg); } .rest-ring svg circle { fill:none; stroke:var(--rose); stroke-width:4; stroke-linecap:round; stroke-dasharray:636; transition:stroke-dashoffset 1s linear; } .rest-chips { display:flex; gap:8px; margin-top:20px; } .rest-chip { padding:8px 16px; border-radius:9999px; border:1.5px solid var(--outline); background:white; color:var(--on-surface-variant); font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; } .rest-chip.active { background:var(--rose); color:var(--cream); border-color:var(--rose); } .skip-rest-btn { margin-top:28px; background:none; border:1.5px solid var(--outline); color:var(--on-surface-variant); border-radius:9999px; padding:10px 28px; font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; cursor:pointer; } /* Celebration */ .celebrate-screen { text-align:center; padding:60px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; } .confetti-container { position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; } .confetti-piece { position:absolute; width:10px; height:10px; border-radius:2px; top:-10px; animation:confetti-fall 2.5s ease-out forwards; } @keyframes confetti-fall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1;} 100%{transform:translateY(100vh) rotate(720deg);opacity:0;} } /* Nutrition */ .nutri-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; } .nutri-tile { background:#fff; border-radius:1rem; padding:12px 8px; text-align:center; box-shadow:0 1px 3px rgba(20,48,47,0.06); } .nutri-tile-label { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--on-surface-variant); } .nutri-tile-val { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; line-height:1.2; margin-top:2px; } .nutri-tile-target { font-size:10px; color:var(--on-surface-variant); margin-top:2px; } .nutri-bar { height:4px; background:rgba(20,48,47,0.08); border-radius:4px; overflow:hidden; margin-top:6px; } .nutri-bar-fill { height:100%; border-radius:4px; } /* Reparto de macros editable (coach) */ .macro-split { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px; } .macro-split-col { text-align:center; } .macro-split-label { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; } .macro-split-field { position:relative; } .macro-split-field .form-input { padding:12px 26px 12px 12px; text-align:center; font-weight:700; } .macro-split-pct { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:var(--on-surface-variant); pointer-events:none; } .macro-split-grams { font-size:11px; color:var(--on-surface-variant); margin-top:4px; } .macro-sum { font-size:11px; font-weight:700; } .macro-sum.ok { color:var(--pine); } .macro-sum.bad { color:var(--rose); } .nutri-food-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--surface-container); } .nutri-food-row:last-of-type { border-bottom:none; } .nutri-pick-row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--surface-container); cursor:pointer; } .nutri-pick-row:active { background:var(--surface-container); } /* Watch technique (exercise video) */ .watch-technique-btn { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; padding:10px 16px; border:1px solid var(--outline); border-radius:999px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--rose); text-decoration:none; } .watch-technique-btn:active { background:var(--surface-container); } /* Attention filter bar */ .filter-active-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; margin-bottom:10px; background:var(--surface-container); border-radius:12px; cursor:pointer; font-size:13px; color:var(--on-surface-variant); } .filter-clear { font-weight:700; color:var(--rose); white-space:nowrap; } /* Loading screen */ #screen-loading { align-items:center; justify-content:center; background:var(--cream); } .loading-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; } .loading-logo { animation:loadingPulse 1.6s ease-in-out infinite; } .loading-title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--pine); margin-top:18px; letter-spacing:0.5px; } .loading-bar { width:180px; height:4px; background:rgba(241,197,224,0.4); border-radius:4px; overflow:hidden; margin-top:24px; position:relative; } .loading-bar-fill { position:absolute; top:0; left:0; height:100%; width:40%; background:linear-gradient(90deg,var(--rose),var(--blush)); border-radius:4px; animation:loadingSlide 1.3s ease-in-out infinite; } .loading-msg { font-family:'Manrope',sans-serif; font-size:13px; color:var(--on-surface-variant); margin-top:16px; } @keyframes loadingPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.08);opacity:0.85;} } @keyframes loadingSlide { 0%{left:-40%;} 100%{left:100%;} } /* Bottom sheet */ .sheet-overlay { position:fixed; inset:0; background:rgba(20,48,47,0.4); z-index:60; display:none; } .sheet-overlay.active { display:block; } .bottom-sheet { position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%); width:100%; max-width:480px; background:var(--cream); border-radius:1.5rem 1.5rem 0 0; z-index:70; transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); padding:0 24px 40px; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .bottom-sheet.active { transform:translateX(-50%) translateY(0); } @media (min-width:600px) { .bottom-sheet { top:50%; bottom:auto; transform:translate(-50%,-50%) scale(0.96); opacity:0; visibility:hidden; max-height:88vh; border-radius:1.5rem; box-shadow:0 24px 64px rgba(20,48,47,0.18); transition:opacity .25s ease, transform .25s ease, visibility .25s; } .bottom-sheet.active { transform:translate(-50%,-50%) scale(1); opacity:1; visibility:visible; } } .sheet-handle { width:48px; height:5px; background:var(--outline); border-radius:3px; margin:0 auto; cursor:pointer; box-sizing:content-box; padding:14px 60px; background-clip:content-box; } .sheet-close { position:absolute; top:14px; right:16px; width:34px; height:34px; border:none; border-radius:50%; background:var(--surface-container); color:var(--on-surface-variant); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; } .sheet-close .material-symbols-outlined { font-size:20px; } .sheet-close:active { background:var(--outline); } .sheet-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:var(--ink); margin-bottom:16px; } .sheet-actions { display:flex; flex-direction:column; gap:4px; } .sheet-action-btn { display:flex; align-items:center; gap:12px; padding:16px 4px; border:none; background:none; cursor:pointer; font-family:'Manrope',sans-serif; font-size:15px; font-weight:500; color:var(--ink); text-align:left; border-bottom:1px solid var(--surface-container); width:100%; } .sheet-action-btn.danger { color:var(--rose); } .invite-link-box { background:var(--surface-container); border-radius:1rem; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; } /* Toast */ .toast { position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:9999px; font-size:13px; font-weight:600; font-family:'Manrope',sans-serif; z-index:100; opacity:0; transition:all 0.3s; white-space:nowrap; max-width:90%; pointer-events:none; } .toast.visible { opacity:1; transform:translateX(-50%) translateY(0); } /* Modal */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(20,48,47,0.5); z-index:100; align-items:center; justify-content:center; padding:24px; } .modal-overlay.active { display:flex; } .modal-box { background:white; border-radius:1.5rem; padding:28px; max-width:340px; width:100%; text-align:center; box-shadow:0 8px 32px rgba(20,48,47,0.15); } /* Empty states */ .empty-state { text-align:center; padding:32px 0; } /* Workout day preview */ .preview-day-btn { display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border:1.5px solid var(--rose); border-radius:9999px; background:none; color:var(--rose); font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:background 0.2s; } .preview-day-btn:hover { background:rgba(241,197,224,0.3); } .preview-ex-list { display:flex; flex-direction:column; } .preview-ex-row { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--surface-container); } .preview-ex-row:last-child { border-bottom:none; } .preview-ex-num { width:28px; height:28px; border-radius:50%; background:rgba(241,197,224,0.4); color:var(--rose); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Cormorant Garamond',serif; } .preview-stat { flex:1; text-align:center; background:var(--surface-container); border-radius:0.75rem; padding:10px 6px; } .preview-stat-val { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--rose); line-height:1; } .preview-stat-lbl { font-size:10px; color:var(--on-surface-variant); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-top:4px; } /* Sheet divider */ .sheet-divider { font-size:11px; font-weight:700; color:var(--rose); text-transform:uppercase; letter-spacing:0.12em; margin:20px 0 14px; padding-top:16px; border-top:1px solid var(--outline); } /* Banner de alertas (rediseño 13/08/2026) El rojo de sistema de antes era la única zona de la app fuera de la paleta, y dramatizaba un aviso que no es una emergencia: "no entrenó el martes". La jerarquía la llevan ahora la barra rosa de 4 px y el contador en píldora. */ .attention-banner { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--blush-soft); border:1.5px solid var(--blush); border-left:4px solid var(--rose); border-radius:1rem; padding:12px 14px; margin-bottom:12px; cursor:pointer; font-family:'Manrope',sans-serif; color:var(--ink); transition:transform .12s ease, background .2s; } .attention-banner:active { transform:scale(0.985); background:var(--blush); } .attn-count { flex:none; min-width:28px; height:28px; padding:0 8px; border-radius:999px; background:var(--blush); color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; } .attn-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .attn-title { font-size:13px; font-weight:700; color:var(--ink); } .attn-hint { font-size:11px; color:var(--on-surface-variant); } .attn-go { flex:none; font-size:20px; color:var(--rose); } .stat-card-tappable { cursor:pointer; transition:transform .12s ease; } .stat-card-tappable:active { transform:scale(0.985); } /* Sheet "Necesitan tu revisión" */ .attn-sheet-sub { font-size:13px; color:var(--on-surface-variant); margin:-8px 0 16px; } .attn-row { padding:14px 0; border-bottom:1px solid var(--surface-container); } .attn-row:last-of-type { border-bottom:none; } .attn-row-top { display:flex; align-items:center; gap:12px; } .attn-row-id { flex:1; min-width:0; } .attn-row-name { font-size:15px; font-weight:700; color:var(--ink); } .attn-row-why { font-size:12px; color:var(--on-surface-variant); margin-top:2px; } .attn-row-actions{ display:flex; gap:8px; margin-top:10px; } .attn-act { flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--outline); border-radius:999px; background:none; color:var(--ink); text-decoration:none; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; cursor:pointer; } .attn-act:active { background:var(--surface-container); } /* Al retirarse el botón de WhatsApp (17/08) la fila se queda con una sola acción. Con flex:1 ocupaba el ancho entero y quedaba idéntica al botón global del pie del sheet: seis píldoras iguales apiladas y ninguna jerarquía. Sola, abraza su contenido. */ .attn-row-actions .attn-act:only-child { flex:0 0 auto; padding:0 20px; align-self:flex-start; } .attn-act[disabled] { color:var(--on-surface-variant); border-color:var(--outline); opacity:0.5; cursor:default; } .attn-sheet-foot { margin-top:18px; } /* Asignado vs logrado (solicitud Clhoe 13/08/2026) El chip codifica DIRECCIÓN, no valor: usar menos peso puede ser fatiga, regla o una corrección de técnica. Nada de rojo/verde. El texto va siempre en --ink; en --rose sobre --blush-soft daría 3.1:1 y falla AA. */ .avl-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-container); color:var(--on-surface-variant); } .avl-chip.has-log { background:var(--blush-soft); color:var(--ink); } .avl-list { display:flex; flex-direction:column; } .avl-row { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--surface-container); } .avl-row:last-child { border-bottom:none; } .avl-num { flex:none; width:28px; height:28px; border-radius:50%; background:rgba(241,197,224,0.4); color:var(--rose); font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; } .avl-body { flex:1; min-width:0; } .avl-name { font-size:14px; font-weight:700; color:var(--ink); } .avl-cols { display:flex; align-items:stretch; gap:6px; margin-top:8px; } .avl-col { flex:1 1 0; min-width:0; border-radius:0.75rem; padding:8px 10px; background:var(--surface-container); border:1.5px solid transparent; } .avl-col-done { background:#fff; border-color:var(--blush); } .avl-col-lbl { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-surface-variant); } .avl-col-val { font-size:15px; font-weight:700; color:var(--ink); margin-top:2px; } .avl-col-sub { font-size:12px; color:var(--on-surface-variant); margin-top:1px; } .avl-col-sub.avl-free { font-style:italic; } /* El descanso es contexto, no el dato principal de la columna: un punto por debajo. */ .avl-col-sub.avl-rest { font-size:11px; opacity:0.85; } .avl-sep { flex:none; align-self:center; font-size:18px; color:var(--outline); } .avl-foot { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; } .avl-delta{ display:inline-flex; align-items:center; gap:3px; padding:3px 9px 3px 6px; border-radius:999px; font-size:12px; font-weight:700; color:var(--ink); background:var(--surface-container); } .avl-delta .material-symbols-outlined { font-size:15px; } .avl-delta-up { background:var(--blush-soft); } .avl-delta-down { background:var(--celeste); } .avl-delta-same { background:var(--surface-container); } .avl-date { font-size:11px; color:var(--on-surface-variant); } .avl-note { font-size:12px; font-style:italic; color:var(--rose); margin-top:6px; } /* Nota de la coach por ejercicio (solicitud Clhoe 13/09/2026). Acento blush, texto en tinta: --rose sobre --blush-soft no pasa AA (3.1:1). */ .fb-block { margin-top:8px; } .fb-add { display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:6px 12px 6px 8px; border-radius:999px; border:1.5px dashed var(--blush); background:none; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; } .fb-add .material-symbols-outlined, .fb-lbl .material-symbols-outlined, .ex-row-fb .material-symbols-outlined { font-size:15px; color:var(--rose); } .fb-bubble { background:var(--blush-soft); border-radius:0.75rem; padding:8px 10px; } .fb-lbl { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); } .fb-text { font-size:13px; color:var(--ink); margin-top:3px; white-space:pre-wrap; overflow-wrap:anywhere; } .fb-input { height:auto; resize:none; font-size:14px; -webkit-user-select:text; user-select:text; } .fb-quick-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .fb-quick { padding:6px 10px; border-radius:999px; border:none; background:var(--surface-container); font-family:'Manrope',sans-serif; font-size:12px; color:var(--ink); cursor:pointer; } .fb-hint { font-size:11px; color:var(--on-surface-variant); margin-top:6px; } .fb-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; } .fb-link { background:none; border:none; padding:6px 2px; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; color:var(--on-surface-variant); cursor:pointer; } .fb-link-del { margin-right:auto; } .fb-save { padding:8px 16px; border-radius:999px; border:none; background:var(--pine); color:#fff; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; cursor:pointer; } .fb-save:disabled { opacity:0.6; } .fb-client-card { background:var(--blush-soft); border-radius:1rem; padding:12px 14px; margin-bottom:16px; } .fb-client-card .fb-text { font-size:15px; margin-top:4px; } .ex-row-fb { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--ink); } /* .sr-only viene de Tailwind, pero el CDN puede tardar o fallar y entonces la frase para lector de pantalla se vería en medio de la fila. Se define aquí. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; } /* Sin registro: un hueco por rellenar, no un error. */ .avl-col-empty { background:none; border:1.5px dashed var(--outline); } .avl-col-empty .avl-col-val { font-size:13px; font-weight:600; color:var(--on-surface-variant); } .avl-day-empty { font-size:12px; color:var(--on-surface-variant); text-align:center; margin-bottom:12px; } /* "Hace 12 días" no cabe en el serif de 26 px de .preview-stat-val */ .preview-stat-val.avl-stat-text { font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; padding:6px 0; } /* Fecha del récord en la lista de PRs: un "60 kg" sin fecha puede ser de marzo */ .pr-date { font-size:11px; color:var(--on-surface-variant); } /* Search bar */ .search-bar-wrap { position:relative; margin-bottom:14px; } .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--on-surface-variant); font-size:20px; pointer-events:none; } .search-input { width:100%; padding:12px 16px 12px 44px; border:1.5px solid var(--outline); border-radius:9999px; font-size:14px; font-family:'Manrope',sans-serif; background:white; color:var(--ink); outline:none; transition:all 0.2s; } .search-input:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(179,113,124,0.1); } .search-input::placeholder { color:var(--on-surface-variant); } /* Measurements grid */ .meas-grid { display:flex; flex-direction:column; gap:0; } .meas-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--surface-container); } .meas-row:last-child { border-bottom:none; } /* Línea de tiempo de medidas (solicitud Clhoe 12/08/2026) */ .mtl-summary { background:linear-gradient(135deg, var(--blush-soft) 0%, var(--powder) 100%); } .mtl-sum-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:10px; } .mtl-sum-cell { text-align:center; } .mtl-sum-lbl { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-surface-variant); } .mtl-sum-val { font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:700; line-height:1.2; margin-top:2px; } .mtl-row { padding:12px 0; border-bottom:1px solid var(--surface-container); } .mtl-row:last-child { border-bottom:none; } .mtl-row-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; } .mtl-row-title { font-size:13px; font-weight:700; color:var(--ink); } .mtl-row-date { font-size:12px; color:var(--on-surface-variant); flex-shrink:0; } .mtl-row-weight { display:flex; justify-content:space-between; align-items:center; opacity:.62; } .mtl-row-weight .mtl-row-title { font-weight:600; color:var(--on-surface-variant); } .mtl-row-w { font-size:13px; font-weight:700; color:var(--on-surface-variant); } .mtl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:8px; } .mtl-cell-lbl { font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--on-surface-variant); } .mtl-cell-val { font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:700; color:var(--ink); line-height:1.15; } .mtl-cell-unit { font-family:'Manrope', sans-serif; font-size:10px; font-weight:600; color:var(--on-surface-variant); margin-left:2px; } .mtl-cell-diff { font-size:11px; font-weight:700; margin-top:1px; } .mtl-more { width:100%; padding:12px; margin-bottom:20px; background:none; border:1px solid var(--outline); border-radius:14px; color:var(--rose); font-family:'Manrope', sans-serif; font-size:13px; font-weight:700; cursor:pointer; } /* Misc */ .text-pine { color:var(--pine); } .text-rose { color:var(--rose); } .text-ink { color:var(--ink); } .text-blush { color:var(--blush); } /* ===== Feedback Clhoe 18/07/2026: ejercicios propios, check de comidas, semana flexible ===== */ /* Etiqueta "Propio" en el buscador de ejercicios */ .custom-ex-tag { display:inline-block; background:var(--blush-soft); color:var(--rose); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; border-radius:9999px; padding:2px 8px; margin-left:6px; vertical-align:middle; } /* Check de comida cumplida (pantalla Nutrición de la clienta) */ .meal-check { width:32px; height:32px; border-radius:50%; border:2px solid var(--outline); background:transparent; color:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; } .meal-check.checked { background:var(--pine); border-color:var(--pine); color:#fff; } .meal-card-done { border:1.5px solid var(--blush); } /* Mi semana (pantalla Hoy de la clienta) */ .week-plan-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--surface-high); } .week-plan-row:last-child { border-bottom:none; } .week-train-btn { background:var(--blush); color:var(--ink); border:none; border-radius:9999px; padding:8px 18px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; } /* Es un