/* ============================================================ * * Tokens. Tema por data-theme no (theme-init.js aplica * antes de pintar); accent por data-accent. Sem JS, cai no * prefers-color-scheme via :root:not([data-theme]). * ============================================================ */ :root { --bg: #f7f4ef; --surface: #ffffff; --surface-2: #f2ece1; --border: #e7ded0; --text: #2b2622; --text-dim: #5f574e; --text-mute: #a99f92; --accent: #b3541e; --accent-hover: #954617; --accent-fg: #ffffff; --ring: rgba(179, 84, 30, 0.32); --wa: #1c8a4a; --danger: #c0392b; --radius: 14px; --shadow: 0 1px 2px rgba(43, 38, 34, 0.06), 0 8px 24px -12px rgba(43, 38, 34, 0.14); --safe-b: env(safe-area-inset-bottom, 0px); color-scheme: light; } :root[data-theme="dark"] { --bg: #17130f; --surface: #221d19; --surface-2: #2c2620; --border: #3b332c; --text: #f4efe9; --text-dim: #cabfb3; --text-mute: #8f8579; --wa: #35c07a; --danger: #f0776a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 28px -14px rgba(0, 0, 0, 0.62); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #17130f; --surface: #221d19; --surface-2: #2c2620; --border: #3b332c; --text: #f4efe9; --text-dim: #cabfb3; --text-mute: #8f8579; --wa: #35c07a; --danger: #f0776a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 28px -14px rgba(0, 0, 0, 0.62); color-scheme: dark; } } /* ---- presets de accent (só o destaque muda) ---- */ :root[data-accent="terracota"] { --accent: #b3541e; --accent-hover: #954617; --accent-fg: #fff; --ring: rgba(179, 84, 30, 0.32); } :root[data-accent="terracota"][data-theme="dark"] { --accent: #e8894f; --accent-hover: #f0a273; --accent-fg: #241a12; --ring: rgba(232, 137, 79, 0.4); } :root[data-accent="violeta"] { --accent: #6d28d9; --accent-hover: #5b21b6; --accent-fg: #fff; --ring: rgba(109, 40, 217, 0.32); } :root[data-accent="violeta"][data-theme="dark"] { --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-fg: #1e1633; --ring: rgba(167, 139, 250, 0.4); } :root[data-accent="oceano"] { --accent: #0369a1; --accent-hover: #075985; --accent-fg: #fff; --ring: rgba(3, 105, 161, 0.3); } :root[data-accent="oceano"][data-theme="dark"] { --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-fg: #06273a; --ring: rgba(56, 189, 248, 0.4); } :root[data-accent="verde"] { --accent: #047857; --accent-hover: #065f46; --accent-fg: #fff; --ring: rgba(4, 120, 87, 0.3); } :root[data-accent="verde"][data-theme="dark"] { --accent: #34d399; --accent-hover: #6ee7b7; --accent-fg: #05271c; --ring: rgba(52, 211, 153, 0.4); } :root[data-accent="grafite"] { --accent: #475569; --accent-hover: #334155; --accent-fg: #fff; --ring: rgba(71, 85, 105, 0.28); } :root[data-accent="grafite"][data-theme="dark"] { --accent: #94a3b8; --accent-hover: #cbd5e1; --accent-fg: #1e2430; --ring: rgba(148, 163, 184, 0.36); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } /* iOS: não dar zoom ao focar campo com fonte < 16px */ input, select, textarea { font-size: 16px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .btn:focus-visible, .wa-link:focus-visible, .nav button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; border: 2px solid var(--bg); } #app.loading { display: grid; place-items: center; min-height: 100dvh; color: var(--text-mute); } /* layout ------------------------------------------------------------- */ .wrap { max-width: 640px; margin: 0 auto; padding: 0 14px calc(92px + var(--safe-b)); } .topbar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 640px; margin: 0 auto; padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .topbar h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; flex: 1; } .brand-dot { color: var(--accent); } /* bottom nav ------------------------------------------------------------ */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: var(--safe-b); } .nav button { flex: 1; border: 0; background: none; padding: 10px 4px 12px; color: var(--text-mute); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; cursor: pointer; } .nav button .ic { font-size: 19px; line-height: 1; } .nav button.active { color: var(--accent); font-weight: 600; } /* buttons ------------------------------------------------------------- */ .btn { appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 9px 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.05s, background 0.15s; } .btn:active { transform: scale(0.98); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn.primary:active { background: var(--accent-hover); } .btn.ghost { background: none; } .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; } .btn.block { width: 100%; justify-content: center; } /* section head ----------------------------------------------------------- */ .head { display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px; } .head h2 { font-size: 13px; margin: 0; flex: 1; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .seg button { border: 0; background: var(--surface); padding: 6px 11px; font-size: 13px; cursor: pointer; } .seg button.active { background: var(--accent); color: var(--accent-fg); } /* financeiro ----------------------------------------------------------- */ .fin-nav { display: flex; align-items: center; gap: 10px; margin: 18px 2px 14px; } .fin-nav button { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--text-dim); } .fin-nav .fin-month { flex: 1; text-align: center; font-weight: 700; text-transform: capitalize; } .fin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; } .fin-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .fin-tile .fin-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); } .fin-tile .fin-value { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; } .fin-tile.is-recebido .fin-value { color: var(--wa); } /* day group ---------------------------------------------------------- */ .daygroup { margin-top: 16px; } .dayhead { font-size: 13px; font-weight: 700; color: var(--text-mute); margin: 0 2px 8px; display: flex; gap: 8px; align-items: baseline; } .dayhead .today { color: var(--accent); } /* card ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 13px; margin-bottom: 10px; } .card.is-cancelado, .card.is-faltou { opacity: 0.62; } .card-top { display: flex; align-items: center; gap: 10px; } .time { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; } .card-title { flex: 1; min-width: 0; } .card-title .who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-title .sub { color: var(--text-dim); font-size: 13px; } .chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; background: var(--surface-2); color: var(--text-dim); } .chip.pendente { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; } .chip.confirmado { background: color-mix(in srgb, #2563eb 16%, transparent); color: #1d4ed8; } .chip.concluido { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; } .chip.faltou { background: color-mix(in srgb, #dc2626 16%, transparent); color: #b91c1c; } :root[data-theme="dark"] .chip.pendente { color: #fbbf24; } :root[data-theme="dark"] .chip.confirmado { color: #93b4f7; } :root[data-theme="dark"] .chip.concluido { color: #4ade80; } :root[data-theme="dark"] .chip.faltou { color: #fca5a5; } .card-actions { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; } .wa-strip { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; } .wa-strip .wa-ic { color: var(--wa); font-weight: 700; font-size: 12px; text-transform: uppercase; } .wa-link { text-decoration: none; color: var(--wa); font-weight: 600; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--wa) 35%, var(--border)); } .wa-link:active { background: color-mix(in srgb, var(--wa) 14%, transparent); } /* empty / misc ----------------------------------------------------------- */ .empty { text-align: center; color: var(--text-mute); padding: 44px 16px; } .list-row { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; } .list-row .grow { flex: 1; min-width: 0; } .list-row .grow .sub { color: var(--text-dim); font-size: 13px; } .muted { color: var(--text-mute); } .searchbar { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 6px; } /* forms / modal ---------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 40; background: rgba(6, 10, 16, 0.45); display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 560px) { .overlay { align-items: center; } } .sheet { background: var(--surface); width: 100%; max-width: 560px; border-radius: 18px 18px 0 0; max-height: 92dvh; overflow: auto; padding: 16px 16px calc(20px + var(--safe-b)); } @media (min-width: 560px) { .sheet { border-radius: 18px; } } .sheet h3 { margin: 4px 0 14px; font-size: 17px; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 5px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); } .field textarea { min-height: 64px; resize: vertical; } .field .hint { font-size: 11px; color: var(--text-mute); margin-top: 4px; } .row2 { display: flex; gap: 10px; } .row2 > * { flex: 1; } .sheet-actions { display: flex; gap: 8px; margin-top: 16px; } .sheet-actions .spacer { flex: 1; } .ac-wrap { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 3; max-height: 200px; overflow: auto; } .ac-list div { padding: 9px 11px; cursor: pointer; } .ac-list div:hover { background: var(--surface-2); } .days-pick { display: flex; gap: 4px; } .days-pick label { flex: 1; text-align: center; border: 1px solid var(--border); border-radius: 9px; padding: 7px 0; font-size: 12px; text-transform: none; letter-spacing: 0; cursor: pointer; color: var(--text-dim); } .days-pick input { display: none; } .days-pick input:checked + span { font-weight: 700; color: var(--accent); } /* aparência (tema + cor) ------------------------------------------------- */ .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; } .swatch.active { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); } #toast-root { position: fixed; left: 0; right: 0; bottom: calc(84px + var(--safe-b)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .toast { background: #111827; color: #fff; padding: 9px 15px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); } .toast.err { background: var(--danger); } /* login ---------------------------------------------------------------- */ .login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .login form { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: 100%; max-width: 340px; box-shadow: var(--shadow); } .login h1 { margin: 0 0 4px; font-size: 22px; } .login p { margin: 0 0 18px; color: var(--text-mute); font-size: 13px; }