/* ──────────────────────────────────────────────────────────── PALETA & TOKENS — editar aqui pra trocar tudo ──────────────────────────────────────────────────────────── */ :root { /* base neutra */ --bg: #fafaf7; --surface: #ffffff; --surface-2: #f4f3ee; --border: #ececec; --border-strong:#1a1a1a; --text: #1a1a1a; --text-2: #6b6b6b; --text-3: #9a9a9a; --text-disabled:#cccccc; /* categorias */ --cat-viagens: #3b6ea5; --cat-trabalho: #b86432; --cat-lazer: #5a8a5e; /* accent / interativo */ --primary: #1a1a1a; --primary-hover: #3a3a3a; --on-primary: #ffffff; /* Azul vivo (FAB, mic, sparkles) — mais saturado que a categoria Viagens */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.08); /* alerta (pendências) */ --alert: #a64545; --alert-soft: #c2735e; /* seleção */ --selected-bg: #f0f0ec; /* raios (limites duros) */ --r-card: 12px; --r-btn: 8px; --r-input: 6px; --r-tag: 6px; /* tipografia */ --f-title: "Montserrat", system-ui, sans-serif; --f-body: "Inter", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; /* espaçamento */ --sb-w: 310px; } /* ──────────────────────────────────────────────────────────── MODO ESCURO (Sprint 3 #5) — JS resolve auto→light/dark e seta data-theme efetivo no . Aqui só o tema escuro. ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #0e0e10; --surface: #1a1a1d; --surface-2: #232328; --border: #2c2c32; --border-strong: #f0f0ee; --text: #f0f0ee; --text-2: #a0a0a0; --text-3: #707070; --text-disabled: #4a4a50; --primary: #f0f0ee; --primary-hover: #d8d8d4; --on-primary: #0e0e10; --accent: #5b8cff; --accent-hover: #7aa2ff; --accent-soft: rgba(91, 140, 255, 0.16); --selected-bg: #2c2c32; --cat-viagens: #5b8fc9; --cat-trabalho: #d08453; --cat-lazer: #7bb07f; } /* Superfícies com cor fixa que precisam adaptar ao escuro */ [data-theme="dark"] .modal-review, [data-theme="dark"] .voice-preview { background: var(--surface); } [data-theme="dark"] .delete-confirm { background: #2b2519; border-top-color: #4a3f22; } /* ──────────────────────────────────────────────────────────── RESET ENXUTO ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--f-body); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4 { margin: 0; font-family: var(--f-title); font-weight: 700; letter-spacing: -0.01em; } .eyebrow { font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* ícones lucide herdam tamanho */ [data-lucide] { width: 16px; height: 16px; stroke-width: 1.75; } /* ──────────────────────────────────────────────────────────── BOTÕES ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-body); font-weight: 500; font-size: 13px; padding: 8px 14px; border-radius: var(--r-btn); transition: background 150ms ease, color 150ms ease, border-color 150ms ease; white-space: nowrap; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--text); } .btn-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-btn); color: var(--text-2); transition: background 150ms ease, color 150ms ease; } .btn-icon:hover { background: var(--surface-2); color: var(--text); } .btn-icon [data-lucide] { width: 18px; height: 18px; } /* ──────────────────────────────────────────────────────────── LAYOUT — MOBILE (default) ──────────────────────────────────────────────────────────── */ .app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .sidebar { display: none; } .topbar { display: flex; } .mobile-header { display: block; } /* Wrapper que mantém topbar + weather strip 100% fixos durante scroll */ .mobile-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } /* Compensar o conteúdo abaixo (espaço pro header fixo) */ .app { padding-top: var(--mobile-header-h, 96px); } .topbar { position: relative; /* dentro do .mobile-header fixo */ align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 0; /* já tem na .mobile-header */ } .topbar .brand { display: flex; align-items: center; gap: 10px; } .topbar .brand .mark { width: 36px; height: 36px; background: var(--primary); color: var(--on-primary); font-family: var(--f-title); font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.02em; border-radius: 6px; position: relative; } /* Bolinha azul no canto (mesma identidade do app icon) */ .topbar .brand .mark::after, .sidebar .brand .mark::after { content: ""; position: absolute; bottom: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--cat-viagens); } .topbar .brand-text { font-family: var(--f-title); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; } .topbar .actions { display: flex; gap: 4px; } .main { padding: 16px max(16px, env(safe-area-inset-right)) max(96px, calc(96px + env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 20px; } /* ── Card de hoje ── */ .today-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 18px 8px; } .today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .today-head .label { margin-bottom: 4px; } .today-date { font-family: var(--f-title); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -0.02em; } .today-date .day-num { font-size: 28px; } .today-meta { margin-top: 6px; color: var(--text-2); font-size: 13px; } /* lista de atividades dentro do card de hoje */ .act-list { display: flex; flex-direction: column; } .act { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); position: relative; } .act:first-child { border-top: 0; } .check { width: 18px; height: 18px; border: 1.5px solid var(--text-3); border-radius: 50%; /* exceção permitida — check */ background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background 150ms ease, border-color 150ms ease; cursor: pointer; flex-shrink: 0; } .check [data-lucide] { width: 11px; height: 11px; color: transparent; stroke-width: 2.5; } .check:hover { border-color: var(--text); } .act.done .check { background: var(--text); border-color: var(--text); } .act.done .check [data-lucide] { color: var(--on-primary); } .act.done .act-title, .act.done .act-time { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); } .act-time { font-family: var(--f-mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .act-body { display: flex; align-items: center; gap: 10px; min-width: 0; } .act-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-cat { margin-left: auto; flex-shrink: 0; width: 3px; height: 16px; border-radius: 0; } .act-cat.viagens { background: var(--cat-viagens); } .act-cat.trabalho { background: var(--cat-trabalho); } .act-cat.lazer { background: var(--cat-lazer); } /* ── Esta semana (faixa horizontal de mini-cards) ── */ .this-week { display: flex; flex-direction: column; gap: 10px; } .this-week-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; } .tw-grid { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px; margin: 0 -16px; scrollbar-width: none; } .tw-grid::-webkit-scrollbar { display: none; } .tw-card { flex: 0 0 168px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 132px; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .tw-card:hover { border-color: var(--text-2); } .tw-card.today { border: 1.5px solid var(--text); background: var(--surface); } .tw-card.past .tw-num, .tw-card.past .tw-event-title, .tw-card.past .tw-event-time { color: var(--text-2); } .tw-card.past { background: transparent; } .tw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .tw-dow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; } .tw-num { font-family: var(--f-title); font-weight: 700; font-size: 18px; line-height: 1; color: var(--text); letter-spacing: -0.02em; } .tw-card.today .tw-num { font-weight: 800; } .tw-events { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } .tw-event { display: grid; grid-template-columns: 3px auto 1fr; align-items: center; gap: 6px; font-size: 11px; line-height: 1.3; min-width: 0; } .tw-event .tw-cat { width: 3px; height: 11px; align-self: center; } .tw-event .tw-cat.viagens { background: var(--cat-viagens); } .tw-event .tw-cat.trabalho { background: var(--cat-trabalho); } .tw-event .tw-cat.lazer { background: var(--cat-lazer); } .tw-event-time { font-family: var(--f-mono); font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; } .tw-event-title { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-more { font-size: 10px; color: var(--text-3); padding-left: 9px; margin-top: 1px; } .tw-empty { font-size: 11px; color: var(--text-3); margin-top: 4px; } /* expansão inline do dia (mobile) */ .day-expand { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; display: none; } .day-expand.open { display: block; } .day-expand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .day-expand-date { font-family: var(--f-title); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .day-expand-meta { color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .day-expand .act { padding: 8px 0; } .day-expand-empty { color: var(--text-3); font-size: 13px; padding: 6px 0; } .day-expand-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } /* ── Grade do mês ── */ .cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cal-head .title { font-family: var(--f-title); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .cal-head .title .year { color: var(--text-3); font-weight: 600; margin-left: 4px; } .cal-head .nav { display: flex; gap: 2px; } .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); } .cal-dow div { padding: 8px 0; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(56px, auto); } .cal-cell { position: relative; padding: 6px 6px 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 120ms ease; display: flex; flex-direction: column; gap: 3px; min-height: 56px; } .cal-cell:nth-child(7n) { border-right: 0; } .cal-cell:hover { background: var(--surface-2); } .cal-cell.muted .cal-num { color: var(--text-disabled); } .cal-cell.muted { cursor: default; } .cal-cell.muted:hover { background: transparent; } .cal-cell.selected { background: var(--selected-bg); } .cal-num { font-family: var(--f-title); font-weight: 600; font-size: 13px; color: var(--text); line-height: 1; padding: 2px 0; } .cal-cell.today .cal-num { font-weight: 800; align-self: flex-start; border: 1.5px solid var(--text); border-radius: 4px; padding: 2px 5px; } .ev-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .ev-bar { height: 3px; border-radius: 0; } .ev-bar.viagens { background: var(--cat-viagens); } .ev-bar.trabalho { background: var(--cat-trabalho); } .ev-bar.lazer { background: var(--cat-lazer); } /* texto do evento (só aparece em desktop) */ .ev-row { display: none; } /* FAB mobile — azul vivo */ .fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, calc(22px + env(safe-area-inset-bottom))); width: 56px; height: 56px; background: var(--accent); color: #fff; border-radius: var(--r-btn); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(0,0,0,0.08); z-index: 20; transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .fab:hover { background: var(--accent-hover); } .fab:active { transform: scale(0.96); } .fab [data-lucide] { width: 24px; height: 24px; stroke-width: 2.25; } /* 4 ícones do topbar com destaque — fundo sutil + ícone maior */ .topbar .actions .btn-icon, .main-head .actions > .btn-icon { width: 36px; height: 36px; background: var(--surface-2); border-radius: var(--r-btn); transition: background 150ms ease, transform 120ms ease, color 150ms ease; } .topbar .actions .btn-icon:hover, .main-head .actions > .btn-icon:hover { background: var(--border); transform: translateY(-1px); } .topbar .actions .btn-icon:active, .main-head .actions > .btn-icon:active { transform: translateY(0); } .topbar .actions .btn-icon [data-lucide], .main-head .actions > .btn-icon [data-lucide] { width: 20px; height: 20px; stroke-width: 1.9; } /* Cores específicas dos ícones (mantém destaque por cor) */ [data-action='voice-add'] [data-lucide], [data-action='resumo'] [data-lucide] { color: var(--accent); } [data-action='voice-add']:hover [data-lucide], [data-action='resumo']:hover [data-lucide] { color: var(--accent-hover); } /* Microfone IA: dá ainda mais destaque com fundo azul soft */ [data-action='voice-add'] { background: var(--accent-soft) !important; } [data-action='voice-add']:hover { background: rgba(37, 99, 235, 0.16) !important; } /* Ícone de remédio — pílula com bordas vermelhas (Lucide pill é stroke-only) */ [data-action='meds-open'] [data-lucide] { color: #d44a4a; } [data-action='meds-open']:hover [data-lucide] { color: #b73a3a; } /* Settings — cor neutra mas com destaque do quadrado */ [data-action='settings'] [data-lucide] { color: var(--text); } /* ──────────────────────────────────────────────────────────── DESKTOP (≥ 768px) ──────────────────────────────────────────────────────────── */ @media (min-width: 768px) { .app { flex-direction: row; min-height: 100vh; } .topbar { display: none; } .mobile-header { display: none; } .fab { display: none; } /* Reseta o padding-top que era pro header mobile fixo */ .app { padding-top: 0; } .sidebar { display: flex; flex-direction: column; width: var(--sb-w); flex-shrink: 0; border-right: 1px solid var(--border); padding: 22px 18px; gap: 22px; background: var(--bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; } .sidebar .brand .mark { width: 38px; height: 38px; background: var(--primary); color: var(--on-primary); font-family: var(--f-title); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; position: relative; } .sidebar .brand-text { font-family: var(--f-title); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group .eyebrow { margin-bottom: 8px; padding: 0 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-btn); color: var(--text-2); font-size: 13px; font-weight: 500; transition: background 120ms ease, color 120ms ease; cursor: pointer; width: 100%; justify-content: flex-start; text-align: left; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--surface-2); color: var(--text); } .nav-item [data-lucide] { color: var(--text-3); } .nav-item.active [data-lucide] { color: var(--text); } .nav-count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .cat-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-btn); color: var(--text); font-size: 13px; transition: background 120ms ease; cursor: pointer; width: 100%; justify-content: flex-start; text-align: left; } .cat-item:hover { background: var(--surface-2); } .cat-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .cat-dot.viagens { background: var(--cat-viagens); } .cat-dot.trabalho { background: var(--cat-trabalho); } .cat-dot.lazer { background: var(--cat-lazer); } .cat-count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .cat-item.off .cat-dot { background: var(--text-disabled); } .cat-item.off .cat-name { color: var(--text-3); } /* mini calendário */ .mini-cal { display: flex; flex-direction: column; gap: 8px; } .mini-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } .mini-cal-title { font-family: var(--f-title); font-weight: 700; font-size: 12px; letter-spacing: -0.01em; } .mini-cal-nav { display: flex; gap: 2px; } .mini-cal-nav .btn-icon { width: 22px; height: 22px; } .mini-cal-nav .btn-icon [data-lucide] { width: 13px; height: 13px; } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .mini-grid .mdow { font-size: 9px; font-weight: 600; color: var(--text-3); text-align: center; padding: 3px 0 2px; } .mini-grid .mcell { font-family: var(--f-mono); font-size: 10px; text-align: center; padding: 4px 0; color: var(--text); cursor: pointer; border-radius: 3px; position: relative; font-variant-numeric: tabular-nums; } .mini-grid .mcell:hover { background: var(--surface-2); } .mini-grid .mcell.muted { color: var(--text-disabled); } .mini-grid .mcell.today { font-weight: 700; color: var(--on-primary); background: var(--primary); } .mini-grid .mcell.has-ev::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 1px; width: 3px; height: 3px; background: var(--text-2); } .mini-grid .mcell.today.has-ev::after { background: var(--on-primary); } /* ── Sidebar: Próximos 7 dias ── */ .side-list { display: flex; flex-direction: column; gap: 0; max-height: 280px; overflow-y: auto; margin: 0 -6px; } .side-list::-webkit-scrollbar { width: 4px; } .side-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .side-item { display: grid; grid-template-columns: 3px auto 1fr; align-items: center; gap: 8px; padding: 7px 6px; border-top: 1px solid var(--border); cursor: pointer; transition: background 120ms ease; } .side-item:first-child { border-top: 0; } .side-item:hover { background: var(--surface-2); } .side-item .si-cat { width: 3px; height: 18px; } .side-item .si-cat.viagens { background: var(--cat-viagens); } .side-item .si-cat.trabalho { background: var(--cat-trabalho); } .side-item .si-cat.lazer { background: var(--cat-lazer); } .side-item .si-cat.alert { background: var(--alert); } .si-meta { display: flex; flex-direction: column; min-width: 0; } .si-when { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; } .si-title { font-size: 12px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .pendencies .eyebrow { color: var(--alert); } .pendencies .si-title { color: var(--text); } /* ── Sidebar: KPIs do mês ── */ .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { border: 1px solid var(--border); border-radius: 6px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); } .kpi-num { font-family: var(--f-title); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .kpi-label { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .kpi.cat-viagens .kpi-label { color: var(--cat-viagens); } .kpi.cat-trabalho .kpi-label { color: var(--cat-trabalho); } .kpi.cat-lazer .kpi-label { color: var(--cat-lazer); } /* main desktop */ .main { padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; } /* Alinhamento: card de hoje e tira da semana usam o mesmo recuo (28px) do calendário e do header */ .today-card { margin: 12px 28px 0; } .week-strip { margin: 16px 28px 4px; } /* Esta semana — 7 colunas full-width no desktop */ .this-week { margin: 0 28px 20px; } .this-week-head { padding: 0; margin-bottom: 4px; } .tw-grid { display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; padding: 0; margin: 0; gap: 8px; } .tw-card { flex: none; min-height: 148px; } .main-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px 16px; gap: 16px; } .main-head .left { display: flex; align-items: center; gap: 14px; } .main-head .title { font-family: var(--f-title); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; } .main-head .title .year { color: var(--text-3); font-weight: 700; margin-left: 4px; } .main-head .nav { display: flex; gap: 2px; } .main-head .actions { display: flex; gap: 8px; } /* card de hoje compacto no topo do desktop */ .desk-today { margin: 0 28px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px 6px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; } .desk-today .head .label { margin-bottom: 6px; } .desk-today .today-date { font-size: 22px; } .desk-today .today-date .day-num { font-size: 26px; } .desk-today .today-meta { font-size: 12px; } .desk-today .act-list { padding-bottom: 12px; } /* calendário grande */ .cal { flex: 1; margin: 0 28px 24px; border-radius: var(--r-card); display: flex; flex-direction: column; } .cal-head { display: none; } .cal-grid { grid-auto-rows: minmax(112px, 1fr); flex: 1; } .cal-cell { min-height: 112px; padding: 7px 8px 5px; gap: 2px; } .cal-num { font-size: 14px; padding: 3px 0; } .cal-cell.today .cal-num { padding: 2px 6px; } .ev-bars { display: none; } .ev-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); line-height: 1.25; padding: 1px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ev-row .ev-line { width: 3px; height: 11px; flex-shrink: 0; } .ev-row .ev-line.viagens { background: var(--cat-viagens); } .ev-row .ev-line.trabalho { background: var(--cat-trabalho); } .ev-row .ev-line.lazer { background: var(--cat-lazer); } .ev-row .ev-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .ev-row .ev-time { font-family: var(--f-mono); font-size: 10px; color: var(--text-2); flex-shrink: 0; font-variant-numeric: tabular-nums; } .ev-more { font-size: 10px; color: var(--text-3); font-weight: 500; padding: 1px 0 0; } /* rodapé com atalhos */ .footer { border-top: 1px solid var(--border); padding: 10px 28px; display: flex; align-items: center; gap: 18px; font-size: 11px; color: var(--text-3); } .kbd { display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 1.5px; color: var(--text-2); background: var(--surface); border-radius: 3px; min-width: 16px; justify-content: center; } .shortcut { display: inline-flex; align-items: center; gap: 6px; } } @media (min-width: 1180px) { .desk-today { grid-template-columns: 260px 1fr; } } /* ──────────────────────────────────────────────────────────── SPRINT 1B — Componentes novos do app real ──────────────────────────────────────────────────────────── */ /* ── Tira da semana (mobile): mini-cards com atividades (carrossel) ── */ .week-strip { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 8px 6px; margin: 0 -8px; } .week-strip::-webkit-scrollbar { display: none; } .ws-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 10px 12px; min-width: 140px; scroll-snap-align: center; scroll-snap-stop: always; transition: background 120ms ease, border-color 120ms ease; cursor: pointer; } .ws-card:hover { background: var(--surface-2); } .ws-card.today { border: 1.5px solid var(--text); } .ws-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .ws-card .ws-dow { font-family: var(--f-body); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .ws-card .ws-num { font-family: var(--f-title); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -0.02em; } .ws-body { display: flex; flex-direction: column; gap: 4px; min-height: 24px; } .ws-act { display: grid; grid-template-columns: 3px auto 1fr; align-items: center; gap: 6px; font-size: 11px; line-height: 1.3; } .ws-bar { width: 3px; height: 11px; border-radius: 0; } .ws-time { font-family: var(--f-mono); font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .ws-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-more { font-size: 10px; font-weight: 500; color: var(--text-3); padding: 2px 0 0; } .ws-empty { font-size: 11px; color: var(--text-3); text-align: center; padding: 6px 0; } /* ── Sidebar (desktop): listas Próximos e Pendentes ── */ .sidebar-list { display: flex; flex-direction: column; gap: 2px; } .sidebar-list-item { display: grid; grid-template-columns: 3px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-btn); text-align: left; cursor: pointer; transition: background 120ms ease; width: 100%; } .sidebar-list-item:hover { background: var(--surface-2); } .sidebar-bar { width: 3px; height: 24px; border-radius: 0; } .sidebar-item-body { min-width: 0; } .sidebar-item-meta { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .sidebar-item-title { font-size: 12px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-empty { font-size: 11px; color: var(--text-3); padding: 4px 8px; font-style: italic; } /* ── Item vazio (placeholder dentro do card de hoje) ── */ .act-list .empty { padding: 16px 4px; color: var(--text-3); font-size: 13px; text-align: center; } /* ──────────────────────────────────────────────────────────── SPRINT 2F — Sistema de remédios ──────────────────────────────────────────────────────────── */ /* Tokens próprios — declarados aqui pra ficar perto do uso */ :root { --cor-med: #2e8a8a; --cor-med-soft: rgba(46, 138, 138, 0.10); } /* Card "Meus Remédios" no dashboard */ .meds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 4px; } .meds-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .meds-card-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; } .meds-card-head .eyebrow [data-lucide] { width: 14px; height: 14px; color: var(--cor-med); } .meds-card-add { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); padding: 2px 6px; border-radius: 4px; } .meds-card-add:hover { color: var(--text); background: var(--surface-2); } .meds-card-add [data-lucide] { width: 13px; height: 13px; } .med-row { display: grid; grid-template-columns: 3px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); } .med-row:first-of-type { border-top: 0; padding-top: 4px; } .med-bar { width: 3px; height: 36px; border-radius: 0; background: var(--cor-med); } .med-info { min-width: 0; } .med-name { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .med-next { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .med-next [data-lucide] { width: 12px; height: 12px; color: var(--text-3); } .med-next.atrasada [data-lucide], .med-next.atrasada .med-next-when { color: var(--alert); font-weight: 500; } .med-actions { display: flex; gap: 4px; } .med-actions .btn { padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: var(--r); } .med-actions .btn-take { background: var(--cor-med); color: #fff; border: 0; } .med-actions .btn-take:hover { filter: brightness(1.08); } .med-actions .btn-skip { background: transparent; color: var(--text-2); border: 1px solid var(--border); } .med-actions .btn-skip:hover { border-color: var(--text-2); } /* Indicador de remédio no calendário — pequeno ícone pill vermelho (só bordas) */ .cal-cell .med-dot { position: absolute; right: 3px; bottom: 2px; display: inline-flex; color: #d44a4a; pointer-events: none; background: transparent; border-radius: 0; width: auto; height: auto; } .cal-cell .med-dot [data-lucide] { width: 10px; height: 10px; stroke-width: 2; } /* Mini-cal: pill bem pequeno no topo da célula */ .mini-grid .mcell.has-med::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 1px; width: 6px; height: 6px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; border-radius: 0; } /* Modal de cadastro/edição de medicamento */ .modal-med { max-height: 88dvh; } .med-form-body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 18px; } .med-section { display: flex; flex-direction: column; gap: 10px; } .med-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .med-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .med-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); cursor: pointer; text-align: center; transition: border-color 120ms ease, background 120ms ease; } .med-mode:hover { border-color: var(--text); } .med-mode.selected { border: 1.5px solid var(--text); background: var(--surface-2); } .med-mode [data-lucide] { width: 18px; height: 18px; color: var(--text-2); } .med-mode.selected [data-lucide] { color: var(--text); } .med-mode-label { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2; } /* Slider de horas */ .med-slider-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .med-slider { appearance: none; width: 100%; height: 6px; background: var(--surface-2); border-radius: 3px; cursor: pointer; } .med-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; background: var(--cor-med); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(46, 138, 138, 0.30); } .med-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--cor-med); border-radius: 50%; border: 0; cursor: pointer; } .med-slider-value { font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--text); min-width: 60px; text-align: right; } /* Pílulas de horário (clicáveis pra remover; "+" abre time picker) */ .med-hours-row { display: flex; flex-wrap: wrap; gap: 6px; } .med-hour { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-tag); font-family: var(--f-mono); font-size: 13px; color: var(--text); background: var(--surface); cursor: pointer; } .med-hour [data-lucide] { width: 11px; height: 11px; color: var(--text-3); } .med-hour:hover [data-lucide] { color: var(--alert); } .med-hour-add { border-style: dashed; color: var(--text-2); } .med-hour-add input[type="time"] { border: 0; background: transparent; font: inherit; color: inherit; padding: 0; width: 60px; font-family: var(--f-mono); } .med-hour-add input::-webkit-calendar-picker-indicator { display: none; } /* Botões de vezes ao dia (1/2/3/4) */ .med-times-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .med-times-btn { padding: 10px 0; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); font-weight: 600; color: var(--text); cursor: pointer; } .med-times-btn.selected { border: 1.5px solid var(--text); background: var(--surface-2); } /* Botões de duração (7/14/30/Contínuo) */ .med-duration-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .med-duration-btn { padding: 10px 0; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; } .med-duration-btn.selected { border: 1.5px solid var(--text); background: var(--surface-2); font-weight: 600; } /* Lista de remédios (modal de gerenciamento) */ .meds-list { flex: 1; overflow-y: auto; padding: 4px 20px 20px; } .meds-list-item { display: grid; grid-template-columns: 3px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; width: 100%; } .meds-list-item:last-child { border-bottom: 0; } .meds-list-item:hover { background: var(--surface-2); } .meds-list-bar { width: 3px; height: 38px; background: var(--cor-med); } .meds-list-info { min-width: 0; } .meds-list-name { font-family: var(--f-title); font-weight: 700; font-size: 15px; color: var(--text); } .meds-list-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; } .meds-list-arrow { color: var(--text-3); width: 16px; height: 16px; } .meds-empty-state { padding: 36px 20px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.5; } .meds-empty-state [data-lucide] { width: 36px; height: 36px; color: var(--cor-med); margin-bottom: 12px; } @media (min-width: 768px) { .modal-med { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 480px; max-width: calc(100vw - 32px); border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-med { transform: translate(-50%, -50%); } .modal-med .modal-handle { display: none; } } /* Detalhe do dia — seção de remédios */ .modal-day-meds { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--border); } .modal-day-meds .eyebrow { display: flex; align-items: center; gap: 6px; color: var(--cor-med); margin-bottom: 8px; } .modal-day-meds .eyebrow [data-lucide] { width: 13px; height: 13px; } /* ──────────────────────────────────────────────────────────── SPRINT 2E — Filtros de categoria + modais de estação/clima ──────────────────────────────────────────────────────────── */ /* Chips de filtro no dashboard */ .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0; overflow-x: auto; scrollbar-width: none; } .filter-chips::-webkit-scrollbar { display: none; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color 120ms ease, background 120ms ease; } .filter-chip:hover { border-color: var(--text); } .filter-chip .filter-chip-bar { width: 3px; height: 11px; border-radius: 0; } .filter-chip .filter-chip-count { margin-left: 2px; font-family: var(--f-mono); font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* Drawer de filtro (lista compromissos futuros da categoria) */ .modal-filter { max-height: 80dvh; } .filter-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 2px; } .filter-item { display: grid; grid-template-columns: 3px 1fr; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--r-input); cursor: pointer; transition: background 120ms ease; text-align: left; width: 100%; } .filter-item:hover { background: var(--surface-2); } .filter-item-bar { width: 3px; height: 36px; border-radius: 0; } .filter-item-body { min-width: 0; } .filter-item-meta { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .filter-item-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-item.done .filter-item-title { color: var(--text-3); text-decoration: line-through; } .filter-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 13px; font-style: italic; } @media (min-width: 768px) { .modal-filter { top: 0; bottom: 0; right: 0; left: auto; width: 380px; max-height: none; border-radius: 0; transform: translateX(100%); box-shadow: -10px 0 40px rgba(0,0,0,0.10); } .modal-host.open .modal-filter { transform: translateX(0); } .modal-filter .modal-handle { display: none; } } /* Busca de atividades (Sprint 3 #2) */ [data-action='search-open'] [data-lucide] { color: var(--text); } .modal-search { max-height: 85dvh; } .search-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .search-head-icon { width: 20px; height: 20px; color: var(--text-3); flex-shrink: 0; } .search-input { flex: 1; min-width: 0; font: inherit; font-size: 17px; font-weight: 500; border: none; background: transparent; color: var(--text); padding: 4px 0; } .search-input::placeholder { color: var(--text-3); font-weight: 400; } .search-input:focus { outline: none; } .search-results { flex: 1; overflow-y: auto; padding: 8px 18px 20px; display: flex; flex-direction: column; gap: 2px; } .search-item { display: grid; grid-template-columns: 3px 1fr; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--r-input); cursor: pointer; transition: background 120ms ease; text-align: left; width: 100%; } .search-item:hover { background: var(--surface-2); } .search-item-bar { width: 3px; height: 34px; border-radius: 0; } .search-item-body { min-width: 0; } .search-item-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-item-meta { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; } .search-item.done .search-item-title { color: var(--text-3); text-decoration: line-through; } .search-hl { background: none; color: var(--accent); font-weight: 700; } .search-hint { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 13px; } /* Modal genérico de info (estações + tempo) */ .modal-info { max-height: 76dvh; } .info-body { flex: 1; overflow-y: auto; padding: 4px 22px 18px; display: flex; flex-direction: column; gap: 12px; } .info-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); } .info-row:last-child { border-bottom: 0; } .info-row.current { background: var(--surface-2); border-radius: var(--r-input); padding: 12px 12px; border-bottom: 1px solid var(--border); } .info-row .info-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); } .info-row .info-icon [data-lucide] { width: 20px; height: 20px; } .info-row .info-text { min-width: 0; } .info-row .info-title { font-family: var(--f-title); font-weight: 700; font-size: 14px; color: var(--text); } .info-row .info-meta { font-size: 11px; color: var(--text-3); font-family: var(--f-mono); } .info-row .info-value { font-family: var(--f-mono); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; } .info-now-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 2px 6px; background: var(--accent-soft); border-radius: 4px; } /* Lista de horas (previsão hourly) */ .info-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px 0; } .info-hour { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: var(--surface-2); border-radius: var(--r-input); } .info-hour-h { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); } .info-hour [data-lucide] { width: 16px; height: 16px; color: var(--text-2); } .info-hour [data-lucide].rainy { color: var(--accent); } .info-hour-t { font-family: var(--f-title); font-weight: 700; font-size: 12px; letter-spacing: -0.02em; } @media (min-width: 768px) { .modal-info { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 420px; max-width: calc(100vw - 32px); border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-info { transform: translate(-50%, -50%); } .modal-info .modal-handle { display: none; } } /* Clicáveis do weather chip — viram botão */ .weather-chip .wc-station-btn, .weather-chip .wc-cond-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; } .weather-chip .wc-cond-btn { padding-left: 2px; } .weather-chip .wc-station-btn:hover, .weather-chip .wc-cond-btn:hover { color: var(--text); } /* ──────────────────────────────────────────────────────────── SPRINT 2D — Modal de Voz (gravar comando → IA → criar atividade) ──────────────────────────────────────────────────────────── */ .modal-voice { max-height: 80dvh; background: var(--surface); } .voice-body { flex: 1; overflow-y: auto; padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; } .voice-prompt { font-family: var(--f-title); font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; } .voice-hint { font-size: 12px; color: var(--text-3); max-width: 36ch; line-height: 1.5; } .voice-mic-btn { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35); cursor: pointer; transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease; flex-shrink: 0; position: relative; } .voice-mic-btn:hover { background: var(--accent-hover); } .voice-mic-btn:active { transform: scale(0.96); } .voice-mic-btn [data-lucide] { width: 38px; height: 38px; stroke-width: 2; } .voice-mic-btn.recording { background: var(--alert); box-shadow: 0 10px 30px rgba(166, 69, 69, 0.40); animation: voice-pulse 1.2s ease-out infinite; } @keyframes voice-pulse { 0% { box-shadow: 0 10px 30px rgba(166, 69, 69, 0.40), 0 0 0 0 rgba(166, 69, 69, 0.40); } 100% { box-shadow: 0 10px 30px rgba(166, 69, 69, 0.20), 0 0 0 24px rgba(166, 69, 69, 0); } } .voice-mic-btn.thinking { background: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,0.20); } .voice-mic-btn.thinking [data-lucide] { animation: voice-spin 1s linear infinite; } @keyframes voice-spin { to { transform: rotate(360deg); } } .voice-transcript { width: 100%; min-height: 56px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-card); font-size: 15px; line-height: 1.5; color: var(--text); text-align: left; } .voice-transcript.empty { color: var(--text-3); font-style: italic; } .voice-preview { width: 100%; background: #fdfcf7; border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; } .voice-preview-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .voice-preview-head [data-lucide] { width: 13px; height: 13px; color: var(--cat-viagens); } .voice-preview-title { font-family: var(--f-title); font-weight: 700; font-size: 17px; color: var(--text); line-height: 1.25; } .voice-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-2); } .voice-preview-meta-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--surface); border-radius: 4px; } .voice-preview-meta-item [data-lucide] { width: 12px; height: 12px; } .voice-preview-meta-item .cat-bar { width: 3px; height: 10px; border-radius: 0; } .voice-preview-notas { font-size: 12px; color: var(--text-2); font-style: italic; padding-left: 8px; border-left: 2px solid var(--border); } .voice-error { color: var(--alert); font-size: 13px; padding: 8px 12px; background: rgba(166, 69, 69, 0.08); border-radius: var(--r-input); text-align: left; } .voice-foot { padding: 12px 22px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; display: flex; gap: 8px; } .voice-foot .btn { flex: 1; justify-content: center; padding: 12px; } @media (min-width: 768px) { .modal-voice { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 480px; max-width: calc(100vw - 32px); border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-voice { transform: translate(-50%, -50%); } .modal-voice .modal-handle { display: none; } } /* ──────────────────────────────────────────────────────────── SPRINT 2C — Modal Configurações (categorias customizáveis) ──────────────────────────────────────────────────────────── */ .modal-settings { max-height: 80dvh; } .settings-body { flex: 1; overflow-y: auto; padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 16px; } .settings-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .cat-edit-row { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); } .cat-edit-row:last-child { border-bottom: 0; } .cat-edit-color { width: 22px; height: 22px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); padding: 0; overflow: hidden; position: relative; } .cat-edit-color::-webkit-color-swatch { border: none; } .cat-edit-color::-moz-color-swatch { border: none; } .cat-edit-name { font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--r-input); padding: 6px 8px; width: 100%; } .cat-edit-name:focus { outline: none; border-color: var(--border); background: var(--surface); } .cat-edit-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-3); border-radius: 4px; transition: color 120ms ease, background 120ms ease; } .cat-edit-remove:hover { color: var(--alert); background: var(--surface-2); } .cat-edit-remove [data-lucide] { width: 14px; height: 14px; } .new-cat-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); } .new-cat-row .btn-secondary { padding: 8px 12px; font-size: 12px; } .settings-toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .settings-toggle:last-child { border-bottom: 0; } .settings-toggle-label { font-size: 13px; color: var(--text); } .settings-toggle-meta { font-size: 11px; color: var(--text-3); } /* ── Conta / login (Fase Backend: sincronização) ── */ .account-form { display: flex; flex-direction: column; gap: 8px; } .account-input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 12px; width: 100%; transition: border-color 150ms ease; } .account-input:focus { outline: none; border-color: var(--text); } .account-form .btn-primary { margin-top: 4px; } .auth-error { font-size: 12px; color: #a64545; background: rgba(166, 69, 69, 0.08); border: 1px solid rgba(166, 69, 69, 0.28); border-radius: var(--r-input); padding: 8px 10px; } .auth-sep { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin: 14px 0 10px; } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-switch { margin-top: 14px; width: 100%; background: none; border: 0; padding: 6px; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; } .auth-switch:hover { color: var(--accent-hover); text-decoration: underline; } .auth-reset-link { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--text-3); } .auth-reset-link:hover { color: var(--text-2); } .account-meta { font-size: 14px; color: var(--text); margin: 0 0 6px; } .account-hint { font-size: 12px; color: var(--text-3); margin: 8px 0 0; line-height: 1.5; } .switch { appearance: none; position: relative; width: 36px; height: 20px; background: var(--surface-2); border-radius: 999px; cursor: pointer; transition: background 150ms ease; } .switch:checked { background: var(--cat-viagens); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 150ms ease; } .switch:checked::after { transform: translateX(16px); } /* Mic button no form */ .field-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); border-radius: 6px; transition: color 120ms ease, background 120ms ease; } .field-mic:hover { background: var(--accent-soft); color: var(--accent-hover); } .field-mic.recording { color: var(--alert); animation: mic-pulse 1.4s infinite; } .field-mic [data-lucide] { width: 18px; height: 18px; } @keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (min-width: 768px) { .modal-settings { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 480px; max-width: calc(100vw - 32px); border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-settings { transform: translate(-50%, -50%); } .modal-settings .modal-handle { display: none; } } /* ──────────────────────────────────────────────────────────── SPRINT 1E — Modal Resumo do mês (IA Claude via Cloud Function) ──────────────────────────────────────────────────────────── */ .modal-review { /* mobile herda de .modal; desktop overrides abaixo */ max-height: 92dvh; background: #fdfcf7; /* off-white levemente mais quente — toque Sunsama */ } .review-head { padding: 14px 22px 8px; } .review-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 8px; font-size: 12px; color: var(--text-2); flex-shrink: 0; } .review-nav button { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .review-nav button:hover { color: var(--text); } .review-body { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; gap: 22px; -webkit-overflow-scrolling: touch; } .review-paragraph { position: relative; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 56ch; padding-right: 26px; } .review-paragraph .ai-mark { position: absolute; top: -2px; right: 0; color: var(--text-3); opacity: 0.8; } .review-paragraph .ai-mark [data-lucide] { width: 14px; height: 14px; } .review-paragraph.loading { color: var(--text-3); font-style: italic; } .review-kpis { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; flex-shrink: 0; } .review-kpi { padding: 12px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .review-kpi:nth-child(2n) { border-right: 0; } .review-kpi:nth-last-child(-n+2) { border-bottom: 0; } .review-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .review-kpi-num { font-family: var(--f-title); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.02em; } .review-kpi-extra { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; } @media (min-width: 460px) { .review-kpis { grid-template-columns: repeat(4, 1fr); } .review-kpi { border-bottom: 0; } } .review-dist { display: flex; flex-direction: column; gap: 4px; } .review-dist-row { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 10px; padding: 3px 0; } .review-dist-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .review-dist-label.pend { color: var(--alert); } .review-dist-track { background: var(--surface-2); border-radius: 0; overflow: hidden; height: 18px; } .review-dist-fill { height: 100%; border-radius: 0; transition: width 250ms ease; } .review-dist-fill.viagens { background: var(--cat-viagens); } .review-dist-fill.trabalho { background: var(--cat-trabalho); } .review-dist-fill.lazer { background: var(--cat-lazer); } .review-dist-fill.pend { background: var(--alert); } .review-dist-num { font-family: var(--f-mono); font-size: 12px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; } .review-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .review-section-title.pend { color: var(--alert); } .review-pend-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .review-pend-row:last-child { border-bottom: 0; } .review-pend-bar { width: 3px; height: 22px; border-radius: 0; } .review-pend-meta { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); flex-shrink: 0; } .review-pend-title { flex: 1; font-size: 13px; color: var(--text); } .review-foot { padding: 12px 22px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); } .review-foot .right { margin-left: auto; display: inline-flex; gap: 8px; } @media (min-width: 768px) { .modal-review { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 640px; max-width: calc(100vw - 32px); max-height: 80dvh; border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-review { transform: translate(-50%, -50%); } .modal-review .modal-handle { display: none; } } /* ──────────────────────────────────────────────────────────── SPRINT 1D — Weather chip (estação + temp + condição + chuva) ──────────────────────────────────────────────────────────── */ .weather-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; } /* Botão Home (casinha) dentro do weather chip — vai pro hoje */ .wc-home { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 4px; color: var(--text); transition: background 120ms ease; cursor: pointer; } .wc-home [data-lucide] { width: 15px; height: 15px; stroke-width: 2; color: inherit; } .wc-home:hover { background: var(--surface-2); } .wc-home:active { transform: scale(0.95); } .weather-chip [data-lucide] { width: 14px; height: 14px; stroke-width: 1.75; color: var(--text-2); flex-shrink: 0; } .weather-chip .wc-sep { color: var(--text-3); margin: 0 2px; } .weather-chip .wc-temp { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); font-weight: 500; } /* Quando chuva ≥ 50%, ícone e % ficam em azul */ .weather-chip.rainy [data-lucide].rain-icon, .weather-chip.rainy .wc-rain { color: var(--cat-viagens); } .weather-chip .wc-rain { color: var(--text-2); } /* Mobile: faixa dentro do .mobile-header (fixo) */ .weather-strip { display: flex; align-items: center; padding: 6px max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); background: var(--bg); border-top: 1px solid var(--border); min-height: 28px; position: relative; } .weather-strip:empty, .weather-strip.hidden, .weather-chip.hidden { display: none; } @media (min-width: 768px) { /* No desktop o chip vive dentro do .main-head */ .weather-strip { display: none !important; } .main-head .weather-chip { align-self: center; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--border); } } /* Dentro do modal-day */ .modal-day .weather-chip { margin-top: 6px; padding: 4px 0; } /* ──────────────────────────────────────────────────────────── SPRINT 1C — Modais (Detalhe do dia + Nova atividade) ──────────────────────────────────────────────────────────── */ /* Container raiz dos modais — vazio até abrir */ .modal-host { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .modal-host.open { pointer-events: auto; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 200ms ease; } .modal-host.open .modal-backdrop { background: rgba(0,0,0,0.25); } /* Modal genérico — mobile slide-up, desktop centralizado */ .modal { position: absolute; bottom: 0; left: 0; right: 0; max-height: 92dvh; background: var(--surface); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 250ms cubic-bezier(.32,.72,0,1); box-shadow: 0 -10px 40px rgba(0,0,0,0.15); } .modal-host.open .modal { transform: translateY(0); } .modal-handle { align-self: center; width: 36px; height: 4px; background: var(--text-disabled); border-radius: 2px; margin: 8px 0 0; flex-shrink: 0; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 18px 8px; gap: 12px; flex-shrink: 0; } .modal-head .head-text { min-width: 0; } .modal-head .head-eyebrow { margin-bottom: 4px; } .modal-head .head-title { font-family: var(--f-title); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; } .modal-head .head-title .day-num { font-size: 26px; } .modal-head .head-meta { margin-top: 4px; color: var(--text-2); font-size: 12px; } .modal-head .head-meta .alert { color: var(--alert); font-weight: 600; } .modal-head .head-close { flex-shrink: 0; margin-top: 4px; } .modal-day-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 8px; font-size: 12px; color: var(--text-2); flex-shrink: 0; } .modal-day-nav button { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); transition: color 150ms ease; } .modal-day-nav button:hover { color: var(--text); } .modal-day-nav .day-arrow { width: 14px; height: 14px; } .modal-chips { display: flex; gap: 8px; padding: 0 18px 12px; flex-shrink: 0; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-tag); background: var(--surface); border: 1px solid var(--border); font-size: 11px; color: var(--text); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .chip .chip-bar { width: 3px; height: 11px; border-radius: 0; } .chip-bar.viagens { background: var(--cat-viagens); } .chip-bar.trabalho { background: var(--cat-trabalho); } .chip-bar.lazer { background: var(--cat-lazer); } .chip-count { margin-left: 2px; font-family: var(--f-mono); font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* Corpo scrollável */ .modal-body { flex: 1; overflow-y: auto; padding: 0 18px 18px; -webkit-overflow-scrolling: touch; } .modal-section { padding-top: 10px; } .modal-section + .modal-section { border-top: 1px solid var(--border); margin-top: 6px; } .modal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .modal-section-count { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); } .modal-empty { padding: 12px 0 8px; color: var(--text-3); font-size: 13px; } /* Notas do dia */ .modal-notes { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .modal-notes-text { background: var(--surface-2); border-radius: var(--r-card); padding: 12px 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; min-height: 24px; } .modal-notes-text.empty { color: var(--text-3); font-style: italic; } /* Rodapé do modal-day */ .modal-foot { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; display: flex; gap: 8px; background: var(--surface); } .modal-foot .btn-primary { flex: 1; justify-content: center; padding: 12px 16px; } .modal-foot .btn-secondary { padding: 12px 16px; } /* ── Modal Nova atividade — campos do formulário ── */ .modal-form { /* herda de .modal */ max-height: 80dvh; } .modal-form-body { flex: 1; overflow-y: auto; padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-row { display: grid; gap: 10px; grid-template-columns: 1.4fr 1fr; } .field-label { font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .field-input, .field-textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 12px; width: 100%; transition: border-color 150ms ease; } .field-input:focus, .field-textarea:focus { outline: none; border-color: var(--text); } .field-input.lg { font-size: 17px; font-weight: 500; padding: 12px 14px; border-radius: var(--r-btn); } .field-textarea { resize: vertical; min-height: 70px; font-family: var(--f-body); } .field-input.with-icon { padding-left: 34px; } .field-input-wrap { position: relative; } .field-input-wrap > [data-lucide] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .field-input.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .field-link { align-self: flex-start; color: var(--text-2); font-size: 11px; text-decoration: underline; text-decoration-color: var(--border); padding: 0; } .field-link:hover { color: var(--text); } /* Chips de categoria no form (single-select) */ .cat-picker { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); cursor: pointer; font-size: 13px; transition: border-color 150ms ease, background 150ms ease; } .cat-chip .cat-chip-bar { width: 3px; height: 14px; border-radius: 0; } .cat-chip-bar.viagens { background: var(--cat-viagens); } .cat-chip-bar.trabalho { background: var(--cat-trabalho); } .cat-chip-bar.lazer { background: var(--cat-lazer); } .cat-chip.selected { border: 1.5px solid var(--text); background: var(--surface-2); font-weight: 600; } /* Chips de lembrete antecipado no form (multi-select) */ .lembrete-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .lembrete-chip { padding: 9px 6px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .lembrete-chip.selected { border: 1.5px solid var(--accent); background: var(--surface-2); color: var(--accent); font-weight: 600; } .lembrete-picker.is-disabled { opacity: 0.45; } .lembrete-chip:disabled { cursor: not-allowed; } .lembrete-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* Recorrência no form (Sprint 3 #3) */ .rec-tipo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rec-opt { padding: 9px 4px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 12px; text-align: center; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .rec-opt.selected { border: 1.5px solid var(--accent); background: var(--surface-2); color: var(--accent); font-weight: 600; } .rec-detail { margin-top: 10px; } .rec-detail[hidden] { display: none; } .rec-semanal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .rec-dia { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .rec-dia.selected { border: 1.5px solid var(--accent); background: var(--surface-2); color: var(--accent); } .rec-mensal-label { font-size: 13px; color: var(--text-2); } .rec-mensal-label strong { color: var(--text); } /* Faixa de escopo (editar atividade recorrente) */ .rec-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .rec-scope-msg { font-size: 12px; color: var(--text-2); flex: 1 1 100%; } /* Faixa de exclusão precisa quebrar linha (versão recorrente tem 3 botões) */ .delete-confirm { flex-wrap: wrap; } /* Ícone de recorrência na linha de atividade */ .act-rec-icon { width: 11px; height: 11px; color: var(--text-3); stroke-width: 2; vertical-align: -1px; margin-left: 3px; } /* Aniversários (Sprint 3 #4) */ .bday-act { display: flex; align-items: center; gap: 10px; cursor: pointer; } .bday-cake { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #d4865e; flex-shrink: 0; } .bday-cake [data-lucide] { width: 18px; height: 18px; } /* Seletor de tema nas Configurações (Sprint 3 #5) */ .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-opt { padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--r-tag); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 13px; text-align: center; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .theme-opt.selected { border: 1.5px solid var(--accent); background: var(--surface-2); color: var(--accent); font-weight: 600; } /* Rodapé do form */ .modal-form-foot { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); } .modal-form-foot .delete-btn { color: var(--alert); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; padding: 8px 0; margin-right: auto; } .modal-form-foot .delete-btn [data-lucide] { width: 14px; height: 14px; } .modal-form-foot .delete-btn:hover { color: var(--alert-soft); } .modal-form-foot .right { display: inline-flex; gap: 8px; margin-left: auto; } .modal-form-foot .btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Confirmação de exclusão (faixa amarela) */ .delete-confirm { background: #fdf6e3; border-top: 1px solid #e9d6a8; padding: 12px 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .delete-confirm-msg { font-size: 12px; color: #8a6d1f; flex: 1; line-height: 1.3; } .delete-confirm .btn-danger { background: var(--alert); color: #fff; border-radius: var(--r-btn); padding: 6px 12px; font-size: 12px; font-weight: 600; } .delete-confirm .btn-danger:hover { background: var(--alert-soft); } /* Atividade clicável dentro do modal-day */ .modal-body .act { cursor: pointer; } .modal-body .act:hover { background: var(--surface-2); border-radius: var(--r-input); } /* ── Desktop overrides — drawer lateral e modal central ── */ @media (min-width: 768px) { /* Detalhe do dia: drawer 380px à direita */ .modal-day { top: 0; bottom: 0; right: 0; left: auto; width: 380px; max-height: none; border-radius: 0; transform: translateX(100%); box-shadow: -10px 0 40px rgba(0,0,0,0.10); } .modal-host.open .modal-day { transform: translateX(0); } .modal-day .modal-handle { display: none; } .modal-day .modal-foot { padding-bottom: 16px; } /* Form: modal central */ .modal-form { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 30px)); bottom: auto; right: auto; width: 480px; max-width: calc(100vw - 32px); max-height: 80dvh; border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,0.20); } .modal-host.open .modal-form { transform: translate(-50%, -50%); } .modal-form .modal-handle { display: none; } }