/* ============================================================================= ANJ Construction — single stylesheet for every page. Plain CSS, no build step. DESIGN LANGUAGE — "warm, premium, calm": A softly blushed warm canvas, white cards floating on soft layered shadows, and a confident red brand accent. The look is deliberately spacious and unhurried — generous whitespace, a real type scale, and quiet motion — so it reads as considered, not busy. Money meaning never changes: profit is always green, debt/overdraw always red (the brand red and the money red share a family on purpose; green stays the only "good" signal). HOW THIS FILE IS ORGANIZED (top to bottom): 1. Design tokens — every color / space / radius / shadow as a var 2. Base + reset — body, typography baseline, animations 3. App navigation — the shared top bar 4. Buttons + focus — the shared interaction model 5. Page scaffolding — container, page headings, toolbars 6. Jobs list — summary strip + table + status pills 7. Job detail — header, summary cards, line-item sections 8. Forms + dialogs — inputs, native , fields 9. Invoice — on-screen + @media print 10. Login — the centered card 11. Reportes — filter bar + chart cards 12. Worker payments — weekly cards 13. Toasts + confirm modal — the ui.js feedback layer 14. Mobile layer — one breakpoint that adapts everything 15. Reduced motion — accessibility opt-out The single source of truth for any value is its token in :root. We never hard-code a color further down — change the token once, the whole app follows. ============================================================================= */ /* Type. Plus Jakarta Sans gives the UI a little more character than the system default without ever sacrificing legibility. We always list a full system fallback after it, so if the font fails to load (offline) the app still looks intentional rather than broken. The that fetches it lives in each page's . */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------------------------- */ :root { /* — Surfaces: a warm, layered neutral stack (darkest canvas → brightest card), tinted a breath toward the red brand so the neutrals feel chosen */ --bg: #f7efec; /* page canvas — warm blush sand, not a cold grey */ --bg-deep: #f1e5e0; /* used in gradients to give the canvas depth */ --surface: #ffffff; /* cards, nav, table bodies */ --surface-2: #fbf6f3; /* table headers, hovers, quiet panels */ --surface-sunk: #f8f0ec; /* inset wells (e.g. inline add-row forms) */ --border: #ecddd6; /* warm hairline border */ --border-strong:#ddc9c0; /* a heavier divider when one hairline isn't enough */ /* — Ink: warm-toned text so it sits naturally on the warm canvas */ --text: #2b2421; /* near-black, warm */ --text-muted: #74655f; /* secondary text, labels */ --text-subtle: #7e6d66; /* placeholders, faint captions — kept dark enough to clear WCAG AA (~4.8:1 on white) since these placeholders carry the only hint on inline forms */ /* — Brand: a warm true red. --primary is deep enough to pass AA with white text on buttons; --accent is the brighter decorative version for edges, icons, and tints where text contrast doesn't apply. */ --primary: #c0231d; --primary-hover: #a31d18; --primary-press: #8c1914; --accent: #e03a30; --accent-soft: #fce8e6; /* red wash for tinted backgrounds / active pills */ --accent-ring: rgba(224, 58, 48, 0.16); /* focus glow */ --gold: #c98a3a; /* warm secondary, used sparingly (brand mark) */ /* — Semantic money colors (meaning is fixed; never restyle these away) */ --positive: #1f7a46; --positive-soft: #e7f3ec; --negative: #b3261e; --negative-soft: #fbe9e6; /* — Status badge palettes (warm-compatible tints) */ --warn-bg: #fbeccb; --warn-text: #8a5a12; --info-bg: #dde8f4; --info-text: #2f5a8f; --success-bg: #dcefe2; --success-text: #1c6b3f; --neutral-bg: #ece0da; --neutral-text: #6e5c55; /* — Spacing scale (4px base). Using a fixed scale keeps rhythm consistent and is the main lever behind the "spacious, not cluttered" feel. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* — Radii: a touch larger than before for a softer, modern silhouette */ --radius-sm: 9px; --radius: 13px; --radius-lg: 18px; --radius-pill: 999px; /* — Elevation: soft, warm-tinted, layered. Three resting depths + a focus glow. Warm shadow color (not pure black) keeps cards sitting on the blush canvas. */ --shadow-xs: 0 1px 2px rgba(66, 32, 26, 0.05); --shadow-sm: 0 1px 2px rgba(66, 32, 26, 0.04), 0 3px 10px rgba(66, 32, 26, 0.05); --shadow-md: 0 4px 14px rgba(66, 32, 26, 0.08), 0 14px 32px rgba(66, 32, 26, 0.07); --shadow-lg: 0 10px 30px rgba(66, 32, 26, 0.12), 0 30px 64px rgba(66, 32, 26, 0.12); /* — Motion: two curves. --ease for color/opacity, --spring for transforms so hovers feel a little alive without being bouncy or slow. */ --ease: 170ms cubic-bezier(0.4, 0, 0.2, 1); --spring: 240ms cubic-bezier(0.34, 1.3, 0.5, 1); --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nav-height: 66px; } /* --------------------------------------------------------------------------- 2. BASE + RESET --------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* The `hidden` attribute must always win — even over a component's own display. Lots of elements here (the summary strips, the reportes grid, the optional- fields toggle, the user pill) are shown/hidden by flipping .hidden in JS. Because we give those components an explicit display (flex / grid / inline- flex), that author rule would otherwise override the browser's [hidden] styling and they'd never actually hide. This one line keeps toggling robust. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); color: var(--text); font-size: 15px; line-height: 1.6; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* A barely-there warm glow at the top of the canvas adds depth without reading as decoration — the kind of quiet polish that lifts the whole app. */ background: radial-gradient(1200px 600px at 50% -280px, var(--surface-2) 0%, transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); background-attachment: fixed; } h1, h2, h3, h4 { font-weight: 700; } /* Numbers (money, dates) line up in columns when they share these utilities. */ .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .positive { color: var(--positive); font-weight: 700; } .negative { color: var(--negative); font-weight: 700; } /* — Entrance motion. Content rises and fades in gently so each page feels like it arrives rather than blinks into place. */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------------------- 3. APP NAVIGATION — the shared top bar (index / job-detail / reportes / trabajadores). It is sticky and lightly frosted so it stays available while the page scrolls, which keeps navigation a constant rather than something you scroll back up to find. --------------------------------------------------------------------------- */ .app-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-5); height: var(--nav-height); padding: 0 clamp(16px, 4vw, 40px); background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--border); /* Frosted-glass effect — pure progressive enhancement. Browsers without it just get the solid-ish white above, which is perfectly fine. */ backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } /* Brand lockup — the mark + wordmark act as one "home" link back to the jobs list. */ .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; } .brand-mark { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; /* Terracotta → clay → warm gold gives the tile real depth; the inner ring (inset shadow) and drop shadow make it read as a crafted object, not a box. */ background: linear-gradient(140deg, var(--accent) 0%, var(--primary) 55%, #8f2d1d 100%); box-shadow: 0 4px 12px rgba(176, 42, 30, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28); color: #fff; } .brand-mark svg { display: block; width: 22px; height: 22px; } .brand-word { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; } .brand-word b { color: var(--primary); font-weight: 800; } /* The primary destinations. Centered between brand and the user area. */ .nav-links { display: flex; align-items: center; gap: var(--space-1); margin: 0 auto; } .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color var(--ease), background var(--ease); } .nav-link svg { width: 17px; height: 17px; opacity: 0.85; } .nav-link:hover { color: var(--text); background: var(--surface-2); } /* The current page is marked with aria-current="page" in each page's HTML — styling hangs off that attribute so the markup stays semantic. */ .nav-link[aria-current="page"] { color: var(--primary); background: var(--accent-soft); } /* Right-hand cluster: an optional back link + the user pill. */ .nav-right { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; } /* Back link used on drill-in pages (job detail, invoice). */ .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color var(--ease), gap var(--ease); } .back-link:hover { color: var(--primary); gap: 9px; } /* User identity + logout, shown at the right edge of the nav. */ .user-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); } .user-pill .user-email { font-weight: 600; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-pill .logout-link { color: var(--primary); text-decoration: none; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill); transition: background var(--ease); } .user-pill .logout-link:hover { background: var(--accent-soft); } /* --------------------------------------------------------------------------- 4. BUTTONS + FOCUS — one shared interaction model: lift a hair on hover, press back down on click, and always show a crisp focus ring for keyboards. --------------------------------------------------------------------------- */ button { font: inherit; cursor: pointer; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(180deg, #be4530 0%, var(--primary) 100%); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(131, 42, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--spring), box-shadow var(--ease), filter var(--ease); } .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(131, 42, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(131, 42, 27, 0.3); } .btn-secondary { display: inline-flex; /* so and