/* ============================ Design system (themes) ============================ */ :root { /* Light theme (default) */ --color-bg: #f9fafb; --color-bg-elevated: #ffffff; --color-bg-soft: #f3f4f6; --color-text: #111827; --color-text-muted: #6b7280; --color-border: #e5e7eb; /* Accent (similar mindset to landing) */ --color-accent: #3b82f6; /* blue accent */ --color-accent-soft: rgba(59, 130, 246, 0.12); --radius-lg: 1rem; --radius-full: 999px; --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08); --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif; } /* Dark theme (preparado para futuro: solo hay que poner class="theme-dark" en ) */ body.theme-dark { --color-bg: #020617; --color-bg-elevated: #020617; --color-bg-soft: #0b1120; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-border: #1f2933; --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.7); } /* ============================ Base layout ============================ */ .app-body { margin: 0; padding: 0; font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } /* Header fijo tipo app */ .app-header { position: sticky; top: 0; z-index: 20; background: rgba(249, 250, 251, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); padding: 0.75rem 1rem; } body.theme-dark .app-header { background: rgba(2, 6, 23, 0.96); } .app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .app-header-text { display: flex; flex-direction: column; } .app-header-greeting { font-size: 0.8rem; color: var(--color-text-muted); } .app-header-name { font-size: 1.1rem; font-weight: 600; } .app-header-meta { font-size: 0.8rem; color: var(--color-text-muted); } .app-profile-avatar { position: relative; width: 56px; height: 56px; flex-shrink: 0; overflow: visible; /* ✅ allow pencil to escape */ } /* Only the media is clipped */ .app-profile-avatar-media { width: 56px; height: 56px; border-radius: var(--radius-full); overflow: hidden; position: relative; } .app-profile-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Pencil button: its own full circle */ .app-profile-edit-btn { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--color-bg-elevated); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.18); text-decoration: none; } .app-profile-edit-icon { width: 14px; height: 14px; stroke: var(--color-text-muted); fill: none; } /* On hover: blue */ .app-profile-edit-btn:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .app-profile-edit-btn:hover .app-profile-edit-icon { stroke: var(--color-accent); } /* Contenido principal */ .app-main { flex: 1; padding: 1rem 1rem 4.5rem; /* bottom padding para no tapar el nav fijo */ max-width: 720px; margin-inline: auto; } .app-field{ width: 100%; padding: 0.4rem 0.6rem; border-radius: 0.5rem; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text); } body.theme-dark .app-field{ background: #0b1120; border-color: #1f2933; color: #e5e7eb; } /* ============================ Cards / bloques ============================ */ .app-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; } .card { background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); padding: 1rem 1.05rem 1rem; margin-bottom: 0.75rem; } .card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .card-title { font-size: 0.98rem; font-weight: 600; } .card-subtitle { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.15rem 0 0.4rem; } /* Bloque del workout */ .workout-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; } .workout-description { font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.83rem; white-space: pre-wrap; /* respeta los enters */ background-color: var(--color-bg-soft); border-radius: 0.75rem; padding: 0.75rem 0.8rem; margin: 0.25rem 0 0.75rem; } .workout-notes-title { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.25rem; } .workout-notes-body { font-size: 0.85rem; color: var(--color-text-muted); } /* Videos / links */ .workout-links-list { list-style: none; /* sin punto negro */ padding: 0; margin: 0.25rem 0 0; } .workout-links-list li + li { margin-top: 0.5rem; } .workout-link { font-size: 0.82rem; color: var(--color-accent); text-decoration: none; word-break: break-all; } .workout-link:hover { text-decoration: underline; } .workout-video { width: 100%; border-radius: 0.75rem; border: 1px solid var(--color-border); overflow: hidden; } /* ============================ Bottom navigation (tabs) ============================ */ .app-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; border-top: 1px solid var(--color-border); background: rgba(249, 250, 251, 0.96); backdrop-filter: blur(10px); } body.theme-dark .app-bottom-nav { background: rgba(2, 6, 23, 0.96); } .app-bottom-nav-inner { max-width: 720px; margin-inline: auto; display: flex; justify-content: space-between; padding: 0.25rem 0.35rem 0.3rem; } .app-nav-item { flex: 1; text-align: center; padding: 0.25rem 0.25rem 0.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; /* quita subrayado */ color: var(--color-text-muted); font-size: 0.68rem; } .app-nav-item span { display: block; } .app-nav-item-icon { border-radius: var(--radius-full); border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; width: 28px; height: 28px; color: var(--color-text-muted); stroke: currentColor; background: transparent; } .app-nav-item--active { color: var(--color-text); font-weight: 600; } .app-nav-item--active .app-nav-item-icon { color: var(--color-accent); background: transparent; border-color: transparent; } .app-nav-item-icon .nav-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease; } .app-nav-item-icon .nav-icon svg { width: 28px; height: 28px; } .app-nav-item:active .app-nav-item-icon .nav-icon { transform: scale(0.88); } .app-nav-item-icon svg { width: 24px; height: 24px; display: block; stroke-width: 2; } .app-nav-item--active span { color: var(--color-accent); } /* Logout */ /* Logout en header */ .app-header-logout-form { margin-left: auto; } .app-header-logout-btn { all: unset; cursor: pointer; height: 38px; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; line-height: 1; transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .app-header-logout-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); } .app-header-logout-icon { font-size: 0.9rem; } .app-header-logout-lucide svg { width: 18px; height: 18px; } .app-header-logout-text { transform: translateY(0.5px); } /* Header right-side actions group */ .app-header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; } /* Theme icon button (app-like) */ .theme-icon-toggle { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .theme-icon-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); } .theme-icon-toggle:active { transform: translateY(0); } .theme-icon { font-size: 1.05rem; line-height: 1; } .app-header-logout-form { margin-left: 0; } /* ============================ ADMIN LAYOUT (desktop-first) ============================ */ /* El admin usa el mismo body base, pero con otro ancho para el main */ .admin-body .app-main { max-width: 1120px; margin-inline: auto; padding: 1.5rem 2rem 2.5rem; } /* Contenedor principal del admin (opcional, por si lo usas en más vistas) */ .admin-shell { min-height: 100vh; display: flex; flex-direction: column; } /* Grid de tarjetas / botones grandes de módulos */ .admin-modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 0.5rem; } /* Botón-tarjeta de módulo */ .admin-module-tile { background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); padding: 1rem 1.1rem; text-decoration: none; color: var(--color-text); display: flex; align-items: flex-start; gap: 0.75rem; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .admin-module-tile:hover { transform: translateY(-1px); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12); border-color: var(--color-accent); } /* Icono circular del módulo */ .admin-module-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } /* Textos dentro del módulo */ .admin-module-texts { display: flex; flex-direction: column; gap: 0.15rem; } .admin-module-title { font-size: 0.95rem; font-weight: 600; } .admin-module-subtitle { font-size: 0.82rem; color: var(--color-text-muted); } /* Badge "próximamente" para el módulo futuro */ .admin-module-badge { display: inline-flex; align-items: center; margin-top: 0.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.5rem; border-radius: 999px; background-color: var(--color-bg-soft); color: var(--color-text-muted); } /* ============================ ADMIN – tablas y formularios ============================ */ /* Toolbar superior (título + botón nuevo, filtros, etc.) */ .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .admin-toolbar-title { font-size: 1rem; font-weight: 600; } .admin-toolbar-subtitle { font-size: 0.85rem; color: var(--color-text-muted); } /* Botón principal (ej: "+ Nuevo atleta") */ .admin-button-primary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: none; background-color: var(--color-accent); color: #fff; font-size: 0.86rem; font-weight: 600; text-decoration: none; cursor: pointer; } .admin-button-primary:hover { filter: brightness(0.98); } /* Lucide inside admin module icon circles */ /*.admin-module-icon svg {*/ /* width: 24px;*/ /* height: 24px;*/ /* stroke-width: 2.25;*/ /*}*/ /* ============================ Tablas de admin ============================ */ .admin-table-wrapper { width: 100%; overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .admin-table thead { background-color: var(--color-bg-soft); } .admin-table th, .admin-table td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .admin-table th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .admin-table tbody tr:hover { background-color: rgba(59, 130, 246, 0.06); } /* Columna de acciones */ .admin-table-actions { display: flex; align-items: center; gap: 0.35rem; } /* Links de acción */ .admin-link { font-size: 0.8rem; color: var(--color-accent); text-decoration: none; } .admin-link:hover { text-decoration: underline; } /* Botón eliminar compacto */ .admin-button-danger { border: none; background: transparent; color: #b91c1c; font-size: 0.8rem; cursor: pointer; padding: 0; } .admin-badge-active { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background-color: rgba(22, 163, 74, 0.1); color: #15803d; } .admin-badge-inactive { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background-color: rgba(239, 68, 68, 0.1); color: #b91c1c; } /* ============================ Formularios de admin ============================ */ .admin-form-card { max-width: 900px; margin-inline: auto; } .admin-form { display: flex; flex-direction: column; gap: 1rem; } .admin-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem 1rem; } @media (min-width: 768px) { .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Campos que deben ir a lo ancho (ej: textarea grande) */ .admin-form-grid-full { grid-column: 1 / -1; } .admin-form-field { display: flex; flex-direction: column; gap: 0.25rem; } .admin-form-label { font-size: 0.85rem; font-weight: 500; } .admin-form-input, .admin-form-textarea, .admin-form-select { width: 100%; padding: 0.45rem 0.55rem; border-radius: 0.5rem; border: 1px solid var(--color-border); font-size: 0.86rem; font-family: var(--font-sans); background-color: var(--color-bg-elevated); } .admin-form-textarea { resize: vertical; min-height: 90px; } .admin-form-error { font-size: 0.78rem; color: #b91c1c; } .admin-form-help { font-size: 0.78rem; color: var(--color-text-muted); } .admin-form-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } /* Botón secundario tipo link */ .admin-button-secondary-link { font-size: 0.85rem; text-decoration: none; color: var(--color-text-muted); } .admin-button-secondary-link:hover { text-decoration: underline; } /* ============================ Form controls (theme-aware) ============================ */ input, textarea, select, button { font: inherit; } /* Main form controls */ .app-input, .auth-input, .admin-form-input, .admin-form-textarea, .admin-form-select, textarea, input[type="text"], input[type="url"], input[type="password"], input[type="date"], input[type="file"], select { background: var(--color-bg-elevated); color: var(--color-text); border: 1px solid var(--color-border); } /* Dark mode polish: slightly softer elevated bg */ body.theme-dark textarea, body.theme-dark input[type="text"], body.theme-dark input[type="url"], body.theme-dark input[type="password"], body.theme-dark input[type="date"], body.theme-dark select { background: #0b1120; /* matches your --color-bg-soft vibe */ border-color: #1f2933; color: #e5e7eb; } /* Placeholder text */ body.theme-dark input::placeholder, body.theme-dark textarea::placeholder { color: rgba(229, 231, 235, 0.55); } /* Date picker icon (calendar) */ body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.85; } /* File input button */ body.theme-dark input[type="file"]::-webkit-file-upload-button { background: #0f172a; color: #e5e7eb; border: 1px solid #1f2933; border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; } body.theme-dark input[type="file"] { color: rgba(229, 231, 235, 0.75); } .date-nav-btn { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .date-nav-btn:hover { color: var(--color-text); border-color: var(--color-accent); } body.theme-dark .date-nav-btn { color: rgba(229, 231, 235, 0.75); border-color: #1f2933; } /* ============================ ADMIN – header actions ============================ */ .admin-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .admin-button-ghost { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-border); background-color: transparent; font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; cursor: pointer; } .admin-button-ghost:hover { background-color: var(--color-bg-soft); } .admin-button-ghost-icon { font-size: 0.9rem; } @media (min-width: 1024px) { .admin-body .app-main { padding-inline: 2.5rem; } } /* ============================ AUTH (login pages) ============================ */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--color-bg); } .auth-main { width: 100%; max-width: 420px; } .auth-card { padding: 1.5rem 1.4rem 1.3rem; position: relative; } /* Botón volver */ .auth-back { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-bg-elevated); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06); margin-bottom: 0.9rem; transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .auth-back:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); } .auth-back:active { transform: translateY(0px); } .auth-back-icon { font-size: 1.05rem; line-height: 1; } .auth-logo { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.75rem; } .auth-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.25rem; } .auth-subtitle { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .auth-field-group { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; } .auth-label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); } .auth-input { padding: 0.55rem 0.65rem; border-radius: 0.6rem; border: 1px solid var(--color-border); font-size: 0.9rem; background-color: var(--color-bg-elevated); color: var(--color-text); outline: none; } .auth-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent-soft); } .auth-button { width: 100%; margin-top: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 999px; border: none; font-size: 0.95rem; font-weight: 600; background: var(--color-accent); color: #ffffff; cursor: pointer; } .auth-button:active { transform: translateY(1px); } .auth-status { font-size: 0.8rem; border-radius: 0.6rem; padding: 0.5rem 0.65rem; margin-bottom: 0.9rem; } .auth-status--error { background: rgba(220, 38, 38, 0.06); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.25); } .auth-status--ok { background: rgba(22, 163, 74, 0.06); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.25); } .auth-footer { margin-top: 0.9rem; font-size: 0.75rem; color: var(--color-text-muted); text-align: center; } .auth-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bm-acc-summary::-webkit-details-marker { display: none; } .bm-acc[open] .bm-acc-chevron { transform: rotate(180deg); } .bm-acc-chevron { transition: transform 0.15s ease; } /* ============================ QR VERIFY (full-screen status) Only affects qr-verify.html ============================ */ .qr-verify { /* default (notFound) */ --qr-bg-1: #111827; --qr-bg-2: #0b1220; --qr-icon-bg: rgba(255,255,255,0.14); --qr-icon-border: rgba(255,255,255,0.22); --qr-sheet-bg: rgba(255,255,255,0.92); --qr-sheet-text: #0f172a; --qr-sheet-muted: #475569; } .qr-verify.qr-verify--active { --qr-bg-1: #16a34a; --qr-bg-2: #065f46; --qr-icon-bg: rgba(255,255,255,0.18); --qr-icon-border: rgba(255,255,255,0.28); } .qr-verify.qr-verify--inactive { --qr-bg-1: #dc2626; --qr-bg-2: #7f1d1d; --qr-icon-bg: rgba(255,255,255,0.16); --qr-icon-border: rgba(255,255,255,0.26); } .qr-verify.qr-verify--notfound { --qr-bg-1: #0f172a; --qr-bg-2: #020617; --qr-icon-bg: rgba(255,255,255,0.14); --qr-icon-border: rgba(255,255,255,0.22); } /* Full-page layout */ .qr-verify-shell { min-height: 100vh; background: radial-gradient(circle at top, rgba(255,255,255,0.18), rgba(255,255,255,0) 45%), linear-gradient(180deg, var(--qr-bg-1), var(--qr-bg-2)); display: flex; flex-direction: column; } /* Center status area */ .qr-verify-main { flex: 1; display: grid; place-items: center; padding: 1.25rem 1rem 7.5rem; /* bottom space for sheet */ } .qr-verify-status { text-align: center; color: #ffffff; width: 100%; max-width: 520px; padding-inline: 0.75rem; } .qr-verify-icon-wrap { width: 160px; height: 160px; border-radius: 999px; background: var(--qr-icon-bg); border: 1px solid var(--qr-icon-border); display: grid; place-items: center; margin: 0 auto 1rem; box-shadow: 0 24px 70px rgba(0,0,0,0.35); backdrop-filter: blur(6px); } .qr-verify-icon { font-size: 5rem; font-weight: 900; line-height: 1; } .qr-verify-kicker { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; text-shadow: 0 12px 40px rgba(0,0,0,0.35); } /* Bottom sheet */ .qr-verify-sheet { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); pointer-events: none; /* only inner should receive taps */ } .qr-verify-sheet-inner { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--qr-sheet-bg); border-radius: 24px 24px 0 0; border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 -18px 55px rgba(0,0,0,0.28); padding: 1.1rem 1.1rem 1.25rem; color: var(--qr-sheet-text); backdrop-filter: blur(10px); } .qr-verify-brand { margin-bottom: 0.85rem; } .qr-verify-brand-title { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; } .qr-verify-brand-subtitle { margin-top: 0.2rem; font-size: 0.88rem; color: var(--qr-sheet-muted); } .qr-verify-card { background: rgba(255,255,255,0.78); border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 18px; padding: 1rem 1rem 1.05rem; } .qr-verify-card-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; } .qr-verify-card-text { margin: 0; color: var(--qr-sheet-muted); font-size: 0.92rem; } .qr-verify-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid rgba(15, 23, 42, 0.08); } .qr-verify-row:first-of-type { border-top: none; padding-top: 0.2rem; } .qr-verify-label { font-size: 0.85rem; font-weight: 700; color: #0f172a; } .qr-verify-value { font-size: 0.95rem; color: #0f172a; text-align: right; } .qr-verify-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 800; border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(255,255,255,0.85); } .qr-verify-pill--ok { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.22); color: #166534; } .qr-verify-pill--bad { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.22); color: #991b1b; } .qr-verify-note { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--qr-sheet-muted); } /* Small phones */ @media (max-width: 380px) { .qr-verify-icon-wrap { width: 140px; height: 140px; } .qr-verify-icon { font-size: 4.4rem; } } /* ============================ Theme toggle (light/dark) ============================ */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; user-select: none; } .theme-toggle-label { font-size: 0.78rem; color: var(--color-text-muted); } .theme-toggle-btn { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-elevated); cursor: pointer; padding: 0; display: inline-flex; align-items: center; transition: background 0.15s ease, border-color 0.15s ease; } .theme-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--color-accent-soft); border-color: var(--color-accent); } .theme-toggle-knob { width: 20px; height: 20px; border-radius: 999px; background: var(--color-accent); transform: translateX(3px); transition: transform 0.15s ease; } body.theme-dark .theme-toggle-knob { transform: translateX(21px); } /* ============================ Responsive: desktop ============================ */ @media (min-width: 768px) { .app-header { padding-inline: 1.5rem; } .app-main { padding-inline: 1.5rem; padding-bottom: 4.75rem; } .workout-description { font-size: 0.86rem; } }