/* ============================================================ PaceMaker -- theme-light.css Modo claro: sobreescribe las variables de color de main.css Se activa anadiendo la clase 'theme-light' al ============================================================ */ body.theme-light { --bg: #f0f4f8; --bg2: #e2e8f0; --bg3: #dde3ed; --card: #ffffff; --card-hover: #f7f9fc; --border: rgba(0,0,0,0.09); --border2: rgba(0,150,200,0.35); --cyan: #0077aa; --cyan-dim: rgba(0,119,170,0.1); --cyan-glow: rgba(0,119,170,0.3); --amber: #b86e00; --amber-dim: rgba(184,110,0,0.1); --green: #1a7a4a; --red: #c0392b; --text: #1a202c; --text-muted: #4a5568; --text-dim: #a0aec0; --white: #1a202c; --shadow: 0 4px 24px rgba(0,0,0,0.1); --shadow-lg: 0 8px 48px rgba(0,0,0,0.15); } /* -- Ajustes especificos del modo claro ---------------------- */ /* Navbar: fondo blanco con sombra suave */ body.theme-light .navbar { background: rgba(255,255,255,0.95); border-bottom-color: rgba(0,0,0,0.08); box-shadow: 0 1px 12px rgba(0,0,0,0.06); } /* Brand: el nombre Pace en oscuro */ body.theme-light .navbar-brand { color: #1a202c; } body.theme-light .navbar-brand .accent { color: var(--cyan); } /* Brand icon */ body.theme-light .brand-icon { background: var(--cyan); color: #fff; } /* Nav links */ body.theme-light .navbar-nav .nav-link { color: #4a5568; } body.theme-light .navbar-nav .nav-link:hover, body.theme-light .navbar-nav .nav-link.active { background: var(--bg3); color: #1a202c; } /* Lang buttons */ body.theme-light .lang-btn { border-color: rgba(0,0,0,0.15); color: #4a5568; } body.theme-light .lang-btn:hover, body.theme-light .lang-btn.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); } /* User avatar */ body.theme-light .user-avatar { background: var(--cyan-dim); border-color: var(--border2); color: var(--cyan); } /* Hero */ body.theme-light .hero { background: linear-gradient(135deg, #e8eef7 0%, #dde6f2 50%, #d0dcea 100%); } body.theme-light .hero::before { background: radial-gradient(ellipse at 70% 50%, rgba(0,119,170,0.07) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(184,110,0,0.05) 0%, transparent 50%); } body.theme-light .hero-title { color: #1a202c; } body.theme-light .hero-eyebrow { color: var(--cyan); } body.theme-light .hero-desc { color: #4a5568; } body.theme-light .stat-num { color: #1a202c; } body.theme-light .stat-label { color: #4a5568; } /* Hero device mockup */ body.theme-light .hero-device { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.12); } body.theme-light .device-header { color: #718096; border-bottom-color: rgba(0,0,0,0.08); } body.theme-light .device-pace-row { border-bottom-color: rgba(0,0,0,0.06); } body.theme-light .dp-km { color: #718096; } body.theme-light .dp-pace { color: #1a202c; } /* Section titles */ body.theme-light .section-title { color: #1a202c; } /* Search input */ body.theme-light .search-input { background: #fff; border-color: rgba(0,0,0,0.12); color: #1a202c; } body.theme-light .search-input:focus { border-color: var(--cyan); } body.theme-light .search-input::placeholder { color: #a0aec0; } /* Filter buttons */ body.theme-light .filter-btn { background: #fff; border-color: rgba(0,0,0,0.1); color: #4a5568; } body.theme-light .filter-btn:hover { background: var(--bg3); color: #1a202c; } body.theme-light .filter-btn.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); } /* Race cards */ body.theme-light .race-card { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } body.theme-light .race-card:hover { border-color: var(--border2); box-shadow: 0 8px 28px rgba(0,119,170,0.12); background: #fff; } body.theme-light .race-card-image { background: var(--bg3); border-bottom-color: rgba(0,0,0,0.06); } body.theme-light .race-dist-badge { background: #fff; border-color: var(--border2); color: var(--cyan); } body.theme-light .race-name { color: #1a202c; } body.theme-light .race-meta { color: #718096; } body.theme-light .race-km { color: var(--cyan); } body.theme-light .card-footer-btn { border-color: var(--border2); color: var(--cyan); } body.theme-light .card-footer-btn:hover { background: var(--cyan-dim); } /* Calc panel */ body.theme-light .calc-panel { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .calc-panel-title { color: #1a202c; } body.theme-light .calc-back { color: #718096; } body.theme-light .calc-title { color: #1a202c; } /* Base pace card */ body.theme-light .base-pace-card { background: var(--bg3); border-color: var(--border2); } body.theme-light .base-pace-label { color: #718096; } body.theme-light .base-pace-value { color: var(--cyan); } body.theme-light .base-pace-unit { color: #718096; } /* Elevation boxes */ body.theme-light .elev-box { background: var(--bg3); } body.theme-light .elev-box-val.pos { color: var(--red); } body.theme-light .elev-box-val.neg { color: var(--green); } body.theme-light .elev-box-label { color: #718096; } /* Profile chart */ body.theme-light .profile-chart-wrap { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .profile-chart-title { color: #718096; } /* Results table */ body.theme-light .km-table-wrap { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .km-table thead { background: var(--bg3); } body.theme-light .km-table th { color: #718096; } body.theme-light .km-table td { border-top-color: rgba(0,0,0,0.06); } body.theme-light .km-table tr:hover td { background: var(--bg3); } body.theme-light .km-num { color: #718096; } body.theme-light .km-pace { color: #1a202c; } body.theme-light .km-alt { color: #718096; } body.theme-light .pace-bar-bg { background: rgba(0,0,0,0.08); } /* Export bar */ body.theme-light #exportBar > div { background: #fff; border-color: rgba(0,0,0,0.08); } /* Buttons */ body.theme-light .btn-primary { background: var(--cyan); color: #fff; } body.theme-light .btn-primary:hover { background: #0088cc; } body.theme-light .btn-secondary { background: #fff; color: #1a202c; border-color: rgba(0,0,0,0.15); } body.theme-light .btn-secondary:hover { background: var(--bg3); } body.theme-light .btn-ghost { border-color: var(--border2); color: var(--cyan); } body.theme-light .btn-danger { background: rgba(192,57,43,0.08); color: var(--red); border-color: rgba(192,57,43,0.25); } /* Forms */ body.theme-light .form-control { background: #fff; border-color: rgba(0,0,0,0.15); color: #1a202c; } body.theme-light .form-control:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-dim); } body.theme-light .form-label { color: #4a5568; } /* Modal */ body.theme-light .modal { background: #fff; border-color: rgba(0,0,0,0.1); } body.theme-light .modal-title { color: #1a202c; } body.theme-light .modal-tab { color: #718096; } body.theme-light .modal-tab.active { color: var(--cyan); } body.theme-light .modal-close { color: #718096; } /* Race detail modal content */ body.theme-light #raceDetailContent > div:first-child { background: var(--bg3); } /* Footer */ body.theme-light footer { background: var(--bg2); border-top-color: rgba(0,0,0,0.08); } /* Toast */ body.theme-light .toast { background: #fff; border-color: rgba(0,0,0,0.08); color: #1a202c; box-shadow: 0 4px 20px rgba(0,0,0,0.12); } /* Scrollbar */ body.theme-light ::-webkit-scrollbar-track { background: var(--bg2); } body.theme-light ::-webkit-scrollbar-thumb { background: #c5ccd8; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 5px; transition: var(--transition); white-space: nowrap; } .theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); } body.theme-light .theme-toggle { border-color: rgba(0,0,0,0.15); color: #4a5568; } body.theme-light .theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); } /* ============================================================ Overrides para profile.html en modo claro ============================================================ */ body.theme-light .profile-card { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .profile-name { color: #1a202c; } body.theme-light .profile-email { color: #718096; } body.theme-light .profile-since { color: #a0aec0; } body.theme-light .stat-mini { border-top-color: rgba(0,0,0,0.07); } body.theme-light .stat-mini-val { color: var(--cyan); } body.theme-light .stat-mini-lbl { color: #718096; } body.theme-light .profile-nav a { color: #718096; } body.theme-light .profile-nav a:hover { background: var(--bg3); color: #1a202c; } body.theme-light .profile-nav a.active { background: var(--cyan-dim); color: var(--cyan); } body.theme-light .avatar-big { background: var(--cyan-dim); border-color: var(--border2); color: var(--cyan); } body.theme-light .section-title { color: #1a202c; border-bottom-color: rgba(0,0,0,0.08); } body.theme-light .content-card { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .card-subtitle { color: #718096; } body.theme-light .hist-table thead { background: var(--bg3); } body.theme-light .hist-table th { color: #718096; } body.theme-light .hist-table td { border-top-color: rgba(0,0,0,0.06); } body.theme-light .hist-table tr:hover td { background: var(--bg3); } body.theme-light .pace-badge { color: var(--cyan); } body.theme-light .record-card { background: var(--bg3); border-color: rgba(0,0,0,0.08); } body.theme-light .record-time { color: #1a202c; } body.theme-light .record-dist { color: #718096; } body.theme-light .record-date { color: #a0aec0; } body.theme-light .record-delete { color: #a0aec0; } body.theme-light .record-delete:hover { color: var(--red); } body.theme-light .empty-state { color: #718096; } body.theme-light .page-btn { background: #fff; border-color: rgba(0,0,0,0.12); color: #718096; } body.theme-light .page-btn:hover, body.theme-light .page-btn.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); } /* ============================================================ Overrides para admin.html en modo claro ============================================================ */ body.theme-light .login-box { background: #fff; border-color: rgba(0,0,0,0.1); } body.theme-light .login-brand h1 { color: #1a202c; } body.theme-light .login-brand p { color: #718096; } body.theme-light .sidebar { background: #f7f9fc; border-right-color: rgba(0,0,0,0.08); } body.theme-light .sidebar-brand { border-bottom-color: rgba(0,0,0,0.08); } body.theme-light .sidebar-brand .name { color: #1a202c; } body.theme-light .sidebar-nav a { color: #718096; } body.theme-light .sidebar-nav a:hover, body.theme-light .sidebar-nav a.active { background: var(--cyan-dim); color: var(--cyan); } body.theme-light .sidebar-badge { background: rgba(184,110,0,0.1); color: var(--amber); } body.theme-light .sidebar-footer { border-top-color: rgba(0,0,0,0.08); } body.theme-light .admin-user-name { color: #1a202c; } body.theme-light .admin-user-role { color: var(--cyan); } body.theme-light .admin-avatar { background: var(--cyan-dim); border-color: var(--border2); color: var(--cyan); } body.theme-light .main-content { background: var(--bg); } body.theme-light .topbar { background: #f7f9fc; border-bottom-color: rgba(0,0,0,0.08); } body.theme-light .topbar-title { color: #1a202c; } body.theme-light .stat-card { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .stat-card-val { color: #1a202c; } body.theme-light .stat-card-val.cyan { color: var(--cyan); } body.theme-light .stat-card-val.green { color: var(--green); } body.theme-light .stat-card-val.amber { color: var(--amber); } body.theme-light .stat-card-label { color: #718096; } body.theme-light .chart-card, body.theme-light .table-card { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .card-title { color: #1a202c; } body.theme-light .top-race-row { border-bottom-color: rgba(0,0,0,0.06); } body.theme-light .top-race-name { color: #1a202c; } body.theme-light .top-race-bar { background: rgba(0,0,0,0.08); } body.theme-light .top-race-num { color: var(--cyan); } body.theme-light .data-table-wrap { background: #fff; border-color: rgba(0,0,0,0.08); } body.theme-light .data-table-header { border-bottom-color: rgba(0,0,0,0.06); } body.theme-light .data-table th { background: var(--bg3); color: #718096; } body.theme-light .data-table td { border-top-color: rgba(0,0,0,0.06); } body.theme-light .data-table tr:hover td { background: var(--bg3); } body.theme-light .data-table .td-name { color: #1a202c; } body.theme-light .data-table .td-id { color: #a0aec0; } body.theme-light .drawer { background: #fff; border-left-color: rgba(0,0,0,0.1); } body.theme-light .drawer-header { border-bottom-color: rgba(0,0,0,0.08); } body.theme-light .drawer-title { color: #1a202c; } body.theme-light .drawer-footer { border-top-color: rgba(0,0,0,0.08); } body.theme-light .dropzone { background: var(--bg3); border-color: rgba(0,0,0,0.15); } body.theme-light .dropzone:hover { border-color: var(--cyan); background: var(--cyan-dim); } body.theme-light .oro-table-wrap { border-color: rgba(0,0,0,0.1); } body.theme-light .oro-table th { background: var(--bg3); color: #718096; } body.theme-light .oro-table td { border-top-color: rgba(0,0,0,0.06); } body.theme-light .oro-table td input { color: #1a202c; } body.theme-light .confirm-box { background: #fff; border-color: rgba(0,0,0,0.1); } body.theme-light .confirm-title { color: #1a202c; } body.theme-light .confirm-desc { color: #718096; }