/* ───────────── Fuentes (autoalojadas, funcionan sin internet) ───────────── */ @font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2'); } /* ───────────── Tokens: todo el diseño vive aquí ───────────── */ :root { --bg: #FFFFFF; --surface: #F6F6F7; --ink: #141414; --ink-soft: #6E7076; --line: rgba(20, 20, 20, 0.08); --moon: #E6E7E9; --dot-empty: #DADBDE; --dot-task: #9A9DA3; --dot-exam: #141414; --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.8); --glass-hairline: rgba(20, 20, 20, 0.06); --subject-1: #C9D6EA; --subject-2: #CFE3D4; --subject-3: #EBDCC3; --subject-4: #EBCFD3; --subject-5: #DAD3EA; --subject-6: #F0D9C6; --subject-7: #CBE4E2; --subject-8: #DCDCD6; --radius-md: 20px; --radius-lg: 28px; --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: light; } /* Modo oscuro: definido, todavía sin activar (se activaría con la clase .dark en ) */ .dark { --bg: #0F0F10; --surface: #1A1A1C; --ink: #F2F2F3; --ink-soft: #9A9DA3; --line: rgba(255, 255, 255, 0.1); --moon: #1F2023; --dot-empty: #2A2B2E; --dot-task: #6E7076; --dot-exam: #F2F2F3; --glass-bg: rgba(30, 30, 32, 0.55); --glass-border: rgba(255, 255, 255, 0.12); --glass-hairline: rgba(255, 255, 255, 0.06); color-scheme: dark; } /* ───────────── Base ───────────── */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--bg); } body { color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.4; overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; } img { display: block; } /* El marco de la app: en el cel ocupa todo; en escritorio se centra a 430px */ .frame { position: relative; width: 100%; max-width: 430px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--bg); isolation: isolate; } @media (min-width: 500px) { body { background: #EEEEF0; } .frame { box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(20, 20, 20, 0.08); } } /* ───────────── La luna (fondo) ───────────── Solo se anima transform. Sin blur, sin filtros, sin degradados. */ .moon-pos { position: absolute; left: 0; top: 0; width: 110%; aspect-ratio: 1; z-index: 0; pointer-events: none; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) translate(-50%, -50%) scale(var(--ms, 1)); transition: transform 850ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .moon-pos.no-anim { transition: none; } .moon-par { width: 100%; height: 100%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } .moon { width: 100%; height: 100%; border-radius: 50%; background: var(--moon); } /* ───────────── Vidrio (solo navegación y elementos flotantes) ───────────── */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px var(--glass-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 30px rgba(20, 20, 20, 0.08); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, 0.94); } } /* ───────────── Pantalla con scroll ───────────── */ .screen { position: absolute; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 20px calc(132px + var(--safe-bottom)); outline: none; } .screen::-webkit-scrollbar { display: none; } .topbar { position: sticky; top: 0; z-index: 5; margin: 0 -20px; padding: calc(20px + var(--safe-top)) 20px 14px; border-radius: 0 0 28px 28px; transition: background-color 0.25s ease, box-shadow 0.25s ease; } .screen.is-scrolled .topbar { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 var(--glass-hairline), inset 0 -1px 0 var(--glass-border), 0 10px 30px rgba(20, 20, 20, 0.06); } .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .greeting { font: 700 32px/1.1 var(--font-display); letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-btn { flex: none; margin-right: -6px; border-radius: 12px; } .brand { height: 34px; width: auto; } .date { margin-top: 4px; color: var(--ink-soft); font-size: 16px; } .section { margin-top: 34px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; min-height: 40px; } .section-title { font: 500 22px/1.2 var(--font-display); letter-spacing: -0.01em; } .link { font-size: 15px; color: var(--ink); padding: 8px 0 8px 12px; } /* ───────────── Tira de bolitas ───────────── */ .strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 18px; } .day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 9px; } .day > * { position: relative; z-index: 1; } .day::before { content: ''; position: absolute; inset: 0 2px; border-radius: 24px; z-index: 0; opacity: 0; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px var(--glass-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(20, 20, 20, 0.06); transition: opacity 0.2s ease; } .day.is-selected::before { opacity: 1; } .day-l { font-size: 12px; color: var(--ink-soft); } .day-n { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .day.is-selected .day-n { color: var(--ink); font-weight: 700; } .dot { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--dot-empty); transition: background-color 0.2s ease; } .dot--task { background: var(--dot-task); } .dot--exam { background: var(--dot-exam); } .day.is-today .dot { outline: 1.5px solid var(--ink); outline-offset: 3px; } .legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend .dot { width: 8px; height: 8px; } /* ───────────── Tarjetas ───────────── */ .card { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; } .next { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; width: 100%; margin-top: 8px; text-align: left; } .big { font: 700 56px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .next-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .next-note { font-size: 14px; color: var(--ink-soft); } .next-room { font-size: 14px; color: var(--ink-soft); } .chip { display: inline-flex; align-items: center; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: var(--c, var(--subject-8)); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip--sm { padding: 5px 12px; font-size: 13px; } .chip--fill { flex: 1; min-width: 0; } /* ───────────── Filas ───────────── */ .rows { border-top: 1px solid var(--line); } .row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); } .row--class .time { width: 52px; flex: none; font: 700 17px/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .row--class .time small { display: block; margin-top: 2px; font: 400 12px var(--font-text); color: var(--ink-soft); } .room { flex: none; font-size: 13px; color: var(--ink-soft); min-width: 44px; text-align: right; } .group-name { margin: 18px 0 2px; font-size: 14px; color: var(--ink-soft); } .group-name.is-today { color: var(--ink); font-weight: 700; } .group-empty { padding: 10px 0; font-size: 14px; color: var(--ink-soft); } .check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink-soft); display: grid; place-items: center; color: #fff; transition: background-color 0.2s ease, border-color 0.2s ease; } .check[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); } .row--task { align-items: flex-start; } .row--task .check { margin-top: 2px; } .task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; } .task-title { font-size: 16px; font-weight: 500; } .task-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 3px; font-size: 13px; color: var(--ink-soft); } .row--task.is-done .task-title { color: var(--ink-soft); text-decoration: line-through; } .row--task.is-done .chip { opacity: 0.6; } .tag { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; } .empty { padding: 22px 0; color: var(--ink-soft); font-size: 15px; } .seg { display: inline-flex; padding: 3px; border-radius: 999px; } .seg button { padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: background-color 0.2s ease, color 0.2s ease; } .seg button[aria-pressed='true'] { background: rgba(255, 255, 255, 0.95); color: var(--ink); box-shadow: 0 1px 6px rgba(20, 20, 20, 0.08); } .exam { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; } .exam .big { font-size: 48px; } .exam .unit { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); } .exam-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .exam-title { font-size: 16px; font-weight: 500; } .exam-date { font-size: 13px; color: var(--ink-soft); } /* ───────────── Materia ───────────── */ .back { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 8px 10px 8px 4px; font-size: 15px; color: var(--ink); } .hero { margin-top: 10px; padding: 26px 22px; border-radius: var(--radius-lg); background: var(--c, var(--subject-8)); } .hero h1 { font: 700 30px/1.1 var(--font-display); letter-spacing: -0.02em; } .hero p { margin-top: 8px; font-size: 15px; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .kv span:last-child { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ───────────── Pantallas pendientes ───────────── */ .ph-title { font: 700 32px/1.1 var(--font-display); letter-spacing: -0.02em; } /* ───────────── Navegación flotante ───────────── */ .dock { position: absolute; left: 16px; right: 16px; bottom: calc(16px + var(--safe-bottom)); z-index: 10; display: flex; align-items: center; gap: 10px; } .tabs { flex: 1; display: flex; gap: 2px; height: 66px; padding: 5px; border-radius: 999px; } .tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--ink-soft); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .tab[aria-current='page'] { color: var(--ink); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--glass-hairline), inset 0 1px 0 #fff, 0 2px 10px rgba(20, 20, 20, 0.07); } .fab { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); } .frame:not([data-mode='app']) .dock { display: none; } /* ───────────── Hoja inferior (+) ───────────── */ .sheet-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(20, 20, 20, 0.16); opacity: 0; transition: opacity 0.25s ease; } .sheet { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 21; padding: 20px 18px 16px; border-radius: 32px; opacity: 0; transform: translateY(28px); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; } .is-open .sheet-backdrop { opacity: 1; } .is-open .sheet { opacity: 1; transform: none; } .sheet-title { font: 500 20px var(--font-display); margin: 0 4px 12px; } .sheet-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; margin-top: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.85); font-size: 16px; font-weight: 500; box-shadow: 0 0 0 1px var(--glass-hairline); } /* ───────────── Pantalla de carga ───────────── */ .splash { position: absolute; inset: 0; z-index: 40; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, #ECEDEF 100%); transition: opacity 0.4s ease; } .splash.is-leaving { opacity: 0; pointer-events: none; } .splash-moon { position: absolute; left: 78%; top: 36%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: var(--moon); transform: translate(-50%, -50%); } .splash h1 { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); font: 700 46px/1.05 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; } .spinner { position: absolute; left: 50%; bottom: calc(56px + var(--safe-bottom)); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 2px solid var(--dot-empty); border-top-color: var(--ink); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ───────────── Bienvenida ───────────── */ .onb { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); } .progress { display: flex; gap: 8px; } .progress i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-empty); transition: background-color 0.2s ease; } .progress i.on { background: var(--ink); } .onb-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; animation: step-in 0.28s ease both; } .onb-logo { width: 56px; height: 56px; margin: 0 0 22px -6px; } .onb h2 { font: 700 34px/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: 28px; } .field { width: 100%; padding: 14px 0; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); font: 500 24px var(--font-text); outline: none; border-radius: 0; transition: border-color 0.2s ease; } .field::placeholder { color: var(--ink-soft); font-weight: 400; } .field:focus { border-bottom-color: var(--ink); } .opts { display: flex; flex-direction: column; gap: 10px; } .opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); font-size: 17px; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .opt[aria-checked='true'] { background: var(--ink); color: #fff; } .onb-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; } .btn { width: 100%; height: 56px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 500; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; } .btn:disabled { background: var(--dot-empty); color: var(--ink-soft); cursor: default; } .btn--ghost { background: var(--surface); color: var(--ink); } .btn--inline { width: auto; height: 46px; padding: 0 22px; margin-top: 18px; font-size: 16px; } .skip { padding: 14px; font-size: 15px; color: var(--ink-soft); } @keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ───────────── Formularios ───────────── */ .sheet--form.glass { background: rgba(255, 255, 255, 0.95); } .sheet--form { display: flex; flex-direction: column; max-height: calc(100% - 24px - var(--safe-top)); padding: 0; } .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px 22px; } .sheet-head .sheet-title { margin: 0; font-size: 22px; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); } .sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 12px; } .sheet-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 22px 20px; } .fld { margin-top: 18px; } .fld.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lbl { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); } .lbl--tight { margin-bottom: 0; } .input { width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--surface); color: var(--ink); font: 400 17px var(--font-text); outline: none; -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; transition: border-color 0.2s ease, background-color 0.2s ease; } .input:focus { border-color: var(--ink); background: #fff; } .input.has-err { border-color: var(--ink); } textarea.input { resize: none; min-height: 88px; line-height: 1.4; } select.input { padding-right: 42px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; } .err { margin-top: 6px; font-size: 13px; font-weight: 500; } .warn { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); font-size: 13px; } .hint-line { margin-top: 8px; font-size: 13px; color: var(--ink-soft); } .inline-link { padding: 0; text-decoration: underline; color: var(--ink); font-size: inherit; } .link-btn { margin-top: 10px; padding: 10px 0; font-size: 15px; font-weight: 500; } .confirm-text { margin-bottom: 4px; font-size: 15px; } .seg--full { display: flex; width: 100%; } .seg--full button { flex: 1; } .dchips { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; } .dchip { flex: 1; max-width: 46px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--dot-empty); color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .dchip[aria-pressed='true'] { background: var(--ink); color: #fff; } .dchip.is-today { outline: 1.5px solid var(--ink); outline-offset: 2px; } .dchips--wide { margin: 14px 0 6px; } .trow { position: relative; margin-top: 10px; padding: 14px; border-radius: 20px; background: var(--surface); } .trow.has-err { box-shadow: inset 0 0 0 1.5px var(--ink); } .trow-head { display: flex; align-items: center; justify-content: space-between; min-height: 26px; } .trow .dchip { background: #fff; } .trow .dchip[aria-pressed='true'] { background: var(--ink); } .trow .input { background: #fff; } .tgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; } .tgrid > div { min-width: 0; } .rm { width: 30px; height: 30px; margin: -4px -4px -4px 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); } .swatches { display: flex; flex-wrap: wrap; gap: 12px; } .sw { width: 38px; height: 38px; border-radius: 50%; background: var(--c); } .sw[aria-pressed='true'] { outline: 2px solid var(--ink); outline-offset: 3px; } /* ───────────── Horario y Tareas ───────────── */ .hsec { margin: 8px 0 0; } .fchips { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; } .fchips::-webkit-scrollbar { display: none; } .fchip { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .fchip[aria-pressed='true'] { background: var(--ink); color: #fff; } .rows--top { margin-top: 18px; } .empty-cta { margin-top: 30px; padding: 26px 22px; border-radius: var(--radius-lg); background: var(--surface); } .empty-cta p { font-size: 17px; font-weight: 500; } .empty-cta .hint { margin-top: 8px; font: 400 14px/1.45 var(--font-text); color: var(--ink-soft); } .swatch { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c); } .mat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mat-name { font-size: 16px; font-weight: 500; } .mat-sub { font-size: 13px; color: var(--ink-soft); } .row--materia svg { flex: none; color: var(--ink-soft); } .topbar-row .link { white-space: nowrap; } .onb-sub { margin: -12px 0 0; max-width: 32ch; font-size: 16px; color: var(--ink-soft); } /* ───────────── Recordatorios ───────────── */ .rem-intro { margin: 6px 0 12px; color: var(--ink-soft); font-size: 15px; } .row--rem { align-items: flex-start; } .rem-when { flex: none; width: 92px; padding-top: 2px; font: 700 15px/1.2 var(--font-display); } .rem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .row--rem .tag { flex: none; margin-top: 2px; } /* ───────────── Calendario de puntos ───────────── */ .cal-hero { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 6px; } .cal-num { font: 700 104px/0.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .cal-wd { padding-bottom: 8px; font-size: 20px; color: var(--ink-soft); } .cal-bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 20px; } .cal-month { font: 700 22px var(--font-display); letter-spacing: -0.01em; } .cal-month span { font-weight: 500; color: var(--ink-soft); } .cal-nav { display: flex; align-items: center; gap: 2px; } .cal-nav .link { padding: 8px 10px; } .icon-btn--ghost { width: 40px; height: 40px; background: transparent; } .cal-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; text-align: center; font-size: 12px; color: var(--ink-soft); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 0; touch-action: pan-y; } .cday-gap { display: block; } .cday { position: relative; justify-self: center; width: 40px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 500 14px var(--font-text); font-variant-numeric: tabular-nums; transition: background-color 0.2s ease; } .cday--empty { background: var(--dot-empty); color: var(--ink-soft); } .cday--task { background: var(--dot-task); color: var(--ink); } .cday--exam { background: var(--dot-exam); color: #fff; } .cday.is-today { outline: 1.5px solid var(--ink); outline-offset: 3px; } .cday.is-selected { font-weight: 700; } .cday.is-selected::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: -1; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px var(--glass-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(20, 20, 20, 0.07); } .agenda-add { display: flex; gap: 8px; margin: 4px 0 6px; } .pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 500; } .agenda.anim { animation: panel-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .moon-pos { transition: none; } }