/* Lectio Divina — custom styles on top of Tailwind */ [x-cloak] { display: none !important; } /* ───── Color tokens + dark mode (spec 0003) ───── Semantic CSS variables so dark mode is a matter of swapping tokens in one place, not hunting hardcoded hex values in ~50 rules. The `data-theme` attribute on is set synchronously in (before the first paint) so we never flash a light background at a dark-mode user. Media query listener in app.js reacts to the system changing while the app is open. Design of the dark palette: preserve the burgundy/gold identity of the brand — burgundy-black background, warm cream text, gold-brightened accent for CTAs. NOT gray-on-gray corporate. */ :root { /* Backgrounds */ --bg-page: #fdf6ec; /* cream — the app's canvas */ --bg-card: #ffffff; /* elevated cards */ --bg-card-soft: #faf3e3; /* subtle wash on hover */ --bg-header: #6b2c5c; /* burgundy — the app-header bar */ --bg-composer: rgba(253, 246, 236, 0.98); --bg-overlay: rgba(45, 27, 61, 0.4); /* backdrop behind sheets */ --bg-inverted: #6b2c5c; /* burgundy — for CTAs on light bg */ /* Text */ --text-body: #2d2d2d; /* ink */ --text-muted: rgba(45, 45, 45, 0.65); --text-heading: #6b2c5c; /* burgundy — h2/h3 in serif */ --text-on-brand: #fdf6ec; /* cream — text on burgundy header */ --text-on-accent: #1a1a2e; /* dark ink — text on gold pill */ /* Brand + accent */ --brand: #6b2c5c; --brand-strong: #4a1c40; --accent: #c89b3c; --accent-strong: #d4a94a; /* Borders + surfaces */ --border-card: #ece4d3; /* subtle cream border */ --border-subtle: rgba(107, 44, 92, 0.18); --border-strong: #6b2c5c; /* Shadows */ --shadow-card: 0 10px 30px -10px rgba(107, 44, 92, 0.25); --shadow-card-hover: 0 14px 44px -12px rgba(107, 44, 92, 0.35); --shadow-sheet: 0 -12px 40px -12px rgba(45, 27, 61, 0.3); /* Tints (brand color at low alpha — used for hover washes, borders) */ --tint-brand-05: rgba(107, 44, 92, 0.05); --tint-brand-08: rgba(107, 44, 92, 0.08); --tint-brand-12: rgba(107, 44, 92, 0.12); --tint-brand-18: rgba(107, 44, 92, 0.18); } :root[data-theme="dark"] { --bg-page: #1a0f18; /* burgundy-black canvas */ --bg-card: #2d1b2a; /* raised card surface */ --bg-card-soft: #3d2436; --bg-header: #2d1b2a; /* darker header — no bright bar */ --bg-composer: rgba(26, 15, 24, 0.96); --bg-overlay: rgba(0, 0, 0, 0.55); --bg-inverted: #c89b3c; /* gold CTA on dark */ --text-body: #f4e8d5; /* warm cream text */ --text-muted: rgba(244, 232, 213, 0.62); --text-heading: #d4a94a; /* gold headings on dark */ --text-on-brand: #f4e8d5; --text-on-accent: #1a0f18; --brand: #a26b8f; /* lighter burgundy for hits on dark */ --brand-strong: #c89b3c; --accent: #d4a94a; --accent-strong: #e4bf6a; --border-card: rgba(244, 232, 213, 0.1); --border-subtle: rgba(244, 232, 213, 0.15); --border-strong: #a26b8f; --shadow-card: 0 10px 30px -8px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 14px 44px -10px rgba(0, 0, 0, 0.6); --shadow-sheet: 0 -12px 40px -12px rgba(0, 0, 0, 0.6); --tint-brand-05: rgba(244, 232, 213, 0.05); --tint-brand-08: rgba(244, 232, 213, 0.08); --tint-brand-12: rgba(244, 232, 213, 0.12); --tint-brand-18: rgba(244, 232, 213, 0.16); } /* Base surfaces adopt the tokens. Anything not explicitly styled below inherits `--text-body` via cascade so paragraph text swaps automatically. */ body.app-shell { background: var(--bg-page); color: var(--text-body); transition: background-color 0.25s ease, color 0.25s ease; } /* ───── App shell layout ───── Header sticky top, composer FIXED bottom with JS-controlled offset for the iOS keyboard. The chat is regular document flow with bottom padding equal to the composer's height so nothing hides behind it. Why not use 100dvh + flex with composer as a flex child? Because in iOS Safari — especially in installed PWA mode — `100dvh` doesn't reliably shrink when the keyboard opens. The visualViewport API is the only thing that knows the real visible region, so we steer the composer with it directly. */ .app-shell { min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Header is FIXED, not sticky. iOS Safari's momentum scroll causes sticky elements to jitter (subpixel misalignment during scroll deceleration). Fixed positioning is rock-solid across the same scroll, at the cost of reserving its height in .app-main below. */ .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)); } .app-main { /* Reserve room for the fixed header at the top and the fixed composer at the bottom so nothing hides behind either bar. */ padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: calc( var(--composer-height, 88px) + env(safe-area-inset-bottom, 0px) + 1rem ); } @media (min-width: 640px) { .app-header { height: calc(64px + env(safe-area-inset-top, 0px)); } .app-main { padding-top: calc(64px + env(safe-area-inset-top, 0px)); } } /* ───── Welcome (mode selection) ───── */ .welcome-section { /* Centre vertically in the space between header and (absent) composer. */ min-height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); min-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; } @media (min-width: 640px) { .welcome-section { min-height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); min-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); padding: 2.5rem 0; } } /* ───── Chat thread ───── Generous spacing so the conversation breathes — the chat is a contemplative companion, not a messaging app. */ .chat-thread { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 0 0.5rem; } .chat-row { display: flex; align-items: flex-start; gap: 0.5rem; /* Subtle fade + rise on appearance. Uses iOS' standard ease curve so bubbles enter with the same rhythm as the composer moves — the whole surface feels choreographed rather than pieced. */ animation: bubble-in 0.18s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .chat-row { animation: none; } } .chat-row--user { justify-content: flex-end; } .chat-row--bot { justify-content: flex-start; } /* Time separator inserted between message groups > 3 min apart. Keeps long conversations oriented without cluttering short ones. */ .time-separator { display: flex; align-items: center; justify-content: center; color: rgba(107, 44, 92, 0.45); font-size: 0.72rem; padding: 0.25rem 0; letter-spacing: 0.03em; animation: bubble-in 0.18s cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-reduced-motion: reduce) { .time-separator { animation: none; } } /* Marker inserted in the chat after a Modo Oración session ends so the conversation flow visually reflects the contemplative pause. */ .prayer-marker { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; font-size: 0.85rem; color: #6b2c5c; background: linear-gradient(135deg, rgba(200, 155, 60, 0.12), rgba(107, 44, 92, 0.06)); border: 1px solid rgba(200, 155, 60, 0.35); border-radius: 999px; padding: 0.5rem 1.1rem; margin: 0 auto; max-width: 90%; font-style: italic; line-height: 1.4; } .prayer-marker strong { font-style: normal; color: #6b2c5c; font-weight: 600; } .prayer-marker-word { display: inline-block; font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: #c89b3c; } /* ───── Crisis card ───── Shown when the user expresses suicidal / self-harm intent. Warm tones (not alarming red) but visually distinct from the regular conversation. The OS phone-call links are prominent tappable buttons so the user can reach a real person without leaving the page. */ .crisis-card { background: linear-gradient(135deg, #fff6f1, #ffeae0); border: 1px solid #d97757; border-radius: 16px; padding: 1.25rem 1.1rem 1rem; margin: 0.5rem 0; box-shadow: 0 4px 12px -4px rgba(217, 119, 87, 0.25); } .crisis-card-body { display: flex; flex-direction: column; gap: 0.75rem; } .crisis-card-icon { font-size: 1.75rem; text-align: center; } .crisis-card .message-body { color: #6b3a26; line-height: 1.65; font-size: 0.95rem; } .crisis-card .message-body strong { color: #b6452a; } .crisis-card-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .crisis-call { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: #d97757; color: #fff; text-decoration: none; padding: 0.75rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; min-height: 48px; transition: background 0.15s ease, transform 0.1s ease; } .crisis-call:hover { background: #b6452a; } .crisis-call:active { transform: scale(0.98); } /* The dove next to every assistant turn — not an "AI" avatar, a companion. */ .bot-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6b2c5c, #2d1b3d); color: #fdf6ec; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; margin-top: 0.15rem; } /* ───── Mode selection cards ───── */ .mode-card { background: #ffffff; border: 1px solid #ece4d3; border-radius: 16px; padding: 1.75rem 1.5rem; text-align: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Secondary modifier (spec 0004): applied to the two mode cards that sit UNDER the hero. Compressed padding + smaller type so they don't compete with the hero for visual weight. The full info fits in ≈ 60% of the original height. */ .mode-card--secondary { padding: 1.15rem 1rem 1.25rem; border-radius: 14px; } .mode-card:hover { border-color: #6b2c5c; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(107, 44, 92, 0.25); } .mode-card:active { transform: translateY(0); } /* ───── Chat bubbles ───── Visual hierarchy: the guide's voice is the protagonist (prose flowing on the cream background, no card chrome), and the user's voice is present but quiet — outline with a wash of the primary color, never a solid block. */ .user-bubble { background: rgba(107, 44, 92, 0.06); color: #6b2c5c; padding: 0.7rem 1rem; border-radius: 18px 18px 6px 18px; border: 1px solid rgba(107, 44, 92, 0.18); max-width: 80%; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .bot-bubble { background: transparent; border: none; padding: 0.25rem 0; border-radius: 0; max-width: calc(90% - 38px); box-shadow: none; color: #2d2d2d; } .message-body { line-height: 1.6; } .message-body p { margin-bottom: 0.6rem; } .message-body p:last-child { margin-bottom: 0; } .message-body strong { color: #6b2c5c; font-weight: 600; } .message-body em { color: #555; font-style: italic; } .message-body hr { border: none; border-top: 1px solid #eee5d3; margin: 0.75rem 0; } .message-body ul, .message-body ol { margin: 0.4rem 0 0.6rem 1.2rem; list-style: disc; } .message-body code { font-family: ui-monospace, monospace; background: #f5ecd9; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } /* ───── Scripture card (inline in chat bubbles) ───── When the guide proposes a Scripture, the LLM wraps it in [[ESCRITURA]] markers. The frontend parses the block and renders it as a styled card with a button that bridges to Modo Oración seeded with this passage. */ .scripture-card { background: linear-gradient(135deg, #faf3e3, #f5ecd9); border: 1px solid #c89b3c; border-radius: 14px; padding: 1rem 1.1rem 0.9rem; margin: 0.75rem 0 0.25rem; box-shadow: 0 2px 8px -4px rgba(200, 155, 60, 0.3); } .scripture-card .scripture-ref { font-family: 'Cormorant Garamond', serif; color: #6b2c5c; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.4rem; } .scripture-card .scripture-text { font-family: 'Cormorant Garamond', serif; color: #2d2d2d; font-size: 1.1rem; line-height: 1.55; font-style: italic; margin: 0 0 0.85rem; } .scripture-card .pray-button { display: inline-flex; align-items: center; gap: 0.45rem; background: #6b2c5c; color: #ffffff; border: none; border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 500; font-family: inherit; cursor: pointer; min-height: 40px; transition: background 0.15s ease, transform 0.1s ease; } .scripture-card .pray-button:hover { background: #4a1c40; } .scripture-card .pray-button:active { transform: scale(0.97); } /* ───── Download card ───── */ .download-card { background: linear-gradient(135deg, #faf3e3, #f5ecd9); border: 1px solid #c89b3c; border-radius: 12px; padding: 0.9rem 1rem; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease; } .download-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(200, 155, 60, 0.4); } /* ───── Share button (Web Share API) ───── Sits below the download card on .docx replies. Only rendered on browsers that accept files via navigator.share — see app.js. */ .share-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: #6b2c5c; color: #ffffff; border-radius: 12px; padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 500; min-height: 44px; transition: background 0.15s ease, transform 0.1s ease; } .share-button:hover { background: #4a1c40; } .share-button:active { transform: scale(0.98); } /* ───── Prayer mode entry card ───── Sits below the two existing mode cards on the welcome screen. Dark, serif title, gold accent — visually distinct so it reads as a different kind of practice, not "yet another chat button". */ .prayer-card { width: 100%; background: linear-gradient(135deg, #1a1a2e, #2d1b3d); color: #fdf6ec; border: 1px solid #6b2c5c; border-radius: 16px; padding: 1.75rem 1.5rem; text-align: center; cursor: pointer; position: relative; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .prayer-card h3 { color: #c89b3c; } .prayer-card p { color: rgba(253, 246, 236, 0.75); } .prayer-card:hover { border-color: #c89b3c; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(26, 26, 46, 0.55); } .prayer-card:active { transform: translateY(0); } /* Hero modifier (spec 0004): applied when this card is the home's primary entry. Extra padding, deeper shadow, and a subtle inner glow so it reads as "this is what the app is for", not "one option among three". */ .prayer-card--hero { padding: 2rem 1.75rem 2.25rem; box-shadow: 0 10px 40px -12px rgba(26, 26, 46, 0.35); min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .prayer-card--hero h3 { font-size: 1.75rem; line-height: 1.15; letter-spacing: 0.01em; } .prayer-card--hero:hover { box-shadow: 0 14px 44px -12px rgba(26, 26, 46, 0.5); } /* CTA pill inside the hero. Visually a next-step affordance — the whole card is still the tap target, but the pill signals "here's the verb". Filled dorado on the dark background pops without shouting. */ .prayer-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; background: #c89b3c; color: #1a1a2e; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1.2rem; border-radius: 999px; letter-spacing: 0.01em; transition: transform 0.15s ease, background 0.15s ease; } .prayer-card:hover .prayer-card-cta { background: #d4a94a; transform: translateY(-1px); } @media (max-width: 640px) { .prayer-card { padding: 1.5rem 1.25rem; min-height: 150px; } .prayer-card--hero { padding: 1.75rem 1.25rem 2rem; min-height: 200px; } .prayer-card--hero h3 { font-size: 1.5rem; } } /* ───── Prayer mode overlay (full-screen) ───── Takes over the entire viewport above the chat shell. Cream by default, switches to a dark cocoon during Contemplatio. */ .prayer-overlay { position: fixed; inset: 0; z-index: 100; background: #fdf6ec; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); /* Allow scrolling when the picker or a long Lectio doesn't fit in the viewport — iPhones SE / small Androids would otherwise clip the bottom controls with no way to reach them. */ overflow-y: auto; -webkit-overflow-scrolling: touch; transition: background 0.6s ease, color 0.6s ease; } .prayer-overlay--dark { background: #1a1a2e; color: #fdf6ec; } .prayer-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; } .prayer-loading-text { color: #6b2c5c; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; margin: 0; } .prayer-screen { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.5rem; } /* ───── Topic picker (the screen between tapping the 🕯️ card and the actual prayer session) ───── Tight by design — must fit on a 14" iPhone safe-area without relying on the overlay's overflow:auto fallback. */ .picker-screen { flex: 1; display: flex; flex-direction: column; padding: 0.75rem 1.25rem 1.25rem; } .picker-topbar { display: flex; justify-content: flex-end; padding: 0; } .picker-title { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; color: #6b2c5c; text-align: center; margin: 0.5rem 0 1rem; font-weight: 500; line-height: 1.25; } /* Two-chip pace selector above the topic list. Compact, outline by default, filled when active. The active state syncs to the theme's smart default when the user taps a topic — see startPrayerWithTheme. */ .pace-selector { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.1rem; } .pace-chip { font-family: inherit; font-size: 0.82rem; background: transparent; color: #6b2c5c; border: 1px solid #ece4d3; border-radius: 999px; padding: 0.4rem 0.85rem; cursor: pointer; min-height: 36px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pace-chip:hover { border-color: #6b2c5c; } .pace-chip--active { background: #6b2c5c; color: #fdf6ec; border-color: #6b2c5c; } /* Background-sound selector — same visual language as .pace-chip but with smaller chips so four fit comfortably in one row on iPhone Mini widths. Wraps to two rows if it has to; the flex-wrap keeps each chip's own padding intact. */ .sound-selector { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-bottom: 1.1rem; } .sound-chip { font-family: inherit; font-size: 0.78rem; background: transparent; color: #6b2c5c; border: 1px solid #ece4d3; border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; min-height: 32px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sound-chip:hover { border-color: #6b2c5c; } .sound-chip--active { background: #6b2c5c; color: #fdf6ec; border-color: #6b2c5c; } .topic-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .topic-chip { display: flex; align-items: center; gap: 0.8rem; background: #fff; border: 1px solid #ece4d3; border-radius: 14px; padding: 0.7rem 1rem; cursor: pointer; width: 100%; text-align: left; font-family: inherit; min-height: 48px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease; } .topic-chip:hover { border-color: #6b2c5c; transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(107, 44, 92, 0.25); } .topic-chip:active { transform: translateY(0); } .topic-chip-emoji { font-size: 1.4rem; flex-shrink: 0; } /* SVG icon container for the contemplative themes (spec 0008). The parent chip inherits `color: var(--brand)` via this class so inline SVGs with `stroke="currentColor"` pick up burgundy in light mode and lighter burgundy in dark — one rule, both themes. */ .topic-chip-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); width: 24px; height: 24px; } .topic-chip-svg { width: 22px; height: 22px; display: block; } .topic-chip-text { font-family: 'Cormorant Garamond', serif; color: #2d2d2d; font-size: 1.05rem; font-weight: 500; } .topic-chip.topic-random { background: linear-gradient(135deg, #1a1a2e, #2d1b3d); border-color: #6b2c5c; margin-top: 0.25rem; } .topic-chip.topic-random .topic-chip-text { color: #fdf6ec; } .topic-chip.topic-random:hover { border-color: #c89b3c; } /* Gospel-of-the-day chip — gold accent to signal "this is the reading the universal Church is praying today". */ .topic-chip.topic-gospel-today { background: linear-gradient(135deg, #faf3e3, #f5ecd9); border-color: #c89b3c; } .topic-chip.topic-gospel-today .topic-chip-text { color: #6b2c5c; } .topic-chip.topic-gospel-today:hover { border-color: #6b2c5c; } /* Icon inside the gospel-today chip: gold accent to echo the border and read as "special / liturgical". */ .topic-chip.topic-gospel-today .topic-chip-icon { color: #c89b3c; } /* Tiny credit line under the scripture reference for the gospel-of- the-day theme. Visually discreet — pastoral attribution, not a shout-out. */ .scripture-attribution { text-align: center; font-size: 0.7rem; font-style: italic; color: #8a7a55; margin: -1rem 0 1.25rem; letter-spacing: 0.02em; } .prayer-overlay--dark .scripture-attribution { color: rgba(253, 246, 236, 0.45); } /* Discreet hotline note shown inside the Acogida of sensitive themes. */ .safety-note { margin-top: 1.5rem; padding: 0.85rem 1rem; background: rgba(217, 119, 87, 0.08); border: 1px solid rgba(217, 119, 87, 0.3); border-radius: 12px; text-align: center; font-size: 0.78rem; line-height: 1.5; color: #8a4a30; } .safety-note a { color: #d97757; font-weight: 600; text-decoration: none; } .safety-note a:hover { text-decoration: underline; } .prayer-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0 1rem; } .phase-dots { display: flex; gap: 0.45rem; } .phase-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(107, 44, 92, 0.25); transition: background 0.4s ease; } .phase-dots .dot.active { background: #6b2c5c; } .prayer-overlay--dark .phase-dots .dot { background: rgba(253, 246, 236, 0.25); } .prayer-overlay--dark .phase-dots .dot.active { background: #c89b3c; } .prayer-close { background: none; border: none; color: #6b2c5c; font-size: 1.4rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .prayer-close:active { background: rgba(107, 44, 92, 0.08); } .prayer-overlay--dark .prayer-close { color: rgba(253, 246, 236, 0.7); } /* Lectio audio embed — used only for gospel_today when dominicos' day page carries a SoundCloud reading. Contained width so the iframe doesn't dominate the phone screen; hint underneath tells the user the flow (listen → Continuar). */ /* Right-side cluster on the prayer topbar: mute toggle + close. Kept as flex so the mute button can appear/disappear without nudging the close button around. */ .prayer-topbar-actions { display: flex; align-items: center; gap: 0.15rem; } .prayer-mute { background: none; border: none; color: #6b2c5c; font-size: 1.1rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .prayer-mute:active { background: rgba(107, 44, 92, 0.08); } .prayer-overlay--dark .prayer-mute { color: rgba(253, 246, 236, 0.7); } .phase-label { text-align: center; letter-spacing: 0.2em; font-size: 0.7rem; color: #c89b3c; text-transform: uppercase; margin: 0.5rem 0; font-weight: 600; } .scripture-ref { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: #6b2c5c; margin: 0 0 1.5rem; font-weight: 500; } .prayer-overlay--dark .scripture-ref { color: #c89b3c; } .prayer-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; } .prayer-text { font-family: 'Cormorant Garamond', serif; text-align: center; margin: 0; white-space: pre-line; } .prayer-text--scripture { font-size: 1.35rem; line-height: 1.6; font-weight: 500; color: #2d2d2d; } .prayer-text--question { font-size: 1.55rem; line-height: 1.5; font-style: italic; font-weight: 500; color: #2d2d2d; } .prayer-text--acogida { font-size: 1.25rem; line-height: 1.7; font-weight: 500; color: #2d2d2d; opacity: 0.85; max-width: 22ch; margin: 0 auto; } .prayer-text--word { /* Spec 0026: eco puede ser palabra sola o frase corta hasta ~60 caracteres. `clamp()` baja el tamaño en viewports angostos y en frases largas para que no desborde en iPhone SE. */ font-size: clamp(1.5rem, 6vw, 2.5rem); line-height: 1.3; color: #c89b3c; font-weight: 600; letter-spacing: 0.02em; max-width: 22ch; margin: 0 auto; } .prayer-bottom { text-align: center; padding: 1.25rem 0 0.5rem; } .listen-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(107, 44, 92, 0.1); color: #6b2c5c; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.85rem; margin-bottom: 0.9rem; } .prayer-overlay--dark .listen-pill { background: rgba(200, 155, 60, 0.15); color: #c89b3c; } .silence-indicator { display: inline-flex; align-items: center; gap: 0.5rem; color: #6b2c5c; opacity: 0.65; font-size: 0.9rem; margin-bottom: 0.9rem; } .prayer-overlay--dark .silence-indicator { color: rgba(253, 246, 236, 0.55); } .silence-indicator .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: gentle-pulse 3s ease-in-out infinite; } @keyframes gentle-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } .prayer-continue { display: block; margin: 0 auto; background: transparent; color: #6b2c5c; border: 1px solid #6b2c5c; border-radius: 999px; padding: 0.75rem 2.25rem; font-size: 0.95rem; font-family: inherit; cursor: pointer; letter-spacing: 0.05em; min-height: 44px; } .prayer-continue:active { transform: scale(0.97); } .prayer-overlay--dark .prayer-continue { color: #c89b3c; border-color: #c89b3c; } /* ───── Composer ───── */ .composer-input { flex: 1; resize: none; max-height: 200px; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid #ece4d3; background: #ffffff; font-family: inherit; /* 16px on mobile prevents iOS Safari's automatic zoom-on-focus. */ font-size: 16px; line-height: 1.5; color: #2d2d2d; transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; -webkit-appearance: none; appearance: none; } .composer-input:focus { border-color: #6b2c5c; box-shadow: 0 0 0 3px rgba(107, 44, 92, 0.15); } .composer-input:disabled { opacity: 0.6; cursor: not-allowed; } .send-button { background: #6b2c5c; color: #ffffff; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease; } .send-button:hover:not(:disabled) { background: #4a1c40; } .send-button:active:not(:disabled) { transform: scale(0.95); } .send-button:disabled { opacity: 0.4; cursor: not-allowed; } /* ───── Typing indicator ───── */ .typing-indicator { display: flex; align-items: center; gap: 5px; padding: 4px 0; } .typing-indicator span { display: block; width: 8px; height: 8px; background: #6b2c5c; border-radius: 50%; opacity: 0.4; animation: bounce 1.4s infinite ease-in-out; } .typing-indicator span:nth-child(2) { animation-delay: 0.15s; } .typing-indicator span:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { 0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; } 30% { transform: scale(1); opacity: 1; } } /* ───── Suggestion chips (empty Personal-mode chat) ───── Pastoral entry points for new users staring at a blank input. Sit under the bot's intro, aligned with the bubble (offset by avatar width). Disappear the moment the user types or taps a chip. */ .suggestion-chips { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.25rem 0 0.5rem 38px; /* 30px avatar + 8px gap */ max-width: calc(100% - 38px); } .suggestion-chip { background: #fff; border: 1px solid #ece4d3; border-radius: 999px; padding: 0.6rem 0.95rem; font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #6b2c5c; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; min-height: 44px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .suggestion-chip:hover { border-color: #6b2c5c; background: #faf3e3; } .suggestion-chip:active { transform: scale(0.98); } .suggestion-chip-emoji { font-size: 1.05rem; flex-shrink: 0; } /* Hospitable modifier (spec 0006): two-line chip with a serif title + Inter sub-line. Squarer corners so the sub-line has room without the pill's rounded ends squeezing it. Enough padding for the touch target to still exceed 44px on mobile. */ .suggestion-chip--hospitable { border-radius: 14px; padding: 0.7rem 1rem; align-items: flex-start; min-height: 60px; gap: 0.75rem; } .suggestion-chip--hospitable .suggestion-chip-emoji { font-size: 1.3rem; line-height: 1.1; margin-top: 0.1rem; } .suggestion-chip-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .suggestion-chip-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: #6b2c5c; line-height: 1.2; font-weight: 600; } .suggestion-chip-subtitle { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: rgba(45, 45, 45, 0.65); line-height: 1.35; font-weight: 400; } /* ───── Modo Oración loading skeleton ───── Shimmer animation as a perceived-speed nudge. The user sees the layout immediately; their brain reads it as "almost done painting" instead of "still waiting on the server". */ .prayer-skeleton { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.5rem; } .skel-close { width: 36px; height: 36px; border-radius: 8px; background: rgba(107, 44, 92, 0.08); } .skel-label { width: 55%; height: 12px; border-radius: 999px; margin: 1.25rem auto 1.75rem; background: linear-gradient( 90deg, rgba(200, 155, 60, 0.15), rgba(200, 155, 60, 0.35), rgba(200, 155, 60, 0.15) ); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } .skel-body { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; justify-content: center; padding: 0 0.5rem; } .skel-line { height: 16px; border-radius: 999px; background: linear-gradient( 90deg, rgba(107, 44, 92, 0.06), rgba(107, 44, 92, 0.16), rgba(107, 44, 92, 0.06) ); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } .skel-line--90 { width: 90%; margin: 0 auto; } .skel-line--80 { width: 80%; margin: 0 auto; } .skel-line--70 { width: 70%; margin: 0 auto; } .skel-line--60 { width: 60%; margin: 0 auto; } .skel-pill { width: 45%; height: 40px; border-radius: 999px; margin: 1.5rem auto 0; background: linear-gradient( 90deg, rgba(107, 44, 92, 0.1), rgba(107, 44, 92, 0.25), rgba(107, 44, 92, 0.1) ); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } @keyframes skel-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* ───── Contemplatio: share-your-word + end ───── */ .contemplatio-saying { color: rgba(253, 246, 236, 0.55); font-size: 0.82rem; font-style: italic; margin-bottom: 0.85rem; } .contemplatio-actions { display: flex; gap: 0.6rem; justify-content: center; } .contemplatio-share { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: #c89b3c; color: #1a1a2e; border: none; border-radius: 999px; padding: 0.7rem 1.25rem; font-family: inherit; font-size: 0.95rem; font-weight: 600; min-height: 44px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .contemplatio-share:hover { background: #b08530; } .contemplatio-share:active { transform: scale(0.98); } .contemplatio-end { padding: 0.7rem 1.5rem; } /* ── Contemplatio note (spec 0019) ─────────────────────────────── Optional textarea que se abre entre el caption y las acciones cuando el usuario tapea "📝 Anotar". Diseñado para leerse contemplativo, no clínico: serif suave sobre superficie oscura, sin bordes duros, sin sombras. */ .contemplatio-note { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 auto 0.85rem; max-width: 420px; padding: 0 0.5rem; } .contemplatio-note-prompt { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: rgba(253, 246, 236, 0.75); font-style: italic; text-align: left; } .contemplatio-note-input { background: rgba(253, 246, 236, 0.06); border: 1px solid rgba(253, 246, 236, 0.18); border-radius: 10px; color: #fdf6ec; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; line-height: 1.5; padding: 0.7rem 0.85rem; min-height: 84px; resize: none; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .contemplatio-note-input::placeholder { color: rgba(253, 246, 236, 0.4); font-style: italic; } .contemplatio-note-input:focus { border-color: rgba(200, 155, 60, 0.6); background: rgba(253, 246, 236, 0.08); } .contemplatio-note-counter { font-size: 0.75rem; color: rgba(253, 246, 236, 0.5); text-align: right; font-variant-numeric: tabular-nums; } /* Toggle button lives on the contemplatio-actions row alongside Share and Terminar. Neutral pill, discreet — not competing with the gold "Compartir" or the primary "Terminar". */ .contemplatio-note-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: transparent; color: #fdf6ec; border: 1px solid rgba(253, 246, 236, 0.28); border-radius: 999px; padding: 0.7rem 1.15rem; font-family: inherit; font-size: 0.95rem; min-height: 44px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .contemplatio-note-toggle:hover { background: rgba(253, 246, 236, 0.08); border-color: rgba(253, 246, 236, 0.5); } .contemplatio-note-toggle--active { background: rgba(253, 246, 236, 0.12); border-color: rgba(253, 246, 236, 0.55); } /* ───── End-of-session feedback widget ───── One component, two mount points: inside the Contemplatio screen (dark overlay — see the --dark modifier) and in place of the composer when a Reflexión Personal chat is closed via "Nuevo". */ .feedback-widget { text-align: center; } .feedback-prompt { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: #6b2c5c; margin: 0 0 0.75rem; } .feedback-options { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .feedback-option { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; border: 1px solid #ece4d3; border-radius: 999px; padding: 0.6rem 1.05rem; font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #6b2c5c; cursor: pointer; min-height: 44px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .feedback-option:hover { border-color: #6b2c5c; background: #faf3e3; } .feedback-option:active { transform: scale(0.97); } .feedback-comment { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .feedback-comment-label { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #6b2c5c; } .feedback-comment textarea { width: 100%; max-width: 28rem; resize: none; padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid #ece4d3; font-family: inherit; font-size: 0.95rem; color: #2d2d2d; background: #fff; } .feedback-comment textarea:focus { outline: none; border-color: #6b2c5c; } .feedback-send { background: #c89b3c; color: #1a1a2e; border: none; border-radius: 999px; padding: 0.55rem 1.5rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; min-height: 40px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .feedback-send:hover { background: #b08530; } .feedback-send:active { transform: scale(0.97); } .feedback-thanks { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: #6b2c5c; margin: 0; } /* Dark modifier: mounted inside the Contemplatio screen, whose background is the same near-black cocoon as .prayer-overlay--dark. */ .feedback-widget--dark .feedback-prompt, .feedback-widget--dark .feedback-comment-label, .feedback-widget--dark .feedback-thanks { color: #c89b3c; } .feedback-widget--dark .feedback-option { background: transparent; border-color: #c89b3c; color: #c89b3c; } .feedback-widget--dark .feedback-option:hover { background: rgba(200, 155, 60, 0.12); } .feedback-widget--dark .feedback-comment textarea { background: rgba(253, 246, 236, 0.08); border-color: rgba(200, 155, 60, 0.5); color: #fdf6ec; } /* ───── Accessibility: reduced motion ───── Many pastoral users are older — vestibular sensitivity or just personal preference. Honour the OS-level reduce-motion setting: kill shimmer / pulse / typing dots / page transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .typing-indicator span, .silence-indicator .pulse, .mic-button.mic-active, .skel-line, .skel-label, .skel-pill { animation: none !important; opacity: 1; } } /* ───── Mobile tweaks ───── */ @media (max-width: 640px) { .user-bubble, .bot-bubble { max-width: 95%; } } /* ───── Composer bar ───── Fixed at the bottom of the visible viewport, NOT the document. --keyboard-inset is set by JS via visualViewport: it's the height currently occupied by the iOS keyboard (and its autofill bar). When the keyboard is closed, --keyboard-inset is 0 and the composer sits at the natural bottom, including the iPhone home-indicator safe area. */ .composer-bar { position: fixed; left: 0; right: 0; bottom: var(--keyboard-inset, 0px); z-index: 15; /* Near-opaque with a light blur — reads as one surface with the keyboard's own material. The previous 12px blur was expensive on older iPhones and caused jitter under scroll pressure; 6px is the visual sweet spot that still separates composer from thread. */ background: rgba(253, 246, 236, 0.98); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid #ece4d3; padding-bottom: env(safe-area-inset-bottom, 0px); /* Match iOS' native keyboard animation: 250 ms with the OS's own standard-out cubic-bezier. The composer looks welded to the top of the keyboard instead of chasing it. */ transition: bottom 0.25s cubic-bezier(0.32, 0.72, 0, 1); } /* "↓ Nuevo mensaje" pill — surfaces when a bot reply lands while the user is scrolled up reading earlier context. Tapping it jumps them to the bottom smoothly. Positioned just above the composer, both when the keyboard is closed and when it's open. */ .new-message-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc( var(--keyboard-inset, 0px) + var(--composer-height, 88px) + env(safe-area-inset-bottom, 0px) + 12px ); z-index: 14; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; background: #6b2c5c; color: #fdf6ec; border: none; border-radius: 999px; font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; box-shadow: 0 4px 16px rgba(107, 44, 92, 0.3); animation: bubble-in 0.2s cubic-bezier(0.32, 0.72, 0, 1); } .new-message-pill:active { transform: translateX(-50%) translateY(1px); } /* Retry action shown inside an error bubble so the user doesn't have to retype what they said. Compact tertiary button below the copy. */ .retry-button { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding: 0.35rem 0.75rem; background: transparent; border: 1px solid rgba(107, 44, 92, 0.3); border-radius: 999px; color: #6b2c5c; font-family: inherit; font-size: 0.8rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .retry-button:hover { background: rgba(107, 44, 92, 0.06); border-color: #6b2c5c; } .retry-button:active { background: rgba(107, 44, 92, 0.12); } /* Disable pull-to-refresh and overscroll bounce so users don't accidentally reload mid-conversation when they swipe down to scroll up. */ html, body { overscroll-behavior-y: contain; } /* Touch-friendly tap targets on mobile (min 44x44 per Apple HIG). */ @media (max-width: 640px) { .mode-card { min-height: 130px; padding: 1.25rem 1rem; } .send-button { width: 48px; height: 48px; } /* Smaller composer max-height on phones so it doesn't eat the chat. */ .composer-input { max-height: 100px; } } /* ───── Home "Más opciones" toggle + bottom sheet (spec 0007) ───── Modo Oración is the app's product; Acompañamiento (personal chat) and Comunidad (grupo) are services to it, hidden behind a discreet pull that mirrors iOS' native bottom-sheet pattern. */ .more-options-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 auto; padding: 0.6rem 1.1rem; background: transparent; border: 1px solid rgba(107, 44, 92, 0.18); border-radius: 999px; color: #6b2c5c; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; align-self: center; } .welcome-section > .more-options-toggle { /* The toggle is inline-flex by default, but inside the flex-column welcome-section we need to center it explicitly. */ align-self: center; } .more-options-toggle:hover { background: rgba(107, 44, 92, 0.06); border-color: #6b2c5c; } .more-options-toggle:active { transform: translateY(1px); } /* Sheet layers */ .more-sheet-backdrop { position: fixed; inset: 0; background: rgba(45, 27, 61, 0.4); z-index: 40; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: #fdf6ec; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 0.6rem 1.25rem 1.75rem; padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px -12px rgba(45, 27, 61, 0.3); max-height: 80vh; overflow-y: auto; } /* Slide-up / slide-down transition. Alpine reads these classes off the transition attributes; the JS handles the state. */ .more-sheet-enter-active, .more-sheet-leave-active { transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .more-sheet-enter-from, .more-sheet-leave-to { transform: translateY(100%); } .more-sheet-enter-to, .more-sheet-leave-from { transform: translateY(0); } .more-sheet-grabber { width: 44px; height: 4px; border-radius: 999px; background: rgba(45, 27, 61, 0.18); margin: 0 auto 0.75rem; } .more-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } .more-sheet-title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; color: #6b2c5c; letter-spacing: 0.01em; } .more-sheet-close { width: 36px; height: 36px; border-radius: 999px; background: rgba(107, 44, 92, 0.06); border: none; color: #6b2c5c; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .more-sheet-close:hover { background: rgba(107, 44, 92, 0.12); } .more-sheet-subtitle { color: rgba(45, 27, 61, 0.65); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; } .more-sheet-items { display: flex; flex-direction: column; gap: 0.6rem; } .more-sheet-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; background: #ffffff; border: 1px solid #ece4d3; border-radius: 14px; text-align: left; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .more-sheet-item:hover { border-color: #6b2c5c; transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(107, 44, 92, 0.2); } .more-sheet-item:active { transform: translateY(0); } .more-sheet-item-icon { font-size: 1.75rem; flex-shrink: 0; } .more-sheet-item-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; } .more-sheet-item-title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: #6b2c5c; } .more-sheet-item-subtitle { color: rgba(45, 27, 61, 0.65); font-size: 0.85rem; line-height: 1.4; } .more-sheet-item-chevron { color: rgba(107, 44, 92, 0.4); font-size: 1.1rem; flex-shrink: 0; } /* ───── Onboarding as initiation (spec 0005) ───── Full-screen overlay shown on the very first visit. Three panels with dots + optional swipe. Skippable. CTA lands in the Modo Oración topic picker so the first act of a new user is entering the practice, not another choice screen. */ .onboarding-overlay { position: fixed; inset: 0; z-index: 100; background: #fdf6ec; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); /* Alpine's `.opacity` transition fades panels; the shell itself stays visible for the duration of onboarding. */ } .onboarding-topbar { display: flex; justify-content: flex-end; padding: 0.5rem 1rem 0; } .onboarding-skip { background: transparent; border: none; color: rgba(107, 44, 92, 0.7); font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; padding: 0.6rem 1rem; cursor: pointer; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .onboarding-skip:hover { color: #6b2c5c; background: rgba(107, 44, 92, 0.05); } .onboarding-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; min-height: 0; } .onboarding-panel { max-width: 380px; width: 100%; text-align: center; } .onboarding-illustration { width: 96px; height: 106px; color: #6b2c5c; margin: 0 auto 1.5rem; } .onboarding-illustration svg { width: 100%; height: 100%; } .onboarding-title { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; color: #6b2c5c; line-height: 1.2; margin-bottom: 0.9rem; letter-spacing: 0.005em; } .onboarding-subtitle { color: #2d2d2d; font-size: 1rem; line-height: 1.65; margin: 0 auto 1rem; max-width: 340px; } .onboarding-body-text { color: #2d2d2d; font-size: 0.95rem; line-height: 1.7; margin: 0 auto 0.75rem; max-width: 340px; } .onboarding-body-text:last-of-type { color: rgba(45, 45, 45, 0.75); } .onboarding-cta { display: inline-flex; align-items: center; gap: 0.35rem; background: #6b2c5c; color: #fdf6ec; border: none; padding: 0.9rem 1.9rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 1.25rem; box-shadow: 0 6px 20px -8px rgba(107, 44, 92, 0.5); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .onboarding-cta:hover { background: #4a1c40; transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(107, 44, 92, 0.55); } .onboarding-cta:active { transform: translateY(0); } .onboarding-privacy-link { display: block; margin-top: 1rem; color: rgba(107, 44, 92, 0.7); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; } .onboarding-privacy-link:hover { color: #6b2c5c; } .onboarding-dots { display: flex; justify-content: center; gap: 0.5rem; padding: 1rem 0 1.5rem; } .onboarding-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(107, 44, 92, 0.22); padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease; } .onboarding-dot--active { background: #6b2c5c; width: 20px; } /* Compact viewports: SE at 375×667 must fit without body scroll. */ @media (max-height: 700px) { .onboarding-illustration { width: 78px; height: 88px; margin-bottom: 1rem; } .onboarding-title { font-size: 1.65rem; margin-bottom: 0.6rem; } .onboarding-subtitle, .onboarding-body-text { font-size: 0.92rem; } .onboarding-cta { padding: 0.75rem 1.6rem; margin-top: 0.9rem; } .onboarding-dots { padding: 0.6rem 0 1rem; } } /* ───── "Continuar de ayer" card (spec 0024) ───── Personalised invitation shown between the tagline and the hero when the user completed a session in the last 48h. Discreet on purpose — must NOT compete visually with the hero card. Warm cream wash + gold accent for the word so it reads as a callback to the practice, not a growth-hack banner. */ .continue-card { position: relative; background: linear-gradient(135deg, var(--bg-card), var(--bg-card-soft)); border: 1px solid var(--border-card); border-left: 3px solid var(--accent); border-radius: 14px; padding: 1rem 2.25rem 1rem 1rem; /* right padding for the ✕ button */ } .continue-card-dismiss { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .continue-card-dismiss:hover { background: var(--tint-brand-08); color: var(--text-heading); } .continue-card-body { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; } .continue-card-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05rem; } .continue-card-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .continue-card-prefix { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.02em; } .continue-card-word { font-family: 'Cormorant Garamond', serif; /* clamp() — la palabra puede ser frase corta (spec 0026), debe bajar el tamaño en pantallas angostas para no desbordar. */ font-size: clamp(1.05rem, 4.5vw, 1.35rem); color: var(--accent); font-weight: 600; line-height: 1.25; } .continue-card-ref { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; } .continue-card-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .continue-card-primary { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-inverted); color: var(--text-on-brand); border: none; padding: 0.55rem 1.1rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease; } .continue-card-primary:hover { transform: translateY(-1px); } .continue-card-primary:active { transform: translateY(0); } .continue-card-secondary { background: transparent; border: none; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 0.82rem; padding: 0.55rem 0.85rem; cursor: pointer; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .continue-card-secondary:hover { color: var(--text-heading); background: var(--tint-brand-08); } /* ───── Mis Palabras — historial contemplativo (spec 0018) ───── Full-screen overlay above the app shell. The user reaches it via the "Más opciones" bottom sheet; from the list, tap a row to swap into the detail view (same overlay). "Volver a orar con esta palabra" hands off to `startPrayerWithPassage()`, closing the overlay along the way. */ .mis-palabras-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg-page); color: var(--text-body); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mis-palabras-enter-active { transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .mis-palabras-enter-from { opacity: 0; transform: translateY(8px); } .mis-palabras-enter-to { opacity: 1; transform: translateY(0); } .mis-palabras-screen { flex: 1; max-width: 640px; width: 100%; margin: 0 auto; padding: 0.5rem 1.25rem 1.5rem; display: flex; flex-direction: column; } .mis-palabras-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; min-height: 44px; } .mis-palabras-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--text-heading); letter-spacing: 0.01em; } .mis-palabras-close, .mis-palabras-back { width: 40px; height: 40px; border: none; background: var(--tint-brand-08); color: var(--text-heading); border-radius: 999px; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .mis-palabras-close:hover, .mis-palabras-back:hover { background: var(--tint-brand-12); } .mis-palabras-back { padding: 0 0.35rem; } .mis-palabras-subtitle { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0.25rem 0 1.25rem; } /* Empty state — first-time user who's not saved anything yet. */ .mis-palabras-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; gap: 0.5rem; } .mis-palabras-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .mis-palabras-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--text-heading); margin: 0; } .mis-palabras-empty-body { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 340px; } /* List — chronological descending. Each row is a two-column layout: the tap target (date + word + ref) + a discreet delete pill. */ .mis-palabras-list { display: flex; flex-direction: column; gap: 0.6rem; } .mis-palabras-row-wrap { display: flex; align-items: stretch; gap: 0.5rem; } .mis-palabras-row { flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.15rem 0.75rem; padding: 0.85rem 1rem; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; min-height: 60px; } .mis-palabras-row:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 14px -8px rgba(107, 44, 92, 0.25); } .mis-palabras-row:active { transform: translateY(0); } .mis-palabras-row-date { grid-row: 1; grid-column: 1; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; } .mis-palabras-row-word { grid-row: 2; grid-column: 1; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--text-heading); font-weight: 600; } .mis-palabras-row-ref { grid-row: 2; grid-column: 2; font-size: 0.8rem; color: var(--text-muted); align-self: end; } /* Note flag (spec 0019): sits on the date row, right side. Small emoji, no background — just a signal that "there's more inside this entry than the word". */ .mis-palabras-row-note-flag { grid-row: 1; grid-column: 2; font-size: 0.9rem; align-self: center; justify-self: end; line-height: 1; opacity: 0.75; } .mis-palabras-row-delete { width: 44px; border: 1px solid var(--border-card); background: transparent; color: var(--text-muted); border-radius: 12px; font-size: 1rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .mis-palabras-row-delete:hover { color: #b6452a; border-color: #b6452a; background: rgba(217, 119, 87, 0.06); } /* Detail — a single word rendered large + the passage + a contemplatio-style CTA that re-arranca a session with the same reference. */ .mis-palabras-detail-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 0; } .mis-palabras-detail-date { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; } .mis-palabras-detail-label { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.75rem; } .mis-palabras-detail-word { font-family: 'Cormorant Garamond', serif; /* Spec 0026: adapta a palabra o frase corta sin desbordar en pantallas angostas. */ font-size: clamp(1.5rem, 6vw, 2.4rem); color: var(--accent); line-height: 1.2; margin: 0.25rem 0 0.5rem; font-weight: 600; } .mis-palabras-detail-ref { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--text-heading); margin-top: 0.25rem; font-weight: 500; } .mis-palabras-detail-text { color: var(--text-body); font-size: 1rem; line-height: 1.7; margin-top: 0.75rem; white-space: pre-wrap; } /* Journal note block (spec 0019). Left rule (like a pull-quote) + serif face so it reads as "the user's own words" rather than scripture prose. `white-space: pre-wrap` preserves user line breaks. */ .mis-palabras-detail-note-wrap { margin-top: 1rem; padding-left: 0.85rem; border-left: 3px solid var(--brand); } .mis-palabras-detail-note { font-family: 'Cormorant Garamond', serif; color: var(--text-body); font-size: 1.05rem; line-height: 1.65; font-style: italic; margin-top: 0.35rem; white-space: pre-wrap; } .mis-palabras-detail-actions { padding: 1rem 0 0.5rem; } .mis-palabras-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-inverted); color: var(--text-on-brand); border: none; padding: 0.85rem 1.6rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; } .mis-palabras-primary:hover { transform: translateY(-1px); } .mis-palabras-primary:active { transform: translateY(0); } /* ───── Subtle mode indicator in the header (spec 0007) ───── Only visible while inside Acompañamiento or Comunidad. Reads as a soft pastel chip, not a nav crumb — reinforces context without competing with the brand. */ .mode-tag { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: rgba(253, 246, 236, 0.9); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════ Dark mode overrides (spec 0003) ═══════════════════════════════════════════════════════════════ Every rule below activates only when `` is set (either by the pre-render script reading `prefers-color-scheme`, or later by the matchMedia listener in app.js). Organized by surface family in the same order the user encounters them: shell → header → home → chat → composer → sheet → onboarding → prayer. */ /* ── Global shell + Tailwind color-utility overrides ── */ :root[data-theme="dark"] .bg-cream { background: var(--bg-page); } :root[data-theme="dark"] .text-ink { color: var(--text-body); } :root[data-theme="dark"] .text-gray-500, :root[data-theme="dark"] .text-gray-600 { color: var(--text-muted); } /* ── App header ── */ :root[data-theme="dark"] .app-header { background: var(--bg-header); } /* ── Home: hero card + secondary mode cards + more toggle ── */ /* prayer-card is dark by default (both themes) — brighten border in dark so the CTA pill's edge is legible against the darker page bg. */ :root[data-theme="dark"] .prayer-card { border-color: var(--brand); } :root[data-theme="dark"] .prayer-card:hover { border-color: var(--accent); } :root[data-theme="dark"] .mode-card { background: var(--bg-card); border-color: var(--border-card); color: var(--text-body); } :root[data-theme="dark"] .mode-card:hover { border-color: var(--brand); box-shadow: var(--shadow-card); } :root[data-theme="dark"] .mode-card h3 { color: var(--text-heading); } :root[data-theme="dark"] .mode-card p { color: var(--text-muted); } :root[data-theme="dark"] .more-options-toggle { background: transparent; border-color: var(--border-subtle); color: var(--text-heading); } :root[data-theme="dark"] .more-options-toggle:hover { background: var(--tint-brand-08); border-color: var(--brand); } /* ── Chat: bubbles, avatar, message body ── */ :root[data-theme="dark"] .user-bubble { background: var(--tint-brand-08); color: var(--text-heading); border-color: var(--border-subtle); } :root[data-theme="dark"] .bot-bubble { color: var(--text-body); } :root[data-theme="dark"] .message-body strong { color: var(--text-heading); } :root[data-theme="dark"] .message-body em { color: var(--text-muted); } :root[data-theme="dark"] .message-body hr { border-top-color: var(--border-card); } :root[data-theme="dark"] .message-body code { background: var(--bg-card); color: var(--text-body); } /* Time separator between messages */ :root[data-theme="dark"] .time-separator { color: var(--text-muted); } /* Retry button on error bubbles */ :root[data-theme="dark"] .retry-button { border-color: var(--border-subtle); color: var(--text-heading); } :root[data-theme="dark"] .retry-button:hover { background: var(--tint-brand-08); border-color: var(--brand); } /* ── Composer bar + input + send ── */ :root[data-theme="dark"] .composer-bar { background: var(--bg-composer); border-top-color: var(--border-card); } :root[data-theme="dark"] .composer-input { background: var(--bg-card); color: var(--text-body); border-color: var(--border-card); } :root[data-theme="dark"] .composer-input::placeholder { color: var(--text-muted); } /* New-message pill — brand accent stays; text stays warm on it */ :root[data-theme="dark"] .new-message-pill { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ── Suggestion chips (hospitalarios) ── */ :root[data-theme="dark"] .suggestion-chip { background: var(--bg-card); border-color: var(--border-card); color: var(--text-body); } :root[data-theme="dark"] .suggestion-chip:hover { border-color: var(--brand); background: var(--bg-card-soft); } :root[data-theme="dark"] .suggestion-chip-title { color: var(--text-heading); } :root[data-theme="dark"] .suggestion-chip-subtitle { color: var(--text-muted); } /* ── Bottom sheet "Más opciones" ── */ :root[data-theme="dark"] .more-sheet-backdrop { background: var(--bg-overlay); } :root[data-theme="dark"] .more-sheet { background: var(--bg-page); box-shadow: var(--shadow-sheet); } :root[data-theme="dark"] .more-sheet-title { color: var(--text-heading); } :root[data-theme="dark"] .more-sheet-subtitle { color: var(--text-muted); } :root[data-theme="dark"] .more-sheet-close { background: var(--tint-brand-08); color: var(--text-heading); } :root[data-theme="dark"] .more-sheet-close:hover { background: var(--tint-brand-12); } :root[data-theme="dark"] .more-sheet-grabber { background: rgba(244, 232, 213, 0.18); } :root[data-theme="dark"] .more-sheet-item { background: var(--bg-card); border-color: var(--border-card); } :root[data-theme="dark"] .more-sheet-item:hover { border-color: var(--brand); box-shadow: var(--shadow-card); } :root[data-theme="dark"] .more-sheet-item-title { color: var(--text-heading); } :root[data-theme="dark"] .more-sheet-item-subtitle { color: var(--text-muted); } :root[data-theme="dark"] .more-sheet-item-chevron { color: var(--text-muted); } /* ── Onboarding overlay ── */ :root[data-theme="dark"] .onboarding-overlay { background: var(--bg-page); } :root[data-theme="dark"] .onboarding-skip { color: var(--text-muted); } :root[data-theme="dark"] .onboarding-skip:hover { color: var(--text-heading); background: var(--tint-brand-08); } :root[data-theme="dark"] .onboarding-title { color: var(--text-heading); } :root[data-theme="dark"] .onboarding-subtitle, :root[data-theme="dark"] .onboarding-body-text { color: var(--text-body); } :root[data-theme="dark"] .onboarding-body-text:last-of-type { color: var(--text-muted); } :root[data-theme="dark"] .onboarding-illustration { color: var(--text-heading); } :root[data-theme="dark"] .onboarding-cta { background: var(--accent); color: var(--text-on-accent); } :root[data-theme="dark"] .onboarding-cta:hover { background: var(--accent-strong); } :root[data-theme="dark"] .onboarding-privacy-link { color: var(--text-muted); } :root[data-theme="dark"] .onboarding-privacy-link:hover { color: var(--text-heading); } :root[data-theme="dark"] .onboarding-dot { background: rgba(244, 232, 213, 0.22); } :root[data-theme="dark"] .onboarding-dot--active { background: var(--accent); } /* ── Modo Oración: overlay + inner text ── The prayer overlay was designed cream-light for the contemplative feel; contemplatio has its own dark variant. In dark mode the base overlay also swaps to burgundy-black so entering the practice from the dark app doesn't blast cream at the reader. */ :root[data-theme="dark"] .prayer-overlay { background: var(--bg-page); color: var(--text-body); } :root[data-theme="dark"] .prayer-loading-text { color: var(--text-heading); } :root[data-theme="dark"] .scripture-ref:not(.scripture-card .scripture-ref) { color: var(--accent); } :root[data-theme="dark"] .prayer-text--scripture, :root[data-theme="dark"] .prayer-text--question, :root[data-theme="dark"] .prayer-text--acogida { color: var(--text-body); } /* phase-label already uses gold (#c89b3c) — legible on dark. Word text also uses gold. No override needed for those. */ /* ── Modo Oración: topic picker, sound + pace chips ── */ :root[data-theme="dark"] .picker-screen { background: var(--bg-page); } :root[data-theme="dark"] .picker-title { color: var(--text-heading); } :root[data-theme="dark"] .topic-chip, :root[data-theme="dark"] .pace-chip, :root[data-theme="dark"] .sound-chip { background: var(--bg-card); border-color: var(--border-card); color: var(--text-body); } :root[data-theme="dark"] .topic-chip:hover, :root[data-theme="dark"] .pace-chip:hover, :root[data-theme="dark"] .sound-chip:hover { border-color: var(--brand); background: var(--bg-card-soft); } :root[data-theme="dark"] .pace-chip--active, :root[data-theme="dark"] .sound-chip--active { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); } /* Topic chip TEXT lives inside a nested `.topic-chip-text` span with its own hardcoded color — parent color doesn't inherit. Override the text elements explicitly for dark mode so titles are readable on the dark-burgundy chip surface. */ :root[data-theme="dark"] .topic-chip-text { color: var(--text-body); } /* The "Gospel of today" chip keeps its gold accent identity — but on a darker gradient bg so the gold text has contrast. */ :root[data-theme="dark"] .topic-chip.topic-gospel-today { background: linear-gradient(135deg, rgba(200, 155, 60, 0.18), rgba(107, 44, 92, 0.12)); border-color: var(--accent); } :root[data-theme="dark"] .topic-chip.topic-gospel-today .topic-chip-text { color: var(--accent); } /* Topic chip SVG icons in dark mode: default to the lighter burgundy (--brand in the dark palette). The gospel-today chip keeps its gold accent both in light and dark. Sizing survives from the base rule. */ :root[data-theme="dark"] .topic-chip-icon { color: var(--brand); } :root[data-theme="dark"] .topic-chip.topic-gospel-today .topic-chip-icon { color: var(--accent); } /* The "Sorpréndeme" chip is dark-gradient by design in both themes — light cream text on burgundy black. Keep as-is; already legible. Just ensure the border survives the base override. */ :root[data-theme="dark"] .topic-chip.topic-random { border-color: var(--brand); } :root[data-theme="dark"] .topic-chip.topic-random .topic-chip-text { color: var(--text-body); } /* ── Scripture card + prayer marker (dorado accents) ── */ :root[data-theme="dark"] .scripture-card { background: linear-gradient(135deg, rgba(200, 155, 60, 0.15), rgba(107, 44, 92, 0.15)); border-color: var(--accent); } :root[data-theme="dark"] .scripture-ref { color: var(--accent); } :root[data-theme="dark"] .scripture-text { color: var(--text-body); } :root[data-theme="dark"] .prayer-marker { background: linear-gradient(135deg, rgba(200, 155, 60, 0.15), rgba(107, 44, 92, 0.15)); border-color: rgba(200, 155, 60, 0.35); color: var(--text-heading); } :root[data-theme="dark"] .prayer-marker strong { color: var(--text-heading); } :root[data-theme="dark"] .prayer-marker-word { color: var(--accent); } /* ── Feedback widget ── */ :root[data-theme="dark"] .feedback-prompt { color: var(--text-body); } :root[data-theme="dark"] .feedback-option { background: var(--bg-card); border-color: var(--border-card); color: var(--text-body); } :root[data-theme="dark"] .feedback-option:hover { border-color: var(--brand); background: var(--bg-card-soft); } :root[data-theme="dark"] .feedback-comment textarea { background: var(--bg-card); color: var(--text-body); border-color: var(--border-card); } :root[data-theme="dark"] .feedback-comment textarea::placeholder { color: var(--text-muted); } :root[data-theme="dark"] .feedback-send { background: var(--brand); color: var(--text-on-brand); } /* ── Crisis card ── keep the warm terracotta identity but darken bg */ :root[data-theme="dark"] .crisis-card { background: linear-gradient(135deg, rgba(217, 119, 87, 0.15), rgba(217, 119, 87, 0.08)); border-color: #d97757; } :root[data-theme="dark"] .crisis-card .message-body { color: #f4c9b5; } :root[data-theme="dark"] .crisis-card .message-body strong { color: #f4c9b5; } /* crisis-call buttons stay full-orange in both themes — they're a help signal, not brand chrome. */ /* Reduce-motion friendly: opt out of the theme transition for users who prefer it. */ @media (prefers-reduced-motion: reduce) { body.app-shell { transition: none; } } /* ───── Legal pages (privacy + terms, spec 0012) ───── Standalone static pages. Reuse the app's design tokens so dark mode "just works" without dedicated overrides. Reading-first typography — max-width capped so lines don't stretch into discomfort. */ .legal-body { background: var(--bg-page); color: var(--text-body); min-height: 100vh; } .legal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-card); background: var(--bg-page); position: sticky; top: 0; z-index: 10; } .legal-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; color: var(--text-heading); text-decoration: none; letter-spacing: 0.01em; } .legal-back { color: var(--text-muted); font-size: 0.9rem; text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; } .legal-back:hover { color: var(--text-heading); background: var(--tint-brand-08); } .legal-page { max-width: 680px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; font-family: 'Inter', sans-serif; line-height: 1.65; color: var(--text-body); } .legal-title { font-family: 'Cormorant Garamond', serif; font-size: 2.25rem; color: var(--text-heading); margin: 1rem 0 0.4rem; line-height: 1.15; font-weight: 600; } .legal-updated { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 1.5rem; letter-spacing: 0.02em; } .legal-intro { font-size: 1.05rem; margin-bottom: 2rem; color: var(--text-body); } .legal-intro strong { color: var(--text-heading); } .legal-section { margin-bottom: 2rem; } .legal-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--text-heading); margin: 1.5rem 0 0.75rem; font-weight: 600; letter-spacing: 0.005em; } .legal-section h3 { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 1rem 0 0.5rem; font-weight: 600; } .legal-section p { margin: 0 0 0.75rem; } .legal-section ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; } .legal-section li { margin-bottom: 0.5rem; } .legal-section a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .legal-section a:hover { color: var(--brand-strong); } .legal-section strong { color: var(--text-heading); } .legal-section em { color: var(--text-body); font-style: italic; } .legal-section code { background: var(--tint-brand-08); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, monospace; } /* Crisis section in terms — subtly emphasized with a warm border so a reader in distress finds it fast. */ .legal-section--crisis { background: linear-gradient(135deg, rgba(217, 119, 87, 0.06), rgba(217, 119, 87, 0.02)); border-left: 3px solid #d97757; padding: 1rem 1rem 0.5rem 1.25rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0 2rem; } .legal-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-card); text-align: center; color: var(--text-muted); font-size: 0.9rem; } .legal-footer a { color: var(--brand); text-decoration: none; margin: 0 0.35rem; } .legal-footer a:hover { text-decoration: underline; } /* ───── Debug overlay (dev-only, ?debug=1) ───── Floating panel visible only when the URL carries ?debug=1. Exists so mobile users can share internal state without opening desktop devtools. Deliberately ugly-monospace so nobody mistakes it for production UI. */ .debug-overlay { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 9999; background: #1a1a1a; color: #f4e8d5; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8rem; padding: 0.75rem 1rem 1rem; max-height: 80vh; overflow-y: auto; border-bottom: 2px solid #c89b3c; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .debug-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .debug-title { color: #c89b3c; font-weight: 600; } .debug-close { background: transparent; border: 1px solid #444; color: #f4e8d5; font-size: 0.9rem; padding: 0.2rem 0.55rem; border-radius: 6px; cursor: pointer; } .debug-body { display: flex; flex-direction: column; gap: 0.35rem; } .debug-row { display: flex; gap: 0.5rem; align-items: baseline; } .debug-row--wide { flex-direction: column; align-items: flex-start; } .debug-key { color: #a26b8f; min-width: 8ch; } .debug-val { color: #f4e8d5; word-break: break-word; flex: 1; } .debug-divider { border: 0; border-top: 1px dashed #333; margin: 0.5rem 0; } .debug-json { background: #0d0d0d; color: #d4a94a; padding: 0.5rem; border-radius: 4px; font-size: 0.72rem; white-space: pre-wrap; margin: 0; width: 100%; overflow-x: auto; } .debug-action { background: #2d1b2a; color: #f4e8d5; border: 1px solid #6b2c5c; padding: 0.5rem 0.85rem; border-radius: 6px; cursor: pointer; margin-top: 0.5rem; font-family: inherit; font-size: 0.8rem; align-self: flex-start; } .debug-action--danger { border-color: #b6452a; color: #f4c9b5; } /* ═══ La Práctica overlay (spec 0034) ═════════════════════════════ Página read-only accesible desde "Más opciones ⌄" que explica la Lectio Divina. Mismo comportamiento de overlay que Mis Palabras (full-screen sobre el shell, scroll interno) pero con tipografía más contemplativa: serif para los párrafos largos, ancho de lectura acotado (~640 px), padding generoso. Sin telemetría más allá de `practica_open`. */ .practica-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.35); } .practica-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg-page); color: var(--text-body); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .practica-enter-active, .practica-leave-active { transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .practica-enter-from { opacity: 0; transform: translateY(10px); } .practica-enter-to { opacity: 1; transform: translateY(0); } .practica-leave-from { opacity: 1; transform: translateY(0); } .practica-leave-to { opacity: 0; transform: translateY(10px); } .practica-screen { flex: 1; max-width: 640px; width: 100%; margin: 0 auto; padding: 0.5rem 1.25rem 2.5rem; display: flex; flex-direction: column; } .practica-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0 1rem; min-height: 44px; position: sticky; top: 0; background: var(--bg-page); z-index: 1; } .practica-title { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; color: var(--text-heading); letter-spacing: 0.01em; margin: 0; } .practica-close { width: 40px; height: 40px; border: none; background: var(--tint-brand-08); color: var(--text-heading); border-radius: 999px; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .practica-close:hover { background: var(--tint-brand-12); } .practica-content { display: flex; flex-direction: column; gap: 1.25rem; } /* Serif family for long-form reading; the app is otherwise sans. */ .practica-intro, .practica-history, .practica-outro, .practica-step-text, .practica-quote-body { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; line-height: 1.65; color: var(--text-body); margin: 0; } .practica-intro { font-size: 1.2rem; font-style: italic; color: var(--text-heading); padding-bottom: 0.25rem; } .practica-section-heading { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--text-heading); margin: 0.5rem 0 0; letter-spacing: 0.01em; } .practica-section-heading--sub { font-size: 1.1rem; color: var(--text-muted); margin-top: 1rem; } .practica-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .practica-step { display: flex; gap: 0.85rem; padding: 1rem 1.1rem; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px; } .practica-step-index { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; background: var(--tint-brand-08); color: var(--text-heading); font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .practica-step-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; } .practica-step-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .practica-step-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--text-heading); } .practica-step-latin { font-size: 0.85rem; font-style: italic; color: var(--text-muted); letter-spacing: 0.03em; } .practica-step-text { font-size: 1.05rem; line-height: 1.6; } .practica-quote { margin: 0.25rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--brand); background: var(--tint-brand-08); border-radius: 0 10px 10px 0; display: flex; flex-direction: column; gap: 0.5rem; } .practica-quote-body { font-size: 1.15rem; font-style: italic; } .practica-quote-source { font-size: 0.85rem; color: var(--text-muted); font-family: 'Cormorant Garamond', serif; } .practica-further { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; } .practica-further li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; background: var(--bg-card-soft); border-radius: 10px; } .practica-further-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--text-heading); } .practica-further-body { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } /* ═══ Ajustes overlay (spec 0028) ══════════════════════════════════ Pantalla de configuración accesible desde "Más opciones ⌄". Cuatro secciones: idioma, tema, privacidad, datos. Todo con design tokens para heredar dark mode sin reglas extra. La estructura permite añadir nuevas secciones (notificaciones, sonido) sin re-diseñar. */ .ajustes-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.35); } .ajustes-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg-page); color: var(--text-body); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .ajustes-enter-active, .ajustes-leave-active { transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .ajustes-enter-from { opacity: 0; transform: translateY(10px); } .ajustes-enter-to { opacity: 1; transform: translateY(0); } .ajustes-leave-from { opacity: 1; transform: translateY(0); } .ajustes-leave-to { opacity: 0; transform: translateY(10px); } .ajustes-screen { flex: 1; max-width: 640px; width: 100%; margin: 0 auto; padding: 0.5rem 1.25rem 2.5rem; display: flex; flex-direction: column; } .ajustes-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0 1rem; min-height: 44px; position: sticky; top: 0; background: var(--bg-page); z-index: 1; } .ajustes-title { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; color: var(--text-heading); letter-spacing: 0.01em; margin: 0; } .ajustes-close { width: 40px; height: 40px; border: none; background: var(--tint-brand-08); color: var(--text-heading); border-radius: 999px; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ajustes-close:hover { background: var(--tint-brand-12); } .ajustes-content { display: flex; flex-direction: column; gap: 1.75rem; } .ajustes-section { display: flex; flex-direction: column; gap: 0.65rem; } .ajustes-heading { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--text-heading); margin: 0; letter-spacing: 0.01em; } .ajustes-note { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0.15rem 0 0; } /* Grupo de opciones tipo "chip radio" — idioma y tema. Layout con grid para que se distribuyan en el ancho disponible; en móvil dos opciones caen en 2 columnas, tres en 3. */ .ajustes-choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; } .ajustes-choice { padding: 0.7rem 0.85rem; border: 1px solid var(--border-card); background: var(--bg-card); color: var(--text-body); border-radius: 12px; font-size: 0.95rem; font-family: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; text-align: center; } .ajustes-choice:hover { border-color: var(--brand); } .ajustes-choice--active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } [data-theme="dark"] .ajustes-choice--active { color: var(--bg-page); } /* Filas tipo enlace (Privacidad) o botón peligroso (Datos). */ .ajustes-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; color: var(--text-body); text-decoration: none; font-family: inherit; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .ajustes-row:hover { border-color: var(--brand); } .ajustes-row--link { } .ajustes-row-label { flex: 1; text-align: left; } .ajustes-row-chevron { color: var(--text-muted); font-size: 0.95rem; margin-left: 0.75rem; } .ajustes-row--danger { border-color: #b6452a; color: #b6452a; background: transparent; } .ajustes-row--danger:hover { background: rgba(182, 69, 42, 0.08); } .ajustes-row--danger:disabled { opacity: 0.45; cursor: default; border-color: var(--border-card); color: var(--text-muted); background: transparent; } [data-theme="dark"] .ajustes-row--danger { color: #e08a70; border-color: #8a3a26; } /* ═══ Ritmo marker (spec 0020) ═════════════════════════════════════ Línea discreta bajo "Más opciones ⌄" que refleja las sesiones del mes en curso. Pequeña, muted, centrada — nunca compite con el hero. En cross de milestone (7/30/100 lifetime) gana un sufijo italic serif suave. Toggle On/Off desde Ajustes → Ritmo. */ .rhythm-marker { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem; max-width: 32rem; margin: -0.25rem auto 1rem; padding: 0 1rem; text-align: center; font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); letter-spacing: 0.01em; } .rhythm-marker-count { color: var(--text-muted); } .rhythm-marker-milestone { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--text-heading); font-size: 0.9rem; } [data-theme="dark"] .rhythm-marker-milestone { color: var(--accent); } /* ═══ Install card + install steps (spec 0029) ═════════════════════ Card en el home (patrón de continue-card, más sobrio) que invita a instalar la PWA. Solo aparece cuando el usuario ya rezó al menos una vez. Sección de Ajustes con la lista ordenada de pasos específicos por plataforma. */ .install-card { position: relative; margin: 1rem auto 0; max-width: 32rem; background: linear-gradient(135deg, var(--bg-card), var(--bg-card-soft)); border: 1px solid var(--border-card); border-left: 3px solid var(--brand); border-radius: 14px; padding: 1rem 2.25rem 1rem 1rem; } .install-card-dismiss { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .install-card-dismiss:hover { background: var(--tint-brand-08); color: var(--text-heading); } .install-card-body { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .install-card-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05rem; } .install-card-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .install-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--text-heading); font-weight: 600; line-height: 1.25; } .install-card-subtitle { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; } .install-card-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .install-card-primary { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-inverted); color: var(--text-on-brand); border: none; padding: 0.55rem 1.1rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease; } .install-card-primary:hover { transform: translateY(-1px); } .install-card-primary:active { transform: translateY(0); } /* Ajustes: instrucciones step-by-step. Ordered list con números dorados discretos + texto en cuerpo normal. */ .install-steps-wrap { padding: 0.75rem 0.85rem 0.35rem; background: var(--tint-brand-08); border-radius: 12px; } .install-steps-title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--text-heading); font-weight: 600; margin-bottom: 0.35rem; } .install-steps { margin: 0; padding-left: 1.35rem; color: var(--text-body); font-size: 0.9rem; line-height: 1.55; } .install-steps li { padding: 0.2rem 0; } .install-steps li::marker { color: var(--brand); font-weight: 600; } /* Chrome iOS "copy link and open in Safari" body (spec 0030). Serif italic para que se lea contemplativo, no clínico. */ .install-chrome-ios-body { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: var(--text-body); line-height: 1.55; margin: 0.35rem 0 0.75rem; font-style: italic; } /* Trigger nativo (solo cuando beforeinstallprompt está capturado). Reutiliza .ajustes-row pero con acento primario. */ .ajustes-row--primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .ajustes-row--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } [data-theme="dark"] .ajustes-row--primary { color: var(--bg-page); }