/* OASIS OS — practical, functional dashboard. Light + dark. High contrast, readable. */ :root, :root[data-theme="light"] { --bg: #f2f4f6; --panel: #ffffff; --panel-2: #f7f9fa; --ink: #16232b; /* near-black, maximum readability */ --ink-2: #52616b; --ink-3: #869099; --line: #e2e7eb; --line-2: #edf0f3; --accent: #0f8a54; /* green — the one accent */ --accent-ink: #0c7247; --accent-soft: #e6f4ec; --coral: #d4433f; --coral-soft: #fbeceb; --amber: #b5771a; --amber-soft: #f8f0df; --blue: #2563d6; --blue-soft: #e8f0fd; --violet: #7c53d6; --shadow: 0 1px 2px rgba(22,35,43,.05), 0 1px 3px rgba(22,35,43,.04); } :root[data-theme="dark"] { --bg: #0f151a; --panel: #171f26; --panel-2: #1c252d; --ink: #eaf0f4; --ink-2: #a6b3bd; --ink-3: #6d7a84; --line: #29333c; --line-2: #1f272e; --accent: #2fb676; --accent-ink: #48c98a; --accent-soft: #102c1f; --coral: #e86560; --coral-soft: #33201f; --amber: #d29a3e; --amber-soft: #2f2914; --blue: #5b8def; --blue-soft: #14243f; --violet: #a986f0; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2); } * { margin: 0; padding: 0; box-sizing: border-box; } /* The `hidden` attribute MUST win. Class rules like `.shell{display:grid}` and `.login{display:flex}` otherwise override the UA `[hidden]{display:none}` (equal specificity → author wins), so BOTH the login and the app shell render at once — the login stops being a full page and the empty shell scrolls beneath it. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent-ink); text-decoration: none; font-weight: 500; } .mono, .num { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } /* ── shell ── */ .shell { display: grid; grid-template-columns: 234px 1fr; min-height: 100vh; } .sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 16px 12px; } .logo { font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -.01em; padding: 4px 8px 0; } .logo small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: 1px; } .nav { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; cursor: pointer; transition: background .1s, color .1s; } .nav a .ic { width: 18px; text-align: center; font-size: 14px; } .nav a:hover { background: var(--line-2); color: var(--ink); } .nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .nav .group { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 14px 10px 4px; } .who { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .who .name { font-weight: 700; font-size: 13.5px; } .who .role { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); margin-top: 1px; } .who-row { display: flex; gap: 6px; } .theme-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); border-radius: 8px; padding: 7px 10px; font-size: 15px; cursor: pointer; line-height: 1; } .theme-btn:hover { border-color: var(--accent); color: var(--ink); } .main { min-width: 0; padding: 20px 26px 56px; max-width: 1160px; } .pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .pagehead h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .pagehead .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; } .asof { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; } /* ── cards / kpi ── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); } .card.pad { padding: 18px 20px; } .card-h { padding: 13px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-h .t { font-weight: 700; font-size: 14px; } .section { margin-bottom: 18px; } .grid { display: grid; gap: 12px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); } .kpi .l { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); } .kpi .v { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi .v.mono { font-family: ui-monospace, monospace; font-size: 22px; } .kpi .h { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; } .kpi.pos .v { color: var(--accent-ink); } .kpi.warn .v { color: var(--amber); } .kpi.neg .v { color: var(--coral); } /* ── tables ── */ .tbl-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; } table.tbl tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover { background: var(--panel-2); } table.tbl td.r, table.tbl th.r { text-align: right; } table.tbl td.money { font-family: ui-monospace, monospace; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; } table.tbl td.dim { color: var(--ink-3); } table.tbl td.cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── tags / pills ── */ .tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; padding: 2px 8px; border-radius: 6px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; } .tag.green { background: var(--accent-soft); color: var(--accent-ink); } .tag.navy { background: var(--blue-soft); color: var(--blue); } .tag.coral { background: var(--coral-soft); color: var(--coral); } .tag.amber { background: var(--amber-soft); color: var(--amber); } .tag.blue { background: var(--blue-soft); color: var(--blue); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } .bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; display: flex; min-width: 110px; } .bar > i { height: 100%; display: block; border-radius: 999px; } /* ── buttons / inputs ── */ button, .btn { font-family: inherit; font-weight: 600; font-size: 13px; border-radius: 8px; padding: 8px 15px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; transition: opacity .12s, background .12s; } button:hover { opacity: .9; } button:active { transform: translateY(.5px); } button.ghost, .btn.ghost { background: var(--panel); color: var(--ink-2); border-color: var(--line); } button.ghost:hover { background: var(--line-2); color: var(--ink); } button.sm { padding: 6px 12px; font-size: 12px; } button:disabled { opacity: .5; cursor: default; } input { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 11px 13px; font-family: inherit; font-size: 15px; } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder { color: var(--ink-3); } label { display: block; margin: 12px 0 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .muted { color: var(--ink-3); font-size: 12.5px; } .empty { color: var(--ink-3); font-size: 13px; padding: 18px; text-align: center; } .ok-note { color: var(--accent-ink); font-size: 13px; padding: 8px 0; } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; } /* ── inbox ── */ .inbox-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; } .thr { padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer; margin-bottom: 8px; box-shadow: var(--shadow); transition: border-color .1s; } .thr:hover { border-color: var(--accent); } .thr.on { border-color: var(--accent); background: var(--accent-soft); } .thr .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .thr .c { font-weight: 700; font-size: 13px; } .thr .tm { font-size: 11px; color: var(--ink-3); white-space: nowrap; } .thr .subj { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thr .prev { font-size: 12px; color: var(--ink-3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bubbles { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; max-height: 62vh; overflow-y: auto; } .bub { max-width: 78%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.45; } .bub.IN { align-self: flex-start; background: var(--line-2); color: var(--ink); border-bottom-left-radius: 3px; } .bub.OUT { align-self: flex-end; background: var(--accent-soft); color: var(--accent-ink); border-bottom-right-radius: 3px; } .bub .who { font-size: 10px; color: var(--ink-3); margin-bottom: 3px; font-weight: 600; } .bub .when { font-size: 10px; color: var(--ink-3); margin-top: 4px; } .reply-box { border-top: 1px solid var(--line-2); padding: 12px 16px; display: flex; gap: 8px; align-items: center; } .reply-box input { flex: 1; } /* ── login ── */ .login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; width: 100%; max-width: 380px; box-shadow: 0 12px 44px rgba(22,35,43,.09); } .login-card .logo { padding: 0; font-size: 26px; } .login-card h1 { font-size: 20px; font-weight: 700; margin: 18px 0 4px; } .login-card button { width: 100%; margin-top: 18px; padding: 12px; font-size: 14px; } .login-err { color: var(--coral); font-size: 12.5px; margin-top: 12px; min-height: 16px; } /* ── toast ── */ #toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); background: var(--ink); color: var(--panel); font-weight: 600; font-size: 13px; padding: 11px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: all .22s; z-index: 60; box-shadow: 0 8px 28px rgba(0,0,0,.22); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── calendar month grid ── */ .cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cal-nav b { font-size: 15px; } .cal-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); } .cal-lg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-head { margin-bottom: 6px; } .cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: center; padding: 2px 0; } .cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 8px; padding: 5px; background: var(--panel); display: flex; flex-direction: column; gap: 3px; } .cal-cell.cal-off { background: transparent; border-color: transparent; } .cal-cell.cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .cal-d { font-size: 12px; font-weight: 700; color: var(--ink-2); } .cal-today .cal-d { color: var(--accent-ink); } .cal-ev { font-size: 10.5px; font-weight: 600; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-ev b { font-weight: 700; } .cal-more { font-size: 10px; color: var(--ink-3); padding-left: 3px; } .cal-cell { cursor: pointer; transition: box-shadow .1s; } .cal-cell:hover { box-shadow: 0 0 0 1px var(--accent); } .cal-cell.cal-sel { box-shadow: 0 0 0 2px var(--accent); } /* view bar */ .cal-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .cal-views { display: flex; gap: 6px; } /* week view */ .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-wk-col { border: 1px solid var(--line); border-radius: 9px; min-height: 220px; background: var(--panel); cursor: pointer; display: flex; flex-direction: column; } .cal-wk-col:hover { border-color: var(--accent); } .cal-wk-col.cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .cal-wk-h { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 8px 8px 6px; border-bottom: 1px solid var(--line-2); text-transform: uppercase; letter-spacing: .03em; } .cal-wk-h b { font-size: 15px; color: var(--ink); } .cal-wk-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; } .cal-wk-body .cal-ev { white-space: normal; } /* agenda view */ .cal-agenda { display: flex; flex-direction: column; } .cal-ag-day { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); } .cal-ag-day:last-child { border-bottom: 0; } .cal-ag-date { flex: none; width: 52px; text-align: center; } .cal-ag-date b { display: block; font-size: 22px; font-weight: 800; line-height: 1; } .cal-ag-date span { font-size: 11px; text-transform: uppercase; color: var(--ink-3); } .cal-ag-date small { display: block; font-size: 10px; color: var(--ink-3); } .cal-ag-date.is-today b { color: var(--accent-ink); } .cal-ag-evs { flex: 1; display: flex; flex-direction: column; gap: 5px; } .cal-ag-evs .cal-ev { white-space: normal; padding: 6px 10px; font-size: 12px; } @media (max-width: 820px) { .cal-week { grid-template-columns: 1fr; } .cal-wk-col { min-height: auto; } } @media (max-width: 700px) { .cal-cell { min-height: 62px; } .cal-ev { font-size: 9.5px; } } /* ── property drilldown ── */ .prop-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; box-shadow: var(--shadow); overflow: hidden; } .prop-card.open { border-color: var(--accent); } .prop-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; } .prop-hd:hover { background: var(--panel-2); } .prop-nm { font-weight: 700; font-size: 14px; } .prop-model { font-size: 11.5px; } .prop-next { margin-left: auto; font-size: 12px; } .prop-chev { color: var(--ink-3); width: 14px; text-align: center; } .prop-detail { padding: 4px 16px 16px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; } .pd-sec { } .pd-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 7px; } .pd-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; } .pd-row > span:first-child { font-weight: 600; } .pd-row > span:nth-child(2) { margin-left: auto; } .pd-kv { font-size: 13px; padding: 4px 0; } .pd-kv b { color: var(--ink-3); font-weight: 600; margin-right: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } /* ── earnings meter (Sebastián) ── */ .earn-card { background: linear-gradient(180deg, var(--accent-soft), var(--panel) 60%); } .earn-body { padding: 16px 18px 18px; } .earn-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .earn-num { font-size: 34px; font-weight: 800; color: var(--accent-ink); letter-spacing: -.02em; } .earn-of { color: var(--ink-2); font-size: 13px; } .earn-bar { position: relative; height: 26px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 12px; border: 1px solid var(--line); } .earn-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-ink)); border-radius: 999px; transition: width .5s ease; } .earn-pct { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 12px; color: var(--ink); } .earn-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; } .earn-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; } .earn-chip .ec-l { font-size: 11.5px; color: var(--ink-3); font-weight: 600; } .earn-chip .ec-v { margin-left: auto; font-weight: 700; font-size: 14px; } /* ── kanban task board ── */ .kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; } .kb-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; min-width: 0; } .kb-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); } .kb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .kb-n { margin-left: auto; background: var(--panel); border: 1px solid var(--line); color: var(--ink-3); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .kb-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 40px; } .kb-card { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; box-shadow: var(--shadow); } .kb-card.kb-done { opacity: .62; } .kb-t { font-weight: 600; font-size: 13px; line-height: 1.35; } .kb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .kb-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 11.5px; } .kb-btn { width: 100%; margin-top: 10px; } .kb-empty { color: var(--ink-3); font-size: 12px; text-align: center; padding: 12px 0; } @media (max-width: 900px) { .kanban { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } } /* ── cleaning schedule (Limpiezas) ── */ .sch-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .sch-day { border: 1px solid var(--line); border-radius: 9px; min-height: 130px; background: var(--panel-2); display: flex; flex-direction: column; } .sch-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .sch-dh { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 8px 9px 6px; border-bottom: 1px solid var(--line-2); text-transform: uppercase; letter-spacing: .03em; } .sch-dh b { color: var(--ink); } .sch-body { padding: 7px; display: flex; flex-direction: column; gap: 6px; } .sch-job { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 7px; padding: 7px 9px; } .sch-prop { font-weight: 600; font-size: 12.5px; line-height: 1.3; } .sch-meta { font-size: 11px; color: var(--ink-3); margin-top: 3px; } .sch-job { cursor: pointer; } .sch-job.open { border-color: var(--accent); } .sch-detail { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2); } .sch-info { display: flex; flex-direction: column; gap: 4px; } .sch-kv { font-size: 11.5px; line-height: 1.4; } .sch-kv b { color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; display: block; } select { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 10px 12px; font-family: inherit; font-size: 14px; } select:focus { outline: none; border-color: var(--accent); } @media (max-width: 820px) { .sch-week { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sch-week { grid-template-columns: 1fr; } .sch-day { min-height: auto; } } /* ── nav attention badge ── */ .nav-badge { margin-left: auto; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* ── global alert bar (overdue rent / high-severity, on every view) ── */ #alertbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } #alertbar:empty { display: none; } .alert { display: flex; align-items: center; gap: 10px; background: var(--coral-soft); border: 1px solid var(--coral); border-left-width: 4px; color: var(--ink); border-radius: 9px; padding: 10px 14px; font-size: 13px; cursor: pointer; } .alert:hover { filter: brightness(.99); } .alert-x { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } .alert b { font-weight: 700; } .alert-d { color: var(--ink-2); } .alert-amt { margin-left: auto; font-weight: 600; color: var(--coral); white-space: nowrap; } /* ── needs-attention list (cockpit) ── */ .att-card .card-h .tag { font-size: 11px; } .att-list { display: flex; flex-direction: column; } .att { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); } .att:last-child { border-bottom: 0; } .att-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); } .att-dot.coral { background: var(--coral); } .att-dot.amber { background: var(--amber); } .att-b { min-width: 0; flex: 1; } .att-t { font-weight: 600; font-size: 13.5px; } .att-d { font-size: 12px; color: var(--ink-3); margin-top: 2px; } .att-amt { font-weight: 600; font-size: 14px; white-space: nowrap; } .att.att-high .att-amt { color: var(--coral); } /* ── mobile topbar (identity + logout, since the sidebar is hidden on phones) ── */ .topbar { display: none; align-items: center; gap: 10px; margin-bottom: 14px; } .topbar-who { flex: 1; font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── responsive ── */ .menu-btn { display: none; } /* The menu backdrop is a fixed overlay, out of the grid flow, hidden by default. (If it isn't fixed+none it steals the first grid column and breaks the layout.) */ .backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 39; } @media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .inbox-grid { grid-template-columns: 1fr; } .sidebar { position: fixed; z-index: 40; width: 260px; height: 100vh; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 44px rgba(0,0,0,.2); } .sidebar.open { transform: translateX(0); } .main { padding: 16px; } .menu-btn { display: inline-flex; } .topbar { display: flex; } .backdrop.show { display: block; } } /* ═══ OSIRIS brand mark ══════════════════════════════════════════════ A ring over two horizon lines: reads as the "O", and as a sun above water. Strokes inherit the accent so it re-themes for free. */ .logo.lockup { display: flex; align-items: center; gap: 10px; } .logo .wm { display: block; line-height: 1.05; } /* The real OASIS palm. This used to be an SVG of an invented glyph — a circle over two bars — so the one mark people saw every day was not the company's. It is a tall portrait mark, so it is sized by HEIGHT and left narrow. */ .mark { width: auto; height: 30px; flex: none; display: block; } .logo.lg { justify-content: center; margin-bottom: 14px; } .logo.lg .mark { height: 46px; } .logo.lg { font-size: 24px; } .topbar-mark { display: none; } .topbar-mark .mark { height: 24px; } /* ═══ PULSO — portfolio stats ════════════════════════════════════════ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; box-shadow: var(--shadow); } .stat .sl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .stat .sv { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; } .stat .sh { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; } .stat.good .sv { color: var(--accent-ink); } .stat.warn .sv { color: var(--amber); } .stat.bad .sv { color: var(--coral); } .stat.link { cursor: pointer; transition: border-color .12s, transform .12s; } .stat.link:hover { border-color: var(--accent); transform: translateY(-1px); } /* Horizontal bar rows — income by type, lead sources, cleaner load. */ .bars { padding: 4px 2px; } .bar-row { display: grid; grid-template-columns: minmax(88px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; } .bar-row .bl { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-row .bt { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .bar-row .bf { height: 100%; border-radius: 4px; background: var(--accent); display: block; } .bar-row .bv { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .bar-row.c1 .bf { background: var(--blue); } .bar-row.c2 .bf { background: var(--violet); } .bar-row.c3 .bf { background: var(--amber); } .bar-row.c4 .bf { background: var(--coral); } /* Occupancy donut + delta chips. */ .donut-wrap { display: flex; align-items: center; gap: 18px; padding: 14px 16px; flex-wrap: wrap; } .donut { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); } .donut circle { fill: none; stroke-width: 13; } .legend { display: grid; gap: 6px; font-size: 12.5px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; } .delta { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; margin-left: 6px; } .delta.up { background: var(--accent-soft); color: var(--accent-ink); } .delta.down { background: var(--coral-soft); color: var(--coral); } .delta.flat { background: var(--line-2); color: var(--ink-3); } /* Provenance strip — never let a stale number look current. */ .prov { font-size: 11.5px; color: var(--ink-3); padding: 8px 2px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .prov b { color: var(--ink-2); font-weight: 600; } .prov .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; } .prov.stale .dot { background: var(--amber); } @media (max-width: 900px) { .topbar-mark { display: inline-flex; align-items: center; } } /* A locally-ticked task must never look like it changed the Sheet. */ .kb-note { font-size: 11px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; } .kb-note a { cursor: pointer; font-size: 11px; } /* ═══ Preguntar ══════════════════════════════════════════════════════ */ .qbox { display: flex; gap: 8px; padding: 14px 16px 4px; } .qbox input { flex: 1; margin: 0; } .qbox button { flex: none; white-space: nowrap; } .qsug { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 14px; } .chip { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; } .chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } .qsum { font-size: 15px; color: var(--ink); padding: 14px 16px; line-height: 1.5; } @media (max-width: 600px) { .qbox { flex-direction: column; } } /* Property detail: links out to Drive + maps, and a facts block. */ .pd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pd-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); } .pd-link:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } /* ═══ Cleaner job cards — everything needed to actually go ═══════════ */ .jobs { display: grid; gap: 10px; padding: 14px 16px; } .job { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); } .job-hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; } .job-nm { font-size: 15px; color: var(--ink); } .job-info { display: grid; gap: 3px; } .job-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* Archivo section switcher. */ .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════ DESIGN SYSTEM v2 — motion, depth, and a real button hierarchy. The old controls were flat 1px rectangles with an opacity hover: they read as unstyled OS widgets rather than a product. These override the base rules deliberately (loaded last) so the whole app lifts at once. ═══════════════════════════════════════════════════════════════════════ */ :root{ --ease: cubic-bezier(.4,0,.2,1); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); --lift: 0 1px 2px rgba(16,32,44,.06), 0 4px 12px -2px rgba(16,32,44,.10); --lift-lg: 0 2px 4px rgba(16,32,44,.06), 0 12px 28px -6px rgba(16,32,44,.16); --r: 10px; } :root[data-theme="dark"]{ --lift: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -2px rgba(0,0,0,.45); --lift-lg: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -6px rgba(0,0,0,.6); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ── buttons ─────────────────────────────────────────────────────────── */ button, .btn, .btn-sm { font-family: inherit; font-weight: 600; letter-spacing: -.005em; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), transform .1s var(--ease), color .16s var(--ease); -webkit-tap-highlight-color: transparent; text-decoration: none; line-height: 1.2; } button, .btn { font-size: 13.5px; padding: 9px 17px; background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(16,32,44,.10); } button:hover, .btn:hover { background: var(--accent-ink); box-shadow: var(--lift); opacity: 1; } button:active, .btn:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(16,32,44,.12); } button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); } button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } button.ghost, .btn.ghost { background: var(--panel); color: var(--ink-2); border-color: var(--line); box-shadow: none; } button.ghost:hover, .btn.ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--ink-3); box-shadow: var(--lift); } /* Destructive actions must not look like every other button. */ button.danger { background: var(--coral); color: #fff; } button.danger:hover { background: var(--coral); filter: brightness(.93); } button.sm, .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; } .btn-sm { background: var(--panel); color: var(--ink-2); border-color: var(--line); } .btn-sm:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); } /* ── inputs ──────────────────────────────────────────────────────────── */ input, select, textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); padding: 10px 13px; font-family: inherit; font-size: 14.5px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } select { cursor: pointer; } textarea { resize: vertical; min-height: 76px; line-height: 1.5; } /* ── surfaces ────────────────────────────────────────────────────────── */ .card { box-shadow: var(--lift); border-radius: 12px; transition: box-shadow .18s var(--ease); } .stat, .kpi { border-radius: 12px; } .stat.link:hover { box-shadow: var(--lift-lg); } .prop-card { transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } .prop-card:hover { box-shadow: var(--lift); } .prop-card.open { box-shadow: var(--lift-lg); } .tag { transition: background .14s var(--ease); } /* ── entrances ───────────────────────────────────────────────────────── */ @keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #view > * { animation: riseIn .28s var(--ease) both; } #view > *:nth-child(2) { animation-delay: .03s; } #view > *:nth-child(3) { animation-delay: .06s; } #view > *:nth-child(4) { animation-delay: .09s; } #view > *:nth-child(n+5) { animation-delay: .11s; } /* ── toast ───────────────────────────────────────────────────────────── */ #toast { border-radius: 11px; box-shadow: var(--lift-lg); transition: opacity .22s var(--ease), transform .22s var(--ease); } /* ── skeleton (replaces the bare "Cargando…" text) ───────────────────── */ @keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } .skel { height: 13px; border-radius: 6px; margin: 11px 0; background: linear-gradient(90deg, var(--line-2) 25%, var(--line) 37%, var(--line-2) 63%); background-size: 840px 100%; animation: shimmer 1.25s linear infinite; } .skel.w40 { width: 40%; } .skel.w70 { width: 70%; } .skel.tall { height: 46px; } /* ── nav ─────────────────────────────────────────────────────────────── */ .nav a { border-radius: 9px; transition: background .14s var(--ease), color .14s var(--ease), padding-left .14s var(--ease); } .nav a:hover { background: var(--line-2); padding-left: 14px; } .nav a.active { box-shadow: inset 2px 0 0 var(--accent); } /* ── board: drag targets read as targets ─────────────────────────────── */ .kb-col { transition: background .16s var(--ease), box-shadow .16s var(--ease); border-radius: 12px; } .kb-drop.kb-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .kb-hint { font-size: 11px; color: var(--ink-3); padding: 0 2px 8px; } .kb-card { transition: box-shadow .16s var(--ease), transform .12s var(--ease), opacity .16s var(--ease); } .kb-card[draggable="true"] { cursor: grab; } .kb-card[draggable="true"]:active { cursor: grabbing; } .kb-card:hover { box-shadow: var(--lift); transform: translateY(-1px); } .kb-dragging { opacity: .4; transform: rotate(1.4deg) scale(.98); } /* ── modal ───────────────────────────────────────────────────────────── */ .modal { border: 0; padding: 0; background: transparent; max-width: 520px; width: 92vw; } .modal::backdrop { background: rgba(10,20,28,.5); backdrop-filter: blur(2px); } .modal-in { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift-lg); overflow: hidden; animation: riseIn .2s var(--ease) both; } .modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 15px; } .modal-b { padding: 16px; } .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .edit-grid label { margin-top: 0; } @media (max-width: 520px) { .edit-grid { grid-template-columns: 1fr; } } /* ── notification centre ─────────────────────────────────────────────── */ .bell { position: relative; padding: 6px 10px; } .bell-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .notif-panel { position: fixed; top: 58px; right: 14px; width: min(370px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 90px)); z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift-lg); display: flex; flex-direction: column; overflow: hidden; animation: riseIn .18s var(--ease) both; } .notif-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); } .notif-h b { flex: 1; font-size: 14px; } .notif-b { overflow-y: auto; } .notif { padding: 12px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .14s var(--ease); border-left: 3px solid transparent; } .notif:hover { background: var(--panel-2); } .notif.unread { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); } .notif.unread.warn { border-left-color: var(--amber); } .notif.unread.urgent { border-left-color: var(--coral); } .notif-t { font-size: 13.5px; font-weight: 600; color: var(--ink); } .notif-x { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; } .notif-a { font-size: 11px; color: var(--ink-3); margin-top: 5px; } /* Shareable pedidos preview — you should see exactly what you're about to send. */ .share-pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 46vh; overflow-y: auto; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ OASIS BRAND THEME The app was generic-dashboard green on cold grey; the company is navy, mint, cream and coral (oasisliving.co, and the report engine already uses these exact tokens). Same palette across the marketing site, the owner PDFs and the internal tool means one company instead of three. Roles are deliberate: navy carries structure and text, mint-deep is the single interactive accent, cream warms the light theme, and coral is reserved for danger and lateness — never decoration, never a data series. ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --bg: #f2efe8; /* cream, dialed back so panels read as white */ --panel: #ffffff; --panel-2: #faf8f3; --ink: #032b44; /* OASIS navy */ --ink-2: #4a5a67; --ink-3: #61737f; /* darkened: #8a9ba8 measured 2.86:1 on white — muted text still has to be readable on a phone outdoors */ --line: #e2ddd2; --line-2: #eee9e0; --accent: #237a5b; /* mint, deepened until white button text clears 4.5:1 (the first pass measured 3.99 — large-text only) */ --accent-ink: #1d6349; --accent-soft: #e3f1e9; --coral: #e84c4c; --coral-soft: #fbeceb; --amber: #b5771a; --amber-soft: #f8f0df; --blue: #0a3a56; /* navy-soft — the site's secondary */ --blue-soft: #e7eef2; --violet: #6b5ca5; --shadow: 0 1px 2px rgba(3,43,68,.05), 0 1px 3px rgba(3,43,68,.04); --lift: 0 1px 2px rgba(3,43,68,.06), 0 4px 12px -2px rgba(3,43,68,.10); --lift-lg: 0 2px 4px rgba(3,43,68,.07), 0 12px 28px -6px rgba(3,43,68,.16); } :root[data-theme="dark"] { --bg: #071a26; /* deep navy rather than neutral charcoal */ --panel: #0d2836; --panel-2: #133243; --ink: #eaf2f6; --ink-2: #a9c0cd; --ink-3: #86a0ad; /* lightened: #6b8593 measured 3.93:1 on the dark panel */ --line: #1d4155; --line-2: #143140; --accent: #a4d4b0; /* the site's mint reads beautifully on navy */ --accent-ink: #bce3c5; --accent-soft: #12362c; --coral: #f4706f; --coral-soft: #3a1f22; --amber: #e0a54a; --amber-soft: #382c17; --blue: #7fb3cc; --blue-soft: #10303f; --violet: #a99ae0; } /* On dark, mint is a light colour — button text must flip to navy or it vanishes. */ :root[data-theme="dark"] button, :root[data-theme="dark"] .btn { color: #032b44; } :root[data-theme="dark"] button:hover, :root[data-theme="dark"] .btn:hover { color: #032b44; } :root[data-theme="dark"] button.ghost, :root[data-theme="dark"] .btn.ghost { color: var(--ink-2); } :root[data-theme="dark"] button.ghost:hover { color: var(--ink); } :root[data-theme="dark"] button.danger, :root[data-theme="dark"] .btn.danger { color: #fff; } /* Brand mark: navy ring with a mint horizon, matching the site's lockup. */ /* The mark is flat mint. On cream it needs to read as navy-ish artwork rather than a pale smudge, so the light theme darkens it; dark leaves it as drawn. */ :root[data-theme="light"] .mark { filter: brightness(.62) saturate(1.5); } /* Login: the one full-bleed brand moment in the app. */ .login { background: radial-gradient(1100px 520px at 50% -10%, rgba(164,212,176,.16), transparent 60%), linear-gradient(170deg, #032b44 0%, #0a3a56 58%, #06202f 100%); } .login-card { background: var(--panel); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 24px 64px -12px rgba(0,0,0,.45); border-radius: 16px; } .login .logo { color: var(--ink); } .login h1 { letter-spacing: -.02em; } /* Sidebar: a hairline of brand rather than a flat panel edge. */ .sidebar { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); } .nav a.active { box-shadow: inset 2px 0 0 var(--accent); } .logo .wm small { color: var(--accent-ink); letter-spacing: .14em; } /* Numbers are the product — give them the brand's display voice. */ .stat .sv, .kpi .v, .earn-num { font-family: 'Gilda Display', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.015em; } .pagehead h1 { font-family: 'Gilda Display', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.02em; } .card-h .t { letter-spacing: -.005em; } /* ── install prompt ──────────────────────────────────────────────────── */ /* Fixed navy, NOT var(--ink): in the dark theme --ink is near-white, so this bar rendered white text on a white slab and the message was invisible. A floating overlay needs a surface of its own, not one that inverts with the page. */ .install-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #032b44; color: #eaf2f6; border: 1px solid rgba(188,227,197,.18); padding: 12px 14px; border-radius: 13px; box-shadow: var(--lift-lg); font-size: 13.5px; animation: riseIn .3s var(--ease) both; } .install-bar span { flex: 1; min-width: 180px; line-height: 1.45; } .install-bar button.sm { background: #a4d4b0; color: #032b44; border-color: #a4d4b0; } .install-bar button.ghost { background: transparent; color: #b9cdd8; border-color: rgba(255,255,255,.25); } .install-bar button.ghost:hover { background: rgba(255,255,255,.08); color: #fff; } @media (min-width: 900px) { .install-bar { left: auto; right: 18px; max-width: 420px; } } /* Standalone: no browser chrome, so the app owns the notch and the home bar. */ @media (display-mode: standalone) { .topbar { padding-top: calc(10px + env(safe-area-inset-top)); } .main { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } } /* ── SCHEDULING ──────────────────────────────────────────────────────── Everything here is a tap target. The form it replaces asked people to "hold Ctrl to pick several" — on a phone, which has no Ctrl, and for a crew who schedule from a phone every single time. */ .pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; } .pickgrid.people { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .pick { position: relative; text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; cursor: pointer; min-height: 44px; transition: border-color .12s, background .12s, transform .08s; } .pick:hover { border-color: var(--ink-3); } .pick:active { transform: scale(.985); } .pick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .pick.on:after { content: "✓"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-weight: 700; } .pick .pv { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-top: 3px; } .dayrow { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: thin; } .daychip { flex: 0 0 auto; width: 50px; font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 7px 0 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: border-color .12s, background .12s; } .daychip .d { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .daychip .n { font-size: 17px; font-weight: 600; line-height: 1.1; } .daychip.today .d { color: var(--accent); font-weight: 700; } .daychip.on { background: var(--accent); border-color: var(--accent); } .daychip.on .d, .daychip.on .n { color: #fff; } :root[data-theme="dark"] .daychip.on .d, :root[data-theme="dark"] .daychip.on .n { color: #032b44; } .segrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; align-items: end; } .seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 8px; } .seg button { flex: 1; font: inherit; font-size: 13px; font-weight: 500; background: var(--panel); color: var(--ink-2); border: 0; padding: 11px 6px; cursor: pointer; min-height: 42px; border-right: 1px solid var(--line); } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--accent); color: #fff; font-weight: 600; } :root[data-theme="dark"] .seg button.on { color: #032b44; } .note-inline { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 13px; } button[disabled] { opacity: .45; cursor: not-allowed; } /* ── SCHEDULE CARDS ──────────────────────────────────────────────────── Two cleaners on one job is normal, so the crew is rendered as named dots rather than a single anonymous strip: "who is going" is the first thing anyone asks, including the cleaners themselves. */ .sch-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; } .sch-badges:empty { display: none; } .sch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } /* NOT `.who` — that class already exists further up with flex-direction:column, and inheriting it stacked the dot on top of the name. */ .crew { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--c); border: 0; padding: 0; margin: 0; } .crew:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; } .sch-job.tent { border-style: dashed; opacity: .82; } .sch-job.absent { border-left-color: var(--ink-3) !important; background: var(--panel-2); opacity: .9; } .sch-job.absent .sch-prop { color: var(--ink-2); font-style: italic; } .tag.violet { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); } /* "How do I get there" — the thing the crew were asking over WhatsApp. */ .gorow { display: flex; gap: 8px; margin-top: 10px; } .gobtn { flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; font-weight: 600; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 10px 8px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px; } .gobtn:hover { border-color: var(--accent); color: var(--accent-ink); } .sch-kv span { min-width: 0; overflow-wrap: anywhere; } /* ── MIS PAGOS ───────────────────────────────────────────────────────── The amount owed is the reason she opened this screen, so it is the biggest thing on it — and every total has the work behind it listed underneath. */ .owed { border-left: 3px solid var(--amber); } .owed.ok { border-left-color: var(--accent); } .owed-l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .owed-v { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; } .owed .owed-v { color: var(--amber); } .owed.ok .owed-v { color: var(--accent); } .owed-d { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; } .payrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-2); } .payrow.work { align-items: flex-start; } .payrow:first-of-type { border-top: 0; } /* ── AVISOS AL TELÉFONO ──────────────────────────────────────────────── Explain before asking. A permission prompt fired at someone who has not been told why gets denied, and a denial is permanent — the browser will never ask again and the only way back is the phone's settings. */ .push-card { border-left: 3px solid var(--accent); } .push-card.ok { border-left-color: var(--accent); opacity: .92; } .push-hd { display: flex; align-items: center; gap: 9px; font-size: 14.5px; } .push-i { font-size: 17px; line-height: 1; } .push-b { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-top: 7px; } /* ── HOY, FOR A CLEANER ─────────────────────────────────────────────────── Read outdoors, one-handed, in a hurry. Big type, big targets, and the day she is actually standing in taking up the top of the screen instead of being the third card down. Suren asked for "scrollable clouds" for the week: one tap-sized thing per day, swipeable, today first. If it scrolls it has to LOOK like it scrolls — the row is sized so the next card is always half-visible, and there is a fade on the trailing edge. */ .hoy-wrap { margin-top: 4px; } .hoy-hero { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift); padding: 16px 16px 14px; margin-bottom: 12px; } .hoy-hero + .hoy-hero { margin-top: -2px; } .hoy-hero.tent { border-style: dashed; } .hoy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .hoy-when { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); display: flex; align-items: baseline; gap: 8px; } .hoy-time { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink); } .hoy-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .hoy-prop { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 6px 0 3px; color: var(--ink); } .hoy-sub { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 12px; } .hoy-alone { color: var(--ink-3); } .hoy-note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 9px 12px; } /* Every target she taps with a thumb, outdoors: 44px minimum. */ .hoy-acts { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; } .hoy-acts > button, .hoy-acts > .btn { flex: 1 1 auto; min-height: 46px; min-width: 44px; font-size: 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .hoy-copy { width: 100%; min-height: 44px; margin-top: 8px; font: inherit; font-size: 13px; background: transparent; color: var(--ink-2); border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; } .hoy-copy:hover { border-color: var(--accent); color: var(--accent-ink); } .hoy-off .hoy-prop, .hoy-none .hoy-prop { color: var(--ink-2); font-size: 22px; } /* the week — scrollable clouds */ .hoy-week .card-h .muted { font-size: 11.5px; } .cloudrow { display: flex; gap: 9px; overflow-x: auto; padding: 12px 14px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* the fade IS the affordance: it says "there is more this way" */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); } .cloudrow::-webkit-scrollbar { display: none; } .cloud { flex: 0 0 auto; width: 118px; min-height: 92px; scroll-snap-align: start; font: inherit; text-align: left; cursor: pointer; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 1px; transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease); } .cloud:hover { border-color: var(--accent); } .cloud.on { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); } .cloud.is-today:not(.on) { border-color: var(--accent); } .cl-day { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); } .cl-num { font-size: 19px; font-weight: 700; line-height: 1.05; } .cl-prop { font-size: 12.5px; font-weight: 600; margin-top: 5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cl-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .cl-none, .cl-off { color: var(--ink-3); font-weight: 500; } .cloud.on .cl-day, .cloud.on .cl-meta, .cloud.on .cl-none, .cloud.on .cl-off { color: rgba(255,255,255,.82); } :root[data-theme="dark"] .cloud.on { color: #032b44; } :root[data-theme="dark"] .cloud.on .cl-day, :root[data-theme="dark"] .cloud.on .cl-meta, :root[data-theme="dark"] .cloud.on .cl-none, :root[data-theme="dark"] .cloud.on .cl-off { color: rgba(3,43,68,.72); } /* her money — three plain lines, no bookkeeping words */ .hoy-pay-b { padding: 6px 16px 16px; } .hp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; } .hp-row:last-of-type { border-bottom: 0; } .hp-row b { font-size: 17px; font-weight: 700; } .hp-pos b { color: var(--accent-ink); } .hp-soon span, .hp-soon b { color: var(--ink-2); } .hp-dim span, .hp-dim b { color: var(--ink-3); font-weight: 600; } .hoy-rule { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .cloudrow { scroll-behavior: auto; scroll-snap-type: none; } .cloud { transition: none; } .cloud.on { transform: none; } } /* `.cloud` and `.hoy-copy` are