/* ========================================================================== BÍBLIA VERSOS — APP SHELL GLOBAL FLAT BUNDLE Sem cadeia local de @import. Carregado de forma bloqueante no . ========================================================================== */ /* ===== core/tokens.css ===== */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=David+Libre:wght@500;700&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap"); /* ========================================================================== BÍBLIA VERSOS — FOUNDATION TOKENS Fase 1.1 · Fonte única de valores visuais globais -------------------------------------------------------------------------- Regras: - Este arquivo contém SOMENTE custom properties. - Nenhum seletor de componente ou página deve ser adicionado aqui. - Tokens específicos de página devem permanecer no CSS da própria página. ========================================================================== */ :root { /* ----------------------------------------------------------------------- Typography ----------------------------------------------------------------------- */ --app-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --app-font-serif: "Playfair Display", "Times New Roman", Times, serif; --app-font-reading: "Cormorant Garamond", Georgia, serif; --app-font-size-10: 0.625rem; --app-font-size-11: 0.6875rem; --app-font-size-12: 0.75rem; --app-font-size-13: 0.8125rem; --app-font-size-14: 0.875rem; --app-font-size-16: 1rem; --app-font-size-18: 1.125rem; --app-font-size-20: 1.25rem; --app-font-size-24: 1.5rem; --app-font-size-28: 1.75rem; --app-font-size-32: 2rem; --app-line-height-tight: 1.15; --app-line-height-compact: 1.3; --app-line-height-base: 1.5; --app-line-height-relaxed: 1.7; --app-font-weight-regular: 400; --app-font-weight-medium: 500; --app-font-weight-semibold: 600; --app-font-weight-bold: 700; --app-font-weight-extrabold: 800; /* ----------------------------------------------------------------------- Brand and semantic colors ----------------------------------------------------------------------- */ --app-color-primary: #315fdc; --app-color-primary-hover: #244fc9; --app-color-primary-strong: #1f43ad; --app-color-primary-soft: #eef4ff; --app-color-primary-line: #cfdbff; --app-color-success: #14845b; --app-color-success-hover: #0f704d; --app-color-success-soft: #eaf8f1; --app-color-success-line: #c6ead8; --app-color-warning: #b77900; --app-color-warning-hover: #986500; --app-color-warning-soft: #fff6df; --app-color-warning-line: #f0ddb0; --app-color-danger: #c23d34; --app-color-danger-hover: #a8322b; --app-color-danger-soft: #fff0ee; --app-color-danger-line: #f0cbc7; --app-color-info: #087d95; --app-color-info-soft: #eaf9fc; --app-color-violet: #7657e8; --app-color-violet-soft: #f2edff; /* ----------------------------------------------------------------------- Neutral palette ----------------------------------------------------------------------- */ --app-color-ink: #17213a; --app-color-ink-strong: #0f172a; --app-color-text: #3d4a63; --app-color-muted: #64748b; --app-color-subtle: #8a97aa; --app-color-gray-50: #f8fafc; --app-color-gray-100: #f1f5f9; --app-color-gray-200: #e2e8f0; --app-color-gray-300: #cbd5e1; --app-color-gray-400: #94a3b8; --app-color-gray-500: #64748b; --app-color-gray-600: #475569; --app-color-gray-700: #334155; --app-color-gray-800: #1e293b; --app-color-gray-900: #0f172a; /* ----------------------------------------------------------------------- Surfaces and borders ----------------------------------------------------------------------- */ --app-surface-page: #f4f7fb; --app-surface-base: #ffffff; --app-surface-soft: #f8fafc; --app-surface-muted: #f1f5f9; --app-surface-elevated: #ffffff; --app-border-color: #dfe7f2; --app-border-color-soft: #edf1f6; --app-border-color-strong: #cbd5e1; /* ----------------------------------------------------------------------- Spacing scale ----------------------------------------------------------------------- */ --app-space-0: 0; --app-space-1: 4px; --app-space-2: 8px; --app-space-3: 12px; --app-space-4: 16px; --app-space-5: 20px; --app-space-6: 24px; --app-space-7: 28px; --app-space-8: 32px; --app-space-10: 40px; --app-space-12: 48px; /* ----------------------------------------------------------------------- Radius ----------------------------------------------------------------------- */ --app-radius-xs: 4px; --app-radius-sm: 6px; --app-radius-md: 10px; --app-radius-lg: 14px; --app-radius-xl: 18px; --app-radius-pill: 999px; /* ----------------------------------------------------------------------- Shadows ----------------------------------------------------------------------- */ --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --app-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --app-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.12); --app-shadow-dropdown: 0 12px 30px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06); /* ----------------------------------------------------------------------- Layout ----------------------------------------------------------------------- */ --app-header-height: 44px; --app-footer-height: 0px; --app-container-sm: 640px; --app-container-md: 1080px; --app-container-lg: 1280px; --app-container-xl: 1596px; --app-container-fluid: 1720px; --app-page-gutter: 20px; --app-page-gutter-mobile: 8px; /* ----------------------------------------------------------------------- Layering ----------------------------------------------------------------------- */ --app-z-base: 0; --app-z-sticky: 100; --app-z-header: 140; --app-z-dropdown: 200; --app-z-overlay: 900; --app-z-modal: 1000; --app-z-toast: 1100; /* ----------------------------------------------------------------------- Motion ----------------------------------------------------------------------- */ --app-motion-fast: 120ms; --app-motion-base: 180ms; --app-motion-slow: 280ms; --app-ease-standard: cubic-bezier(0.2, 0, 0, 1); --app-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); /* ----------------------------------------------------------------------- Focus and accessibility ----------------------------------------------------------------------- */ --app-focus-ring-color: rgba(49, 95, 220, 0.28); --app-focus-ring: 0 0 0 3px var(--app-focus-ring-color); /* ----------------------------------------------------------------------- Shared gradients ----------------------------------------------------------------------- */ --app-gradient-page: radial-gradient(circle at 8% 0%, rgba(49, 95, 220, 0.07), transparent 29rem), var(--app-surface-page); --app-gradient-brand: linear-gradient(135deg, #244bb9 0%, #315fdc 62%, #4d7cf0 100%); } /* ========================================================================== LEGACY TOKEN BRIDGE — Phase 6.1 Temporary aliases for migrated page styles formerly supplied by app.css. Keep aliases centralized here until page CSS uses --app-* tokens directly. ========================================================================== */ :root { --font-sans: var(--app-font-sans); --font-display: var(--app-font-serif); --white: #ffffff; --bg: #f4f7fc; --surface: #ffffff; --surface-soft: #f8fbff; --text: #0f172a; --muted: #6d7d95; --line: rgba(15, 23, 42, 0.08); --line-strong: rgba(15, 23, 42, 0.14); --primary: #2f63ea; --primary-dark: #2652c1; --primary-light: #8cadee; --success: #0c9f78; --success-dark: #0a7f61; --warning: #c98734; --amber: #c98734; --gold: #b99047; --gold-light: #f3d7a5; --gray-50: #f4f7fc; --gray-100: #edf2fb; --gray-200: #dce6f5; --gray-300: #b8cade; --gray-400: #8091a7; --gray-500: #6d7d95; --gray-600: #586882; --gray-700: #3d4e69; --gray-800: #1c2d4a; --gray-900: #0f172a; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-full: 999px; --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 14px 28px rgba(15, 23, 42, 0.08); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12); --tr: 0.26s cubic-bezier(0.22, 1, 0.36, 1); --tr-fast: 0.15s cubic-bezier(0.22, 1, 0.36, 1); --focus-ring-strong: 0 0 0 4px rgba(47, 99, 234, 0.3); --header-height: 46px; --app-bottom-nav-height: 88px; } @media (min-width: 992px) { :root { --header-height: 58px; --app-bottom-nav-height: 0px; } } /* ===== core/reset.css ===== */ /* ========================================================================== BÍBLIA VERSOS — FOUNDATION RESET Fase 1.2 · Normalização mínima e previsível -------------------------------------------------------------------------- Regras: - Sem aparência de componentes. - Sem layout de página. - Sem cores temáticas. - Apenas comportamento-base consistente entre navegadores. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100%; margin: 0; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin-block: 0; } ul, ol { margin-block: 0; } img, picture, svg, canvas, video { display: block; max-width: 100%; } img, picture, video { height: auto; } button, input, select, textarea { margin: 0; font: inherit; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } textarea { resize: vertical; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration-skip-ink: auto; } [hidden] { display: none !important; } :where([tabindex="-1"]:focus) { outline: 0 !important; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== core/base.css ===== */ /* ========================================================================== BÍBLIA VERSOS — FOUNDATION BASE Fase 1.3 · Aparência global de baixo nível -------------------------------------------------------------------------- Pré-requisitos: - tokens.css - reset.css Regras: - Pode estilizar apenas elementos HTML e classes estruturais app-*. - Não pode conter estilos de páginas específicas. - Não pode conter componentes visuais complexos (cards, botões, modais etc.). ========================================================================== */ html { color-scheme: light; background: var(--app-surface-page); } body { min-height: 100vh; color: var(--app-color-ink); background: var(--app-gradient-page); font-family: var(--app-font-sans); font-size: var(--app-font-size-14); font-weight: var(--app-font-weight-regular); line-height: var(--app-line-height-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: rgba(49, 95, 220, 0.18); color: var(--app-color-ink-strong); } :where(h1, h2, h3, h4, h5, h6) { color: var(--app-color-ink-strong); font-family: var(--app-font-sans); font-weight: var(--app-font-weight-bold); line-height: var(--app-line-height-tight); } :where(h1, h2) { letter-spacing: -0.02em; } :where(p, li, dt, dd, label, small) { color: var(--app-color-text); } :where(small) { font-size: var(--app-font-size-12); } :where(a) { color: var(--app-color-primary); text-decoration: none; } :where(a:hover) { color: var(--app-color-primary-hover); } :where(a:focus-visible) { border-radius: var(--app-radius-xs); } :where(button, input, select, textarea) { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } :where(input, select, textarea) { min-width: 0; } :where(input, select, textarea)::placeholder { color: var(--app-color-subtle); opacity: 1; } :where(button:disabled, input:disabled, select:disabled, textarea:disabled) { cursor: not-allowed; opacity: 0.62; } :where(:focus-visible) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--app-focus-ring); } :where(hr) { height: 1px; margin: var(--app-space-4) 0; border: 0; background: var(--app-border-color); } :where(code, kbd, samp, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } :where(code) { font-size: 0.92em; } :where(pre) { max-width: 100%; overflow: auto; white-space: pre; } :where(mark) { padding-inline: 0.15em; background: var(--app-color-warning-soft); color: var(--app-color-ink-strong); } :where(abbr[title]) { text-decoration: underline dotted; text-underline-offset: 0.15em; cursor: help; } /* Estrutura sem aparência de componente. */ .app-page { min-height: 100vh; color: var(--app-color-ink); background: var(--app-surface-page); } .app-page--with-header { padding-top: var(--app-header-height); } .app-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .app-no-scroll { overflow: hidden !important; } @media (prefers-contrast: more) { :where(:focus-visible) { outline-color: currentColor; box-shadow: none; } } /* Estado estrutural inicial; JS pode sobrescrever via element.style.display. */ .app-initially-hidden { display: none; } /* ===== core/layout.css ===== */ /* ========================================================================== BÍBLIA VERSOS — FOUNDATION LAYOUT Fase 1.4 · Estruturas de layout compartilhadas -------------------------------------------------------------------------- Pré-requisitos: - tokens.css - reset.css - base.css Regras: - Apenas estrutura: largura, fluxo, gap, alinhamento e responsividade. - Sem aparência de componente. - Sem regras específicas de página. ========================================================================== */ .app-shell { width: min(var(--app-container-fluid), calc(100% - (var(--app-page-gutter) * 2))); margin-inline: auto; } .app-shell--with-header { min-height: calc(100vh - var(--app-header-height)); } .app-container { width: 100%; margin-inline: auto; padding-inline: var(--app-page-gutter); } .app-container--sm { max-width: var(--app-container-sm); } .app-container--md { max-width: var(--app-container-md); } .app-container--lg { max-width: var(--app-container-lg); } .app-container--xl { max-width: var(--app-container-xl); } .app-container--fluid { max-width: var(--app-container-fluid); } .app-section { width: 100%; padding-block: var(--app-space-6); } .app-section--compact { padding-block: var(--app-space-4); } .app-section--spacious { padding-block: var(--app-space-10); } .app-stack { display: flex; flex-direction: column; gap: var(--app-stack-gap, var(--app-space-4)); } .app-stack--sm { --app-stack-gap: var(--app-space-2); } .app-stack--lg { --app-stack-gap: var(--app-space-6); } .app-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-cluster-gap, var(--app-space-3)); } .app-cluster--between { justify-content: space-between; } .app-cluster--start { justify-content: flex-start; } .app-cluster--end { justify-content: flex-end; } .app-grid { display: grid; gap: var(--app-grid-gap, var(--app-space-4)); } .app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .app-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .app-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .app-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .app-columns { display: grid; grid-template-columns: minmax(0, var(--app-columns-left, 1fr)) minmax(0, var(--app-columns-main, 2fr)); gap: var(--app-columns-gap, var(--app-space-4)); align-items: start; } .app-columns--sidebar { --app-columns-left: 300px; --app-columns-main: 1fr; } .app-columns--wide-sidebar { --app-columns-left: 360px; --app-columns-main: 1fr; } .app-layout-three { display: grid; grid-template-columns: minmax(0, var(--app-layout-left, 300px)) minmax(0, 1fr) minmax(0, var(--app-layout-right, 360px)); gap: var(--app-layout-gap, var(--app-space-4)); align-items: start; } .app-main { min-width: 0; } .app-sidebar { min-width: 0; } .app-sticky { position: sticky; top: calc(var(--app-header-height) + var(--app-space-2)); z-index: var(--app-z-sticky); } .app-scroll-x { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } .app-scroll-y { overflow-y: auto; overscroll-behavior-block: contain; } .app-full-height { min-height: calc(100vh - var(--app-header-height)); } .app-fill { width: 100%; min-width: 0; } .app-center { margin-inline: auto; } .app-sr-only-layout { position: absolute; inset: auto; } @media (max-width: 1100px) { .app-layout-three { grid-template-columns: minmax(0, var(--app-layout-left, 280px)) minmax(0, 1fr); } .app-layout-three > :nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 860px) { .app-columns, .app-columns--sidebar, .app-columns--wide-sidebar, .app-layout-three { grid-template-columns: 1fr; } .app-grid--4, .app-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-layout-three > :nth-child(3) { grid-column: auto; } .app-sticky { position: static; } } @media (max-width: 620px) { .app-shell { width: calc(100% - (var(--app-page-gutter-mobile) * 2)); } .app-container { padding-inline: var(--app-page-gutter-mobile); } .app-section { padding-block: var(--app-space-4); } .app-grid--4, .app-grid--3, .app-grid--2 { grid-template-columns: 1fr; } .app-cluster { gap: var(--app-space-2); } } /* Screen visibility — migrated from legacy app.css in Phase 6.1 */ .app-page .screen { display: none; } .app-page .screen.active { display: block; } /* ===== components/navigation.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE NAVIGATION Fase 2.2 · Navegação global isolada -------------------------------------------------------------------------- Proprietário visual: .app-nav* Proprietário comportamental: assets/js/core/app-shell.js ========================================================================== */ .app-nav, .app-nav * { box-sizing: border-box; } .app-nav { position: fixed; inset: 0 0 auto 0; z-index: var(--app-z-header); width: 100%; height: var(--app-header-height); display: flex; justify-content: center; border-bottom: 1px solid var(--app-border-color); background: rgba(255, 255, 255, 0.96); color: var(--app-color-ink-strong); font-family: var(--app-font-sans); line-height: normal; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .app-nav__inner { width: min(var(--app-container-fluid), calc(100% - 10px)); height: var(--app-header-height); display: flex; align-items: center; gap: 14px; } .app-nav__brand { min-width: 0; display: flex; align-items: center; gap: 7px; color: #9a7118; font-family: "David Libre", "Noto Serif Hebrew", Georgia, serif; font-size: 15.5px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0.015em; white-space: nowrap; text-decoration: none; } .app-nav__brand:hover, .app-nav__brand:focus-visible { color: #7f5b10; } .app-nav__brand-mark { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid var(--app-color-primary-line); border-radius: 5px; background: #fffaf0; color: #a87916; font: 700 18px/1 var(--app-font-sans); } .app-nav__tabs { min-width: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex: 1 1 auto; list-style: none; overflow: visible; } .app-nav__tabs > li { margin: 0; padding: 0; flex: 0 0 auto; list-style: none; } .app-nav__item { appearance: none; -webkit-appearance: none; min-width: 0; min-height: 0; margin: 0; padding: 7px 10px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--app-radius-xs); background: transparent; color: #16213a; font: 800 12.5px/1 var(--app-font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--app-motion-fast) var(--app-ease-standard), color var(--app-motion-fast) var(--app-ease-standard), border-color var(--app-motion-fast) var(--app-ease-standard); } .app-nav__item:hover { color: #16213a; background: #f4f7fc; } .app-nav__item:focus-visible, .app-nav__profile-trigger:focus-visible { outline: 2px solid transparent; outline-offset: 1px; box-shadow: var(--app-focus-ring); } .app-nav__item.is-active, .app-nav__item.active, .app-nav__item[aria-current="page"] { color: #2952c8; background: #e8f0fe; border-color: #d3e0fb; } .app-nav__icon { flex: 0 0 auto; font-size: 13px; line-height: 1; } .app-nav__icon--home { color: #2563eb; } .app-nav__icon--study { color: #7c3aed; } .app-nav__icon--bible { color: #b45309; } .app-nav__icon--explore { color: #db2777; } .app-nav__menu { position: relative; } .app-nav__chevron { margin-left: 1px; color: #7c899d; font-size: 9px; transition: transform var(--app-motion-fast) var(--app-ease-standard); } .app-nav__menu.is-open > .app-nav__item .app-nav__chevron, .app-nav__menu.open > .app-nav__item .app-nav__chevron, .app-nav__item[aria-expanded="true"] .app-nav__chevron { transform: rotate(180deg); } .app-nav__menu.is-open > .app-nav__item, .app-nav__menu.open > .app-nav__item { color: #2952c8; background: #f4f7fc; } .app-nav__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--app-z-dropdown); width: 292px; padding: 6px; border: 1px solid var(--app-color-gray-200); border-radius: var(--app-radius-md); background: var(--app-surface-elevated); box-shadow: var(--app-shadow-dropdown); animation: appNavEnter var(--app-motion-fast) var(--app-ease-emphasized) both; } .app-nav__panel--compact { width: 250px; } .app-nav__panel[hidden] { display: none !important; } .app-nav__panel > a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 10px; border-radius: var(--app-radius-sm); color: var(--app-color-gray-800); text-decoration: none; transition: background var(--app-motion-fast) var(--app-ease-standard); } .app-nav__panel > a:hover { color: var(--app-color-gray-800); background: #f4f7fc; } .app-nav__panel > a > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #f1f5fb; color: #4f67a7; font-size: 13px; } .app-nav__panel span, .app-nav__panel b, .app-nav__panel small { display: block; min-width: 0; } .app-nav__panel b { color: var(--app-color-gray-800); font-size: 12px; font-weight: var(--app-font-weight-extrabold); } .app-nav__panel small { margin-top: 2px; color: #7a8799; font-size: 9.5px; line-height: 1.3; } .app-nav__user { position: relative; flex: 0 0 auto; display: flex; align-items: center; } .app-nav__profile-trigger { appearance: none; -webkit-appearance: none; margin: 0; padding: 4px 8px 4px 4px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--app-radius-sm); background: transparent; color: var(--app-color-ink-strong); font: 800 12.5px/1 var(--app-font-sans); cursor: pointer; transition: background var(--app-motion-fast) var(--app-ease-standard), border-color var(--app-motion-fast) var(--app-ease-standard); } .app-nav__profile-trigger:hover, .app-nav__profile-trigger[aria-expanded="true"] { background: #f4f7fc; border-color: var(--app-border-color-strong); } .app-nav__avatar { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid var(--app-border-color-strong); border-radius: 50%; background: #f0f4fb; color: var(--app-color-ink-strong); font: 800 11px/1 var(--app-font-sans); } .app-nav__profile-chevron { color: #16213a; font-size: 13px; transition: transform var(--app-motion-base) var(--app-ease-standard); } .app-nav__profile-trigger[aria-expanded="true"] .app-nav__profile-chevron { transform: rotate(180deg); } .app-nav__profile-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--app-z-dropdown); min-width: 190px; padding: 5px; border: 1px solid var(--app-color-gray-200); border-radius: var(--app-radius-sm); background: var(--app-surface-elevated); box-shadow: var(--app-shadow-dropdown); animation: appNavEnter var(--app-motion-fast) var(--app-ease-emphasized) both; } .app-nav__profile-panel[hidden] { display: none !important; } .app-nav__profile-item { appearance: none; -webkit-appearance: none; width: 100%; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--app-radius-xs); background: transparent; color: var(--app-color-gray-800); font: 600 12.5px/1.2 var(--app-font-sans); text-decoration: none; cursor: pointer; transition: background var(--app-motion-fast) var(--app-ease-standard); } .app-nav__profile-item:hover { color: var(--app-color-gray-800); background: #f4f7fc; } .app-nav__profile-item i { flex: 0 0 auto; color: var(--app-color-muted); font-size: 16px; } .app-nav__profile-item--danger, .app-nav__profile-item--danger i { color: var(--app-color-danger); } .app-nav__profile-item--danger:hover { color: var(--app-color-danger); background: var(--app-color-danger-soft); } .app-nav__profile-item[hidden], .app-nav__separator[hidden] { display: none !important; } .app-nav__separator { height: 1px; margin: 4px 0; background: var(--app-color-gray-200); } @keyframes appNavEnter { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Compatibilidade temporária até todas as páginas receberem .app-page--with-header. */ body:has(.app-nav) { padding-top: var(--app-header-height) !important; } @media (max-width: 760px) { .app-nav__inner { gap: 6px; } .app-nav__brand-label { display: none; } .app-nav__tabs { gap: 1px; } .app-nav__item { padding: 7px; gap: 4px; font-size: 11px; } .app-nav__icon { font-size: 12px; } .app-nav__panel { position: fixed; top: calc(var(--app-header-height) + 4px); left: 9px; right: 9px; width: auto; } .app-nav__profile-name { display: none; } } @media (max-width: 470px) { .app-nav__item { padding: 7px 6px; font-size: 0; } .app-nav__icon { font-size: 14px; } .app-nav__chevron { font-size: 8px; } } /* ===== components/footer.css ===== */ /* ========================================================================== BÍBLIA VERSOS — FOOTER / NAVEGAÇÃO INFERIOR Componente global do App Shell. ========================================================================== */ #layout-footer .bottom-nav, #layout-footer .bottom-nav *, #layout-footer .desktop-footer, #layout-footer .desktop-footer * { box-sizing: border-box; } #layout-footer .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: calc(var(--app-z-sticky) + 1); min-height: var(--app-bottom-nav-height); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 9px 16px 10px; border-top: 1px solid rgba(19, 52, 120, 0.12); background: linear-gradient(160deg, rgba(254,255,255,.97) 0%, rgba(243,248,255,.97) 100%); box-shadow: 0 -8px 20px rgba(26,59,130,.14), inset 0 1px 0 rgba(255,255,255,.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #layout-footer .nav-btn { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; min-height: 52px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; border: 0; border-radius: var(--app-radius-sm); background: transparent; color: #5c7298; cursor: pointer; transition: background var(--app-motion-base) var(--app-ease-standard), color var(--app-motion-base) var(--app-ease-standard), transform var(--app-motion-base) var(--app-ease-standard); } #layout-footer .nav-btn::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--app-color-primary); transform: translateX(-50%); transition: width var(--app-motion-base) var(--app-ease-standard); } #layout-footer .nav-btn:hover { background: rgba(47,99,234,.1); } #layout-footer .nav-btn.active { color: #fff; background: linear-gradient(120deg, #2f63ea 0%, #214cb8 100%); box-shadow: 0 8px 16px rgba(33,76,184,.28); } #layout-footer .nav-btn.active::before { width: 32px; } #layout-footer .nav-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; transition: transform var(--app-motion-base) var(--app-ease-standard); } #layout-footer .nav-icon > i { font-size: 20px; } #layout-footer .nav-btn:nth-child(1) .nav-icon > i { color: #2f63ea; } #layout-footer .nav-btn:nth-child(2) .nav-icon > i { color: #0c9f78; } #layout-footer .nav-btn:nth-child(3) .nav-icon > i { color: #8a57d8; } #layout-footer .nav-btn:nth-child(4) .nav-icon > i { color: #d28727; } #layout-footer .nav-btn:nth-child(5) .nav-icon > i { color: #dc5f73; } #layout-footer .nav-btn.active .nav-icon > i, #layout-footer .nav-btn.active .nav-label { color: #fff; } #layout-footer .nav-btn:active .nav-icon { transform: scale(.9); } #layout-footer .nav-label { font-size: 10px; font-weight: 700; letter-spacing: .2px; line-height: 1.15; white-space: nowrap; } #layout-footer .desktop-footer { display: none; } @supports (padding-bottom: env(safe-area-inset-bottom)) { #layout-footer .bottom-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } @media (min-width: 992px) { #layout-footer .bottom-nav { display: none; } #layout-footer .desktop-footer { position: fixed; inset: auto 0 0 0; z-index: 95; height: 34px; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(19,52,120,.12); background: linear-gradient(160deg, rgba(253,255,255,.97) 0%, rgba(241,247,255,.97) 100%); color: #4f648a; box-shadow: 0 -10px 22px rgba(28,59,126,.13), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #layout-footer .desktop-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(47,99,234,0) 0%, rgba(47,99,234,.35) 50%, rgba(47,99,234,0) 100%); pointer-events: none; } #layout-footer .desktop-footer span { color: #4b5f85; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } } /* ===== components/buttons.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE BUTTONS Fase 3.1 · Botões compartilhados -------------------------------------------------------------------------- Escopo exclusivo: .ui-button* Não substitui .btn do Bootstrap. ========================================================================== */ .ui-button { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 var(--app-space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--app-space-2); border: 1px solid transparent; border-radius: var(--app-radius-md); background: var(--app-surface-base); color: var(--app-color-ink); font-family: var(--app-font-sans); font-size: var(--app-font-size-13); font-weight: var(--app-font-weight-bold); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: transform var(--app-motion-fast) var(--app-ease-standard), box-shadow var(--app-motion-base) var(--app-ease-standard), background var(--app-motion-fast) var(--app-ease-standard), border-color var(--app-motion-fast) var(--app-ease-standard), color var(--app-motion-fast) var(--app-ease-standard); } .ui-button:hover { transform: translateY(-1px); } .ui-button:active { transform: translateY(0); } .ui-button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--app-focus-ring); } .ui-button:disabled, .ui-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.56; transform: none; box-shadow: none; pointer-events: none; } .ui-button > i, .ui-button__icon { flex: 0 0 auto; font-size: 0.95em; line-height: 1; } .ui-button--primary { border-color: var(--app-color-primary); background: var(--app-gradient-brand); color: #fff; box-shadow: 0 7px 16px rgba(49, 95, 220, 0.22); } .ui-button--primary:hover { color: #fff; border-color: var(--app-color-primary-hover); box-shadow: 0 10px 22px rgba(49, 95, 220, 0.28); } .ui-button--secondary { border-color: var(--app-border-color-strong); background: var(--app-surface-base); color: var(--app-color-gray-700); box-shadow: var(--app-shadow-xs); } .ui-button--secondary:hover { border-color: #aebbd0; background: var(--app-color-gray-50); color: var(--app-color-gray-800); } .ui-button--ghost { border-color: transparent; background: var(--app-color-primary-soft); color: var(--app-color-primary-strong); } .ui-button--ghost:hover { border-color: var(--app-color-primary-line); background: #e5edff; color: var(--app-color-primary-strong); } .ui-button--success { border-color: var(--app-color-success); background: var(--app-color-success); color: #fff; } .ui-button--success:hover { color: #fff; border-color: var(--app-color-success-hover); background: var(--app-color-success-hover); } .ui-button--danger { border-color: var(--app-color-danger); background: var(--app-color-danger); color: #fff; } .ui-button--danger:hover { color: #fff; border-color: var(--app-color-danger-hover); background: var(--app-color-danger-hover); } .ui-button--danger-soft { border-color: var(--app-color-danger-line); background: var(--app-color-danger-soft); color: var(--app-color-danger); } .ui-button--danger-soft:hover { border-color: #e9b8b2; background: #ffe5e1; color: var(--app-color-danger-hover); } .ui-button--text { min-height: 32px; padding-inline: var(--app-space-2); border-color: transparent; background: transparent; color: var(--app-color-primary); box-shadow: none; } .ui-button--text:hover { background: var(--app-color-primary-soft); color: var(--app-color-primary-hover); } .ui-button--sm { min-height: 32px; padding-inline: var(--app-space-3); border-radius: var(--app-radius-sm); font-size: var(--app-font-size-11); } .ui-button--lg { min-height: 46px; padding-inline: var(--app-space-5); border-radius: var(--app-radius-lg); font-size: var(--app-font-size-14); } .ui-button--icon { width: 40px; min-width: 40px; padding: 0; } .ui-button--icon.ui-button--sm { width: 32px; min-width: 32px; } .ui-button--icon.ui-button--lg { width: 46px; min-width: 46px; } .ui-button--block { width: 100%; } .ui-button.is-loading { position: relative; color: transparent !important; pointer-events: none; } .ui-button.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: inherit; animation: uiButtonSpin 700ms linear infinite; } .ui-button--primary.is-loading::after, .ui-button--success.is-loading::after, .ui-button--danger.is-loading::after { color: #fff; } .ui-button-group { display: inline-flex; align-items: center; gap: var(--app-space-2); } .ui-button-group--end { justify-content: flex-end; } .ui-button-group--stacked { flex-direction: column; align-items: stretch; } @keyframes uiButtonSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ui-button { transition: none; } .ui-button:hover, .ui-button:active { transform: none; } } /* ===== components/cards.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE CARDS Fase 3.2 · Cards e painéis compartilhados -------------------------------------------------------------------------- Escopo exclusivo: .ui-card* Não substitui .card do Bootstrap. ========================================================================== */ .ui-card { min-width: 0; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-lg); background: var(--app-surface-base); color: var(--app-color-ink); box-shadow: var(--app-shadow-xs); } .ui-card--soft { background: var(--app-surface-soft); } .ui-card--elevated { box-shadow: var(--app-shadow-md); } .ui-card--flat { box-shadow: none; } .ui-card--interactive { transition: transform var(--app-motion-fast) var(--app-ease-standard), box-shadow var(--app-motion-base) var(--app-ease-standard), border-color var(--app-motion-fast) var(--app-ease-standard); } .ui-card--interactive:hover { transform: translateY(-1px); border-color: #bccbea; box-shadow: var(--app-shadow-md); } .ui-card--interactive:focus-within { border-color: var(--app-color-primary-line); box-shadow: var(--app-focus-ring); } .ui-card__header, .ui-card__body, .ui-card__footer { min-width: 0; } .ui-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--app-space-3); padding: var(--app-space-4); border-bottom: 1px solid var(--app-border-color-soft); } .ui-card__body { padding: var(--app-space-4); } .ui-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--app-space-2); padding: var(--app-space-3) var(--app-space-4); border-top: 1px solid var(--app-border-color-soft); background: var(--app-surface-soft); border-radius: 0 0 calc(var(--app-radius-lg) - 1px) calc(var(--app-radius-lg) - 1px); } .ui-card__title { margin: 0; color: var(--app-color-ink-strong); font-size: var(--app-font-size-14); font-weight: var(--app-font-weight-extrabold); line-height: var(--app-line-height-compact); } .ui-card__subtitle { margin: 3px 0 0; color: var(--app-color-muted); font-size: var(--app-font-size-11); line-height: var(--app-line-height-base); } .ui-card__icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: var(--app-radius-md); background: var(--app-color-primary-soft); color: var(--app-color-primary); font-size: var(--app-font-size-16); } .ui-card__icon--success { background: var(--app-color-success-soft); color: var(--app-color-success); } .ui-card__icon--warning { background: var(--app-color-warning-soft); color: var(--app-color-warning); } .ui-card__icon--danger { background: var(--app-color-danger-soft); color: var(--app-color-danger); } .ui-card__icon--violet { background: var(--app-color-violet-soft); color: var(--app-color-violet); } .ui-card--compact .ui-card__header, .ui-card--compact .ui-card__body { padding: var(--app-space-3); } .ui-card--compact .ui-card__footer { padding: var(--app-space-2) var(--app-space-3); } .ui-card--spacious .ui-card__header, .ui-card--spacious .ui-card__body { padding: var(--app-space-6); } .ui-card--spacious .ui-card__footer { padding: var(--app-space-4) var(--app-space-6); } .ui-card--accent-primary { border-left: 4px solid var(--app-color-primary); } .ui-card--accent-success { border-left: 4px solid var(--app-color-success); } .ui-card--accent-warning { border-left: 4px solid var(--app-color-warning); } .ui-card--accent-danger { border-left: 4px solid var(--app-color-danger); } /* Metric / KPI */ .ui-card--metric { padding: var(--app-space-4); } .ui-card__metric-label { display: block; color: var(--app-color-muted); font-size: var(--app-font-size-10); font-weight: var(--app-font-weight-bold); letter-spacing: 0.045em; text-transform: uppercase; } .ui-card__metric-value { display: block; margin-top: var(--app-space-1); color: var(--app-color-ink-strong); font-size: var(--app-font-size-24); font-weight: var(--app-font-weight-extrabold); line-height: 1.1; } .ui-card__metric-meta { display: block; margin-top: var(--app-space-1); color: var(--app-color-muted); font-size: var(--app-font-size-11); } /* Panel */ .ui-panel { min-width: 0; padding: var(--app-space-4); border: 1px solid var(--app-border-color); border-radius: var(--app-radius-md); background: var(--app-surface-base); } .ui-panel--soft { background: var(--app-surface-soft); } .ui-panel--primary { border-color: var(--app-color-primary-line); background: var(--app-color-primary-soft); } .ui-panel--success { border-color: var(--app-color-success-line); background: var(--app-color-success-soft); } .ui-panel--warning { border-color: var(--app-color-warning-line); background: var(--app-color-warning-soft); } .ui-panel--danger { border-color: var(--app-color-danger-line); background: var(--app-color-danger-soft); } @media (max-width: 620px) { .ui-card__header { align-items: flex-start; } .ui-card--spacious .ui-card__header, .ui-card--spacious .ui-card__body { padding: var(--app-space-4); } .ui-card--spacious .ui-card__footer { padding: var(--app-space-3) var(--app-space-4); } } /* ===== components/forms.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE FORMS Fase 3.3 · Formulários compartilhados -------------------------------------------------------------------------- Escopo exclusivo: .ui-field*, .ui-input*, .ui-select*, .ui-textarea* Não substitui .form-control/.form-select do Bootstrap. ========================================================================== */ .ui-field { display: grid; gap: var(--app-space-2); min-width: 0; } .ui-field + .ui-field { margin-top: var(--app-space-4); } .ui-field__label { display: inline-flex; align-items: center; gap: var(--app-space-1); color: var(--app-color-gray-700); font-size: var(--app-font-size-12); font-weight: var(--app-font-weight-bold); line-height: var(--app-line-height-compact); } .ui-field__label small { color: var(--app-color-muted); font-size: var(--app-font-size-10); font-weight: var(--app-font-weight-medium); } .ui-field__help, .ui-field__feedback { margin: 0; color: var(--app-color-muted); font-size: var(--app-font-size-10); line-height: var(--app-line-height-base); } .ui-field__feedback { min-height: 1em; } .ui-field__feedback--success { color: var(--app-color-success); } .ui-field__feedback--warning { color: var(--app-color-warning); } .ui-field__feedback--danger, .ui-field.has-error .ui-field__feedback { color: var(--app-color-danger); } .ui-input, .ui-select, .ui-textarea { width: 100%; min-width: 0; min-height: 38px; padding: 8px 11px; border: 1px solid var(--app-border-color-strong); border-radius: var(--app-radius-sm); background: var(--app-surface-base); color: var(--app-color-ink); font-family: var(--app-font-sans); font-size: var(--app-font-size-12); line-height: var(--app-line-height-base); box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02); transition: border-color var(--app-motion-fast) var(--app-ease-standard), box-shadow var(--app-motion-fast) var(--app-ease-standard), background var(--app-motion-fast) var(--app-ease-standard); } .ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: #b8c5d8; } .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--app-color-primary); box-shadow: 0 0 0 3px rgba(49, 95, 220, 0.12); } .ui-input::placeholder, .ui-textarea::placeholder { color: var(--app-color-subtle); } .ui-textarea { min-height: 84px; resize: vertical; } .ui-select { padding-right: 34px; } .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled, .ui-input[readonly], .ui-textarea[readonly] { background: var(--app-surface-muted); color: var(--app-color-muted); } .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { cursor: not-allowed; } .ui-field.has-error .ui-input, .ui-field.has-error .ui-select, .ui-field.has-error .ui-textarea, .ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--app-color-danger); background: #fffafa; } .ui-field.has-error .ui-input:focus, .ui-field.has-error .ui-select:focus, .ui-field.has-error .ui-textarea:focus, .ui-input[aria-invalid="true"]:focus, .ui-select[aria-invalid="true"]:focus, .ui-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 61, 52, 0.12); } .ui-field.has-success .ui-input, .ui-field.has-success .ui-select, .ui-field.has-success .ui-textarea { border-color: var(--app-color-success); } .ui-field.has-success .ui-input:focus, .ui-field.has-success .ui-select:focus, .ui-field.has-success .ui-textarea:focus { box-shadow: 0 0 0 3px rgba(20, 132, 91, 0.12); } .ui-input--sm, .ui-select--sm { min-height: 32px; padding-block: 5px; font-size: var(--app-font-size-11); } .ui-input--lg, .ui-select--lg { min-height: 46px; padding-block: 11px; font-size: var(--app-font-size-14); } .ui-field__control { position: relative; min-width: 0; } .ui-field__control--with-icon .ui-input, .ui-field__control--with-icon .ui-select { padding-left: 36px; } .ui-field__control-icon { position: absolute; top: 50%; left: 12px; z-index: 1; transform: translateY(-50%); color: var(--app-color-muted); pointer-events: none; } .ui-input-group { display: flex; min-width: 0; } .ui-input-group > .ui-input, .ui-input-group > .ui-select, .ui-input-group > .ui-input-group__addon { border-radius: 0; } .ui-input-group > :first-child { border-radius: var(--app-radius-sm) 0 0 var(--app-radius-sm); } .ui-input-group > :last-child { border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0; } .ui-input-group > * + * { margin-left: -1px; } .ui-input-group__addon { min-height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border-color-strong); background: var(--app-surface-soft); color: var(--app-color-muted); font-size: var(--app-font-size-11); font-weight: var(--app-font-weight-semibold); white-space: nowrap; } .ui-check, .ui-radio { display: inline-flex; align-items: flex-start; gap: var(--app-space-2); color: var(--app-color-text); font-size: var(--app-font-size-12); cursor: pointer; } .ui-check input, .ui-radio input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--app-color-primary); } .ui-field-row { display: grid; grid-template-columns: repeat(var(--ui-field-columns, 2), minmax(0, 1fr)); gap: var(--app-space-4); } .ui-field-row--3 { --ui-field-columns: 3; } @media (max-width: 620px) { .ui-field-row, .ui-field-row--3 { grid-template-columns: 1fr; } } /* ===== components/modal.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE MODAL Fase 3.4 · Modal compartilhado -------------------------------------------------------------------------- Escopo exclusivo: .ui-modal* Não substitui .modal do Bootstrap. ========================================================================== */ .ui-modal { position: fixed; inset: 0; z-index: var(--app-z-modal); display: none; align-items: center; justify-content: center; padding: var(--app-space-4); } .ui-modal.is-open { display: flex; } .ui-modal[hidden] { display: none !important; } .ui-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .ui-modal__dialog { position: relative; z-index: 1; width: min(var(--ui-modal-width, 540px), 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-lg); background: var(--app-surface-elevated); box-shadow: var(--app-shadow-lg); animation: uiModalEnter var(--app-motion-base) var(--app-ease-emphasized) both; } .ui-modal--sm { --ui-modal-width: 420px; } .ui-modal--lg { --ui-modal-width: 820px; } .ui-modal--xl { --ui-modal-width: 1180px; } .ui-modal__header, .ui-modal__footer { flex: 0 0 auto; padding: var(--app-space-4); } .ui-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--app-space-3); border-bottom: 1px solid var(--app-border-color-soft); background: linear-gradient(135deg, var(--app-surface-soft), #fff); } .ui-modal__body { min-height: 0; padding: var(--app-space-4); overflow: auto; } .ui-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--app-space-2); border-top: 1px solid var(--app-border-color-soft); background: var(--app-surface-soft); } .ui-modal__title { margin: 0; color: var(--app-color-ink-strong); font-size: var(--app-font-size-16); font-weight: var(--app-font-weight-extrabold); } .ui-modal__subtitle { margin: 3px 0 0; color: var(--app-color-muted); font-size: var(--app-font-size-11); } .ui-modal__close { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-sm); background: var(--app-surface-base); color: var(--app-color-muted); cursor: pointer; } .ui-modal__close:hover { background: var(--app-surface-muted); color: var(--app-color-ink); } body.is-modal-open { overflow: hidden; } @keyframes uiModalEnter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 620px) { .ui-modal { align-items: flex-end; padding: var(--app-space-2); } .ui-modal__dialog { width: 100%; max-height: calc(100vh - var(--app-space-4)); border-radius: var(--app-radius-lg); } .ui-modal__header, .ui-modal__body, .ui-modal__footer { padding: var(--app-space-3); } .ui-modal__footer { flex-wrap: wrap; } } /* ===== components/toast.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE TOAST Fase 3.4 · Notificações compartilhadas ========================================================================== */ .ui-toast-stack { position: fixed; top: calc(var(--app-header-height) + var(--app-space-3)); right: var(--app-space-4); z-index: var(--app-z-toast); width: min(380px, calc(100vw - (var(--app-space-4) * 2))); display: grid; gap: var(--app-space-2); pointer-events: none; } .ui-toast { min-width: 0; padding: 11px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--app-space-2); align-items: start; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-md); background: var(--app-surface-elevated); color: var(--app-color-text); box-shadow: var(--app-shadow-md); pointer-events: auto; animation: uiToastEnter var(--app-motion-base) var(--app-ease-emphasized) both; } .ui-toast__icon { margin-top: 1px; color: var(--app-color-primary); } .ui-toast__content { min-width: 0; } .ui-toast__title { display: block; color: var(--app-color-ink-strong); font-size: var(--app-font-size-12); font-weight: var(--app-font-weight-extrabold); } .ui-toast__message { margin: 2px 0 0; color: inherit; font-size: var(--app-font-size-11); line-height: var(--app-line-height-base); } .ui-toast__close { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--app-radius-xs); background: transparent; color: currentColor; opacity: .66; cursor: pointer; } .ui-toast__close:hover { background: rgba(15, 23, 42, .06); opacity: 1; } .ui-toast--success { border-color: var(--app-color-success-line); background: var(--app-color-success-soft); color: var(--app-color-success-hover); } .ui-toast--success .ui-toast__icon { color: var(--app-color-success); } .ui-toast--warning { border-color: var(--app-color-warning-line); background: var(--app-color-warning-soft); color: var(--app-color-warning-hover); } .ui-toast--warning .ui-toast__icon { color: var(--app-color-warning); } .ui-toast--danger { border-color: var(--app-color-danger-line); background: var(--app-color-danger-soft); color: var(--app-color-danger-hover); } .ui-toast--danger .ui-toast__icon { color: var(--app-color-danger); } .ui-toast.is-leaving { animation: uiToastLeave var(--app-motion-fast) var(--app-ease-standard) both; } @keyframes uiToastEnter { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes uiToastLeave { to { opacity: 0; transform: translateY(-5px) scale(.985); } } @media (max-width: 620px) { .ui-toast-stack { top: calc(var(--app-header-height) + var(--app-space-2)); left: var(--app-space-2); right: var(--app-space-2); width: auto; } } /* ===== components/badges.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE BADGES Fase 3.4 · Badges, chips e estados ========================================================================== */ .ui-badge { min-height: 22px; padding: 3px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-pill); background: var(--app-surface-soft); color: var(--app-color-gray-600); font-size: var(--app-font-size-10); font-weight: var(--app-font-weight-bold); line-height: 1; white-space: nowrap; } .ui-badge--primary { border-color: var(--app-color-primary-line); background: var(--app-color-primary-soft); color: var(--app-color-primary-strong); } .ui-badge--success { border-color: var(--app-color-success-line); background: var(--app-color-success-soft); color: var(--app-color-success-hover); } .ui-badge--warning { border-color: var(--app-color-warning-line); background: var(--app-color-warning-soft); color: var(--app-color-warning-hover); } .ui-badge--danger { border-color: var(--app-color-danger-line); background: var(--app-color-danger-soft); color: var(--app-color-danger-hover); } .ui-badge--violet { border-color: #ded5ff; background: var(--app-color-violet-soft); color: #6244ca; } .ui-badge--neutral { background: var(--app-surface-muted); color: var(--app-color-muted); } .ui-badge--dot::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; } .ui-badge--sm { min-height: 18px; padding: 2px 6px; font-size: 9px; } .ui-badge--square { border-radius: var(--app-radius-xs); } .ui-status { display: inline-flex; align-items: center; gap: 6px; color: var(--app-color-muted); font-size: var(--app-font-size-11); font-weight: var(--app-font-weight-semibold); } .ui-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; } .ui-status--success { color: var(--app-color-success); } .ui-status--warning { color: var(--app-color-warning); } .ui-status--danger { color: var(--app-color-danger); } .ui-status--primary { color: var(--app-color-primary); } /* ===== components/tables.css ===== */ /* ========================================================================== BÍBLIA VERSOS — COMPONENTE TABLES Fase 3.5 · Tabelas compartilhadas -------------------------------------------------------------------------- Escopo exclusivo: .ui-table* Não substitui .table do Bootstrap. ========================================================================== */ .ui-table-wrap { width: 100%; max-width: 100%; overflow: auto; border: 1px solid var(--app-border-color); border-radius: var(--app-radius-md); background: var(--app-surface-base); } .ui-table { width: 100%; min-width: var(--ui-table-min-width, 680px); border-collapse: collapse; border-spacing: 0; color: var(--app-color-text); font-size: var(--app-font-size-11); } .ui-table caption { padding: var(--app-space-3) var(--app-space-4); color: var(--app-color-muted); font-size: var(--app-font-size-10); text-align: left; caption-side: top; } .ui-table th, .ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--app-border-color-soft); text-align: left; vertical-align: middle; } .ui-table thead th { color: var(--app-color-muted); background: var(--app-surface-soft); font-size: var(--app-font-size-10); font-weight: var(--app-font-weight-extrabold); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .ui-table tbody tr:last-child > * { border-bottom: 0; } .ui-table tbody tr { transition: background var(--app-motion-fast) var(--app-ease-standard); } .ui-table--hover tbody tr:hover { background: #f7f9fd; } .ui-table--striped tbody tr:nth-child(even) { background: #fbfcfe; } .ui-table--compact th, .ui-table--compact td { padding: 7px 9px; font-size: var(--app-font-size-10); } .ui-table--comfortable th, .ui-table--comfortable td { padding: 13px 14px; } .ui-table--fixed { table-layout: fixed; } .ui-table--sticky thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--app-border-color); } .ui-table__cell--nowrap { white-space: nowrap; } .ui-table__cell--truncate { max-width: var(--ui-table-cell-max, 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-table__cell--numeric { text-align: right; font-variant-numeric: tabular-nums; } .ui-table__cell--center { text-align: center; } .ui-table__cell--actions { width: 1%; white-space: nowrap; text-align: right; } .ui-table__row--success { background: rgba(20, 132, 91, .055); } .ui-table__row--warning { background: rgba(183, 121, 0, .06); } .ui-table__row--danger { background: rgba(194, 61, 52, .055); } .ui-table__row--muted { color: var(--app-color-muted); background: var(--app-surface-soft); } .ui-table__empty { padding: var(--app-space-8) var(--app-space-4) !important; color: var(--app-color-muted); text-align: center !important; } .ui-table__empty strong { display: block; margin-bottom: var(--app-space-1); color: var(--app-color-gray-700); font-size: var(--app-font-size-12); } .ui-table__empty small { color: var(--app-color-muted); font-size: var(--app-font-size-10); } .ui-table__sort { appearance: none; -webkit-appearance: none; width: 100%; padding: 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .ui-table__sort:hover { color: var(--app-color-primary); } .ui-table__sort[aria-sort="ascending"]::after, .ui-table__sort[aria-sort="descending"]::after { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 8px; color: var(--app-color-primary); } .ui-table__sort[aria-sort="ascending"]::after { content: "\f0de"; } .ui-table__sort[aria-sort="descending"]::after { content: "\f0dd"; } .ui-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-3); padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--app-border-color); border-bottom: 0; border-radius: var(--app-radius-md) var(--app-radius-md) 0 0; background: var(--app-surface-soft); } .ui-table-toolbar + .ui-table-wrap { border-radius: 0 0 var(--app-radius-md) var(--app-radius-md); } .ui-table-toolbar__title { min-width: 0; color: var(--app-color-ink-strong); font-size: var(--app-font-size-12); font-weight: var(--app-font-weight-extrabold); } .ui-table-toolbar__actions { display: flex; align-items: center; gap: var(--app-space-2); } @media (max-width: 620px) { .ui-table { --ui-table-min-width: 620px; } .ui-table-toolbar { align-items: stretch; flex-direction: column; } .ui-table-toolbar__actions { flex-wrap: wrap; } } /* ===== components/overlays.css ===== */ /* ========================================================================== BÍBLIA VERSOS — OVERLAYS COMPARTILHADOS Hotfix pós-remocão de app.css. Regras legadas preservadas, agora isoladas em #layout-overlays. ========================================================================== */ /* === MODAL === */ #layout-overlays .modal-overlay{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.72); z-index: 1000; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--tr); overflow-y: auto; } #layout-overlays .modal-overlay::before{ content: ""; position: fixed; inset: 0; background-image: radial-gradient( circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50% ), radial-gradient( circle at 80% 70%, rgba(79, 70, 229, 0.1) 0%, transparent 50% ); pointer-events: none; animation: bgPulse 8s ease-in-out infinite; } @keyframes bgPulse{ 0%, 100% { opacity: 0.5; } 50% { opacity: 0.8; } } #layout-overlays .modal-overlay.active{ display: flex; opacity: 1; } #layout-overlays .modal-overlay.closing{ opacity: 0; } #layout-overlays .modal-content{ background: var(--white); border-radius: var(--r-lg); padding: 22px 20px; max-width: 500px; width: 100%; max-height: 92vh; overflow: hidden; box-shadow: var(--shadow-xl), 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.8); transform: scale(1); transition: transform var(--tr); margin: auto; position: relative; border: 1px solid var(--line); } #layout-overlays .modal-content::before{ content: ""; position: absolute; inset: -2px; border-radius: 20px; padding: 2px; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.8), rgba(147, 51, 234, 0.6), rgba(59, 130, 246, 0.6), rgba(99, 102, 241, 0.8) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; pointer-events: none; animation: borderRotate 4s linear infinite; } @keyframes borderRotate{ 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } #layout-overlays .modal-content::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: radial-gradient( ellipse at top, rgba(99, 102, 241, 0.12), transparent ); pointer-events: none; border-radius: 20px 20px 0 0; } #layout-overlays .modal-overlay.active .modal-content{ animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } #layout-overlays .modal-overlay.closing .modal-content{ transform: scale(0.95); } @keyframes modalIn{ from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } #layout-overlays .modal-header{ text-align: center; margin-bottom: 18px; position: relative; padding: 18px 16px; background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%); border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; } #layout-overlays .modal-header::before{ content: ""; position: absolute; inset: -2px; border-radius: 16px; padding: 2px; background: linear-gradient( 135deg, rgba(99, 102, 241, 0.6), rgba(147, 51, 234, 0.4), rgba(59, 130, 246, 0.4), rgba(99, 102, 241, 0.6) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: borderGlow 3s ease-in-out infinite; } @keyframes borderGlow{ 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } #layout-overlays .modal-header::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0.4; } #layout-overlays .modal-header-title{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; } #layout-overlays .modal-header-icon{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient( 145deg, var(--primary) 0%, var(--primary-dark) 100% ); border-radius: var(--r-sm); box-shadow: 0 8px 18px rgba(47, 99, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; flex-shrink: 0; } #layout-overlays .modal-header-icon::before{ content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transform: rotate(45deg); animation: shine 3s infinite; } @keyframes shine{ 0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 50% { transform: translateX(100%) translateY(100%) rotate(45deg); } } #layout-overlays .modal-header-icon svg, #layout-overlays .modal-header-icon i{ width: 20px; height: 20px; font-size: 20px; color: white; stroke-width: 2.5; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } #layout-overlays .modal-header-title{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; } #layout-overlays .modal-header h3{ font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0; letter-spacing: -0.4px; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); position: relative; } #layout-overlays .modal-header .meta{ font-size: 12px; color: var(--gray-600); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: var(--white); border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.08); } #layout-overlays .verse-container{ margin-bottom: 18px; } #layout-overlays .verse-display{ background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border: 3px solid #ffd700; border-radius: 16px; padding: 36px 24px; text-align: center; min-height: 200px; max-height: 55vh; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 20px rgba(255, 215, 0, 0.15); } #layout-overlays .verse-display.hidden{ cursor: pointer; background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%); box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(99, 102, 241, 0.2), 0 0 20px rgba(99, 102, 241, 0.1); } #layout-overlays .verse-display.hidden::before{ background: linear-gradient( 135deg, rgba(99, 102, 241, 0.8), rgba(147, 51, 234, 0.6), rgba(59, 130, 246, 0.6), rgba(99, 102, 241, 0.8) ); animation: borderPulse 3s ease-in-out infinite; } @keyframes borderPulse{ 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } #layout-overlays .verse-display.hidden:hover{ background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); transform: translateY(-2px); box-shadow: 0 12px 35px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(99, 102, 241, 0.3), 0 0 30px rgba(99, 102, 241, 0.2); } #layout-overlays .verse-display.hidden:hover::before{ animation: borderPulse 1.5s ease-in-out infinite; } #layout-overlays .reveal-prompt{ display: flex; flex-direction: column; align-items: center; gap: 18px; animation: breathe 3s ease-in-out infinite; } @keyframes breathe{ 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } #layout-overlays .reveal-icon{ width: 44px; height: 44px; font-size: 40px; color: var(--primary); stroke-width: 2; transition: all 0.3s ease; filter: drop-shadow(0 2px 6px rgba(47, 99, 234, 0.2)); display: inline-block; } #layout-overlays .verse-display.hidden:hover .reveal-icon{ transform: scale(1.1); color: var(--primary-dark); } #layout-overlays .reveal-text{ font-size: 14px; font-weight: 600; color: var(--gray-600); letter-spacing: -0.2px; margin: 0; } #layout-overlays .verse-display .text{ font-size: 22px; line-height: 1.9; color: #1a1208; font-weight: 600; font-family: 'Georgia', 'Palatino Linotype', 'Book Antiqua', serif; font-style: italic; max-width: 100%; margin: 0; padding: 0 16px; letter-spacing: 0.15px; text-align: center; position: relative; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; white-space: pre-wrap; text-shadow: 0 1px 0 rgba(255, 220, 120, 0.3); } /* Efeito de revelação com fogo subindo */ #layout-overlays .verse-display .text.revealing{ animation: revealText 2.4s cubic-bezier(0.15, 0, 0.25, 1) forwards; position: relative; overflow: visible; } /* Chamas principais subindo de baixo */ #layout-overlays .verse-display .text.revealing::before{ content: ""; position: absolute; bottom: -30px; left: -15%; width: 130%; height: 220%; background: radial-gradient(ellipse 35% 70% at 15% 100%, rgba(255, 60, 0, 0.85) 0%, transparent 65%), radial-gradient(ellipse 28% 60% at 38% 100%, rgba(255, 200, 0, 0.90) 0%, transparent 60%), radial-gradient(ellipse 32% 65% at 62% 100%, rgba(255, 120, 0, 0.80) 0%, transparent 65%), radial-gradient(ellipse 28% 60% at 85% 100%, rgba(255, 50, 0, 0.85) 0%, transparent 60%), radial-gradient(ellipse 22% 50% at 50% 95%, rgba(255, 230, 30, 0.95) 0%, transparent 55%), radial-gradient(ellipse 18% 40% at 28% 95%, rgba(255, 180, 0, 0.75) 0%, transparent 50%), radial-gradient(ellipse 18% 40% at 72% 95%, rgba(255, 160, 10, 0.75) 0%, transparent 50%); animation: fireRise 2.4s ease-out forwards; z-index: 2; pointer-events: none; filter: blur(8px); mix-blend-mode: screen; } /* Halo dourado intenso */ #layout-overlays .verse-display .text.revealing::after{ content: ""; position: absolute; inset: -30% -10%; background: radial-gradient(ellipse 80% 60% at 50% 90%, rgba(255, 200, 40, 0.75) 0%, rgba(255, 120, 0, 0.35) 40%, transparent 70%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 240, 100, 0.45) 0%, transparent 65%); animation: goldenGlow 2.4s ease-out forwards; z-index: 1; pointer-events: none; filter: blur(12px); mix-blend-mode: screen; } @keyframes revealText{ 0% { opacity: 0; filter: blur(14px) brightness(3); transform: translateY(10px) scale(0.96); text-shadow: 0 0 30px rgba(255, 200, 0, 1), 0 0 60px rgba(255, 100, 0, 0.95), 0 0 90px rgba(255, 40, 0, 0.7), 0 0 120px rgba(255, 160, 0, 0.5); color: #ffb830; } 15% { opacity: 0.5; filter: blur(10px) brightness(2.4); text-shadow: 0 0 24px rgba(255, 200, 0, 0.95), 0 0 48px rgba(255, 120, 0, 0.7); color: #e89520; } 35% { opacity: 0.75; filter: blur(5px) brightness(1.8); text-shadow: 0 0 16px rgba(230, 160, 20, 0.85), 0 0 32px rgba(200, 110, 0, 0.5); color: #c07a18; } 60% { opacity: 0.9; filter: blur(1.5px) brightness(1.3); text-shadow: 0 0 10px rgba(200, 140, 20, 0.6), 0 1px 12px rgba(160, 100, 10, 0.3); color: #906215; } 85% { opacity: 0.97; filter: blur(0.3px) brightness(1.05); text-shadow: 0 1px 2px rgba(255, 200, 80, 0.25); color: #2a1a06; } 100% { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0) scale(1); text-shadow: 0 1px 0 rgba(255, 220, 120, 0.3); color: #1a1208; } } @keyframes fireRise{ 0% { opacity: 0; transform: translateY(5%) scaleY(0.2) scaleX(0.8); filter: blur(4px); } 10% { opacity: 1; transform: translateY(0%) scaleY(0.5) scaleX(1); filter: blur(7px); } 35% { opacity: 1; transform: translateY(-35%) scaleY(0.9) scaleX(1.05); filter: blur(9px); } 65% { opacity: 0.75; transform: translateY(-75%) scaleY(1.15) scaleX(0.95); filter: blur(11px); } 100% { opacity: 0; transform: translateY(-140%) scaleY(0.5) scaleX(0.8); filter: blur(18px); } } @keyframes goldenGlow{ 0% { opacity: 0; transform: scaleY(0.3) translateY(30%); filter: blur(8px); } 15% { opacity: 1; transform: scaleY(0.7) translateY(10%); filter: blur(12px); } 45% { opacity: 1; transform: scaleY(1.1) translateY(0%); filter: blur(14px); } 100% { opacity: 0; transform: scaleY(1.3) translateY(-15%); filter: blur(20px); } } /* Animação das partículas de brilho */ @keyframes sparkleFloat{ 0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); } 20% { opacity: 1; } 80% { opacity: 0.8; } 100% { opacity: 0; transform: translate(calc(var(--endX) - 50%), calc(var(--endY) - 50%)) scale(1.5) rotate(var(--rotation)); } } #layout-overlays .sparkle-particle{ animation: sparkleFloat 1s ease-out forwards; } #layout-overlays .verse-display .text::before{ content: '"'; position: absolute; left: -12px; top: -8px; font-size: 36px; color: var(--primary); opacity: 0.12; font-family: Georgia, serif; line-height: 1; } #layout-overlays .verse-display .text::after{ content: '"'; position: absolute; right: -12px; bottom: -20px; font-size: 36px; color: var(--primary); opacity: 0.12; font-family: Georgia, serif; line-height: 1; } @keyframes fadeInUp{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Modal Actions - Botões Lembrei/Esqueci */ #layout-overlays .modal-actions{ display: flex; gap: 10px; margin-top: 18px; width: 100%; } #layout-overlays .btn-action{ flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; padding: 13px 18px; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--tr); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.2); letter-spacing: -0.01em; position: relative; overflow: hidden; } #layout-overlays .btn-action::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100% ); opacity: 0; transition: opacity 0.2s ease; } #layout-overlays .btn-action:hover::before:not(:disabled){ opacity: 1; } #layout-overlays .btn-action svg, #layout-overlays .btn-action i{ width: 21px; height: 21px; font-size: 20px; stroke-width: 2.5; transition: transform 0.2s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } #layout-overlays .btn-action:disabled{ opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); } #layout-overlays .btn-forgot{ background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); color: white; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; } #layout-overlays .btn-forgot::after{ content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } #layout-overlays .btn-forgot:hover:not(:disabled)::after{ opacity: 1; } #layout-overlays .btn-forgot:hover:not(:disabled){ background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #layout-overlays .btn-forgot:hover:not(:disabled) svg{ transform: rotate(-5deg) scale(1.05); } #layout-overlays .btn-forgot:active:not(:disabled){ transform: translateY(0); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2); } #layout-overlays .btn-remembered{ background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%); color: white; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; } #layout-overlays .btn-remembered::after{ content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } #layout-overlays .btn-remembered:hover:not(:disabled)::after{ opacity: 1; } #layout-overlays .btn-remembered:hover:not(:disabled){ background: linear-gradient(135deg, #34d399 0%, #10b981 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #layout-overlays .btn-remembered:hover:not(:disabled) svg{ transform: rotate(5deg) scale(1.05); } #layout-overlays .btn-remembered:active:not(:disabled){ transform: translateY(0); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); } #layout-overlays .review-close-btn{ width: 100%; padding: 15px; background: linear-gradient( 145deg, var(--primary) 0%, var(--primary-dark) 100% ); color: var(--white); border: none; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--tr); margin-top: 10px; box-shadow: 0 8px 20px rgba(47, 99, 234, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: auto; line-height: 1.15; } #layout-overlays .review-close-btn span{ line-height: 1; } #layout-overlays .review-close-btn svg{ width: 18px; height: 18px; stroke-width: 2.5; transition: transform 0.3s ease; } #layout-overlays .review-close-btn::before{ content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transition: left 0.6s ease; } #layout-overlays .review-close-btn:hover::before{ left: 100%; } #layout-overlays .review-close-btn:hover{ background: linear-gradient(145deg, var(--primary-dark) 0%, #1c3f9e 100%); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47, 99, 234, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #layout-overlays .review-close-btn:hover svg, #layout-overlays .review-close-btn:hover i{ transform: rotate(90deg); } #layout-overlays .review-close-btn:active{ transform: translateY(0); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Success feedback */ #layout-overlays .modal-content.success-flash{ animation: successFlash 0.6s ease; position: relative; } #layout-overlays .modal-content.success-flash::after{ content: "✨"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; opacity: 0; animation: sparkle 0.6s ease; pointer-events: none; } @keyframes successFlash{ 0% { background: var(--white); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(99, 102, 241, 0.08); } 20% { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); transform: scale(1.015); box-shadow: 0 24px 70px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(16, 185, 129, 0.2); } 100% { background: var(--white); transform: scale(1); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(99, 102, 241, 0.08); } } @keyframes sparkle{ 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(180deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(360deg); } } /* ========== LOGIN SCREEN ========== */ #layout-overlays .login-overlay{ display: none; position: fixed; inset: 0; background: linear-gradient(140deg, #2f63ea 0%, #214cb8 100%); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } #layout-overlays .login-overlay.active{ display: flex; } #layout-overlays .login-container{ background: var(--white); border-radius: var(--r-lg); padding: 48px 40px; max-width: 420px; width: 100%; box-shadow: var(--shadow-xl); animation: loginIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes loginIn{ from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } #layout-overlays .login-header{ text-align: center; margin-bottom: 36px; } #layout-overlays .login-icon{ font-size: 56px; margin-bottom: 16px; animation: float 3s ease-in-out infinite; } @keyframes float{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } #layout-overlays .login-header h1{ font-size: 28px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; letter-spacing: -0.5px; } #layout-overlays .login-header p{ font-size: 15px; color: var(--gray-600); font-weight: 500; } #layout-overlays .login-form{ display: flex; flex-direction: column; gap: 20px; } #layout-overlays .form-input{ width: 100%; padding: 14px 16px; border: 2px solid var(--gray-200); border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--gray-900); transition: all 0.2s ease; background: var(--white); } #layout-overlays .form-input:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(47, 99, 234, 0.1); } #layout-overlays .form-input::placeholder{ color: var(--gray-400); } #layout-overlays .btn-login{ padding: 16px; background: linear-gradient( 145deg, var(--primary) 0%, var(--primary-dark) 100% ); color: var(--white); border: none; border-radius: var(--r-sm); font-size: 16px; font-weight: 700; cursor: pointer; transition: var(--tr); margin-top: 8px; box-shadow: 0 8px 20px rgba(47, 99, 234, 0.32); position: relative; overflow: hidden; } #layout-overlays .btn-login::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100% ); transform: translateX(-100%); transition: transform 0.3s ease; } #layout-overlays .btn-login:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47, 99, 234, 0.42); } #layout-overlays .btn-login:hover::before{ transform: translateX(0); } #layout-overlays .btn-login:active{ transform: translateY(0); } #layout-overlays .btn-login:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; } #layout-overlays .btn-login span{ position: relative; z-index: 1; } #layout-overlays .btn-login-secondary{ display: inline-flex; align-items: center; justify-content: center; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid rgba(47, 99, 234, 0.32); background: rgba(47, 99, 234, 0.06); color: var(--primary-dark); font-size: 15px; font-weight: 700; text-decoration: none; transition: var(--tr); margin-top: -2px; } #layout-overlays .btn-login-secondary:hover{ transform: translateY(-1px); background: rgba(47, 99, 234, 0.11); border-color: rgba(47, 99, 234, 0.46); } #layout-overlays .btn-login-secondary:active{ transform: translateY(0); } #layout-overlays .login-error{ padding: 12px 16px; background: #fee; color: #c00; border-radius: 10px; font-size: 14px; font-weight: 600; text-align: center; border: 1px solid #fcc; animation: shake 0.5s ease; } #layout-overlays .login-success{ padding: 12px 16px; background: #ecfdf5; color: #065f46; border-radius: 10px; font-size: 14px; font-weight: 600; text-align: center; border: 1px solid #a7f3d0; } @keyframes shake{ 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } #layout-overlays .login-footer{ margin-top: 32px; text-align: center; } #layout-overlays .login-footer p{ font-size: 13px; color: var(--gray-500); font-weight: 500; } #layout-overlays .form-group{ margin-bottom: 14px; } #layout-overlays .form-group label{ display: block; font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; } #layout-overlays .form-group input, #layout-overlays .form-group select, #layout-overlays .form-group textarea{ width: 100%; padding: 12px 14px; border: 2px solid var(--gray-200); border-radius: 8px; font-size: 15px; font-family: inherit; transition: all 0.2s ease; } #layout-overlays .form-group input:focus, #layout-overlays .form-group select:focus, #layout-overlays .form-group textarea:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 99, 234, 0.1); } #layout-overlays .form-group textarea{ resize: vertical; min-height: 80px; } #layout-overlays .btn-submit{ width: 100%; padding: 14px 20px; background: linear-gradient( 145deg, var(--primary) 0%, var(--primary-dark) 100% ); color: var(--white); border: none; border-radius: var(--r-sm); font-size: 16px; font-weight: 700; cursor: pointer; transition: var(--tr); } #layout-overlays .btn-submit:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); } #layout-overlays .btn-submit:active{ transform: translateY(0); } #layout-overlays .btn-submit:disabled{ cursor: not-allowed; opacity: 0.58; transform: none; box-shadow: none; } #layout-overlays .btn-submit:disabled:hover{ transform: none; box-shadow: none; } /* Modal editar verso */ #layout-overlays #editVerseModal .modal-content{ max-width: 460px; padding: 0; overflow: hidden; border-radius: 3px; } #layout-overlays .edit-verse-modal-content{ display: flex; flex-direction: column; } #layout-overlays .edit-verse-modal-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid #e5e9f4; } #layout-overlays .edit-verse-modal-header h3{ margin: 0; font-size: 14px; font-weight: 700; color: #1e2a4a; line-height: 1.3; } #layout-overlays .edit-verse-modal-header .meta{ margin: 2px 0 0; font-size: 11px; color: #7c8caa; line-height: 1.4; } #layout-overlays .edit-verse-close-btn{ flex-shrink: 0; background: none; border: none; padding: 2px 4px; cursor: pointer; color: #9aa5c0; font-size: 16px; line-height: 1; border-radius: 2px; transition: color 0.12s; } #layout-overlays .edit-verse-close-btn:hover{ color: #3b4a6b; } #layout-overlays .edit-verse-tabs{ display: flex; padding: 8px 16px 0; gap: 0; border-bottom: 1px solid #e5e9f4; } #layout-overlays .edit-verse-tab{ background: none; border: none; border-bottom: 2px solid transparent; padding: 5px 12px 7px; font-size: 12px; font-weight: 600; color: #7c8caa; cursor: pointer; margin-bottom: -1px; transition: color 0.12s, border-color 0.12s; } #layout-overlays .edit-verse-tab.active{ color: #4f46e5; border-bottom-color: #4f46e5; } #layout-overlays .edit-verse-tab-content{ padding: 14px 16px; flex: 1; } #layout-overlays .edit-verse-tab-content .form-group{ margin-bottom: 10px; } #layout-overlays .edit-verse-tab-content .form-group:last-child{ margin-bottom: 0; } #layout-overlays .edit-verse-tab-content label{ display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a99; margin-bottom: 3px; } #layout-overlays .edit-verse-tab-content input[type="text"], #layout-overlays .edit-verse-tab-content select, #layout-overlays .edit-verse-tab-content textarea{ width: 100%; border: 1px solid #d0d8f0; border-radius: 2px; padding: 6px 9px; font-size: 13px; color: #1e2a4a; background: #f9fafd; outline: none; transition: border-color 0.12s; } #layout-overlays .edit-verse-tab-content input:focus, #layout-overlays .edit-verse-tab-content select:focus, #layout-overlays .edit-verse-tab-content textarea:focus{ border-color: #6366f1; background: #fff; } #layout-overlays .edit-verse-tab-content input[disabled], #layout-overlays .edit-verse-tab-content select[disabled]{ opacity: 0.5; cursor: not-allowed; } #layout-overlays .edit-verse-tab-content textarea{ resize: vertical; min-height: 72px; line-height: 1.55; } #layout-overlays .edit-trail-phase-row{ display: flex; gap: 16px; } #layout-overlays .edit-trail-phase-opt{ display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #3b4a6b; cursor: pointer; text-transform: none; letter-spacing: 0; } #layout-overlays .edit-trail-phase-opt input[type="radio"]{ width: auto; accent-color: #4f46e5; } #layout-overlays .edit-verse-remove-trail-btn{ margin-top: 12px; background: none; border: 1px solid #fca5a5; border-radius: 2px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: #dc2626; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background 0.12s; } #layout-overlays .edit-verse-remove-trail-btn:hover{ background: #fef2f2; } #layout-overlays .edit-verse-modal-actions{ display: flex; gap: 6px; justify-content: flex-end; padding: 10px 16px 14px; border-top: 1px solid #e5e9f4; } /* Modal favoritar verso (leitura) */ #layout-overlays #favoriteVerseModal .modal-content{ max-width: 560px; } #layout-overlays .favorite-verse-modal-header .meta{ margin-top: 2px; } #layout-overlays .favorite-verse-modal-body{ margin-bottom: 6px; } #layout-overlays .favorite-verse-modal-reference{ font-size: 20px; font-weight: 800; color: #1f3f5e; margin-bottom: 10px; } #layout-overlays .favorite-verse-modal-text{ margin: 0; border: 1px solid #dce8f2; border-radius: 12px; background: #f8fcff; color: #2b4661; font-size: 15px; line-height: 1.55; padding: 12px 14px; max-height: 220px; overflow-y: auto; overflow-x: hidden; } #layout-overlays .favorite-verse-modal-actions{ margin-top: 12px; } #layout-overlays .favorite-verse-modal-actions .btn-action{ min-height: 46px; flex: 1; } #layout-overlays .favorite-verse-cancel{ background: linear-gradient(135deg, #eef2f7 0%, #d9e3ef 100%); color: #314b66; border: 1px solid #c4d2e0; } #layout-overlays .favorite-verse-cancel:hover:not(:disabled){ background: linear-gradient(135deg, #e3eaf2 0%, #ccd8e7 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(48, 73, 102, 0.14); } #layout-overlays .favorite-verse-confirm{ background: linear-gradient(135deg, #76d7a3 0%, #31b87c 100%); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); } #layout-overlays .favorite-verse-confirm:hover:not(:disabled){ background: linear-gradient(135deg, #4ecb90 0%, #1fa968 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24, 147, 90, 0.25); } /* ======================================================== Modal: remover verso do deck ======================================================== */ #layout-overlays #deleteVerseModal .modal-content{ max-width: 560px; } #layout-overlays .delete-verse-modal-icon{ background: linear-gradient(135deg, #fca5a5 0%, #ef4444 100%); } #layout-overlays .delete-verse-modal-header .meta{ margin-top: 2px; } #layout-overlays .delete-verse-modal-body{ margin-bottom: 6px; } #layout-overlays .delete-verse-modal-reference{ font-size: 20px; font-weight: 800; color: #1f3f5e; margin-bottom: 10px; } #layout-overlays .delete-verse-modal-text{ margin: 0; border: 1px solid #f3d5d5; border-radius: 12px; background: #fff8f8; color: #2b4661; font-size: 15px; line-height: 1.55; padding: 12px 14px; max-height: 220px; overflow-y: auto; overflow-x: hidden; } #layout-overlays .delete-verse-modal-actions{ margin-top: 12px; } #layout-overlays .delete-verse-modal-actions .btn-action{ min-height: 46px; flex: 1; } #layout-overlays .delete-verse-cancel{ background: linear-gradient(135deg, #eef2f7 0%, #d9e3ef 100%); color: #314b66; border: 1px solid #c4d2e0; } #layout-overlays .delete-verse-cancel:hover:not(:disabled){ background: linear-gradient(135deg, #e3eaf2 0%, #ccd8e7 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(48, 73, 102, 0.14); } #layout-overlays .delete-verse-confirm{ background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); } #layout-overlays .delete-verse-confirm:hover:not(:disabled){ background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25); } /* ======================================================== Modal: comparar verso em todas as versões ======================================================== */ #layout-overlays #verseVersionsModal .modal-content, #layout-overlays .verse-versions-modal-content{ max-width: 1600px; width: 99vw; max-height: 88vh; display: flex; flex-direction: column; } #layout-overlays .verse-versions-modal-header{ position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left; padding: 10px 48px 10px 16px; margin-bottom: 0; } #layout-overlays .verse-versions-modal-header .modal-header-title{ display: contents; } #layout-overlays .verse-versions-modal-header .modal-header-icon{ width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; } #layout-overlays .verse-versions-modal-header .modal-header-icon svg, #layout-overlays .verse-versions-modal-header .modal-header-icon i{ width: 15px; height: 15px; font-size: 14px; } #layout-overlays .verse-versions-modal-header h3{ font-size: 16px; flex-shrink: 0; margin: 0; } #layout-overlays .verse-versions-modal-header .meta{ font-size: 11px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #layout-overlays .verse-versions-close-btn{ position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d5e4f0; background: #f5f9fd; color: #4a6a88; cursor: pointer; transition: all 0.15s ease; padding: 0; } #layout-overlays .verse-versions-close-btn:hover{ background: #e8f0f8; border-color: #a8c4d8; color: #1e3a55; } #layout-overlays .verse-versions-modal-body{ flex: 1; overflow-y: auto; padding: 6px 12px 8px; display: flex; flex-direction: column; gap: 6px; } #layout-overlays .verse-versions-item{ border: 1px solid #dde9f4; border-radius: 7px; padding: 6px 10px; background: #f9fcff; display: flex; flex-direction: row; align-items: baseline; gap: 8px; transition: border-color 0.14s, background 0.14s, box-shadow 0.14s; cursor: pointer; user-select: none; } #layout-overlays .verse-versions-item:hover{ border-color: #9dc4e0; background: #f0f7ff; } #layout-overlays .verse-versions-item.selected{ border-color: #2b8fc4; background: #e8f4fb; box-shadow: 0 0 0 2px rgba(43, 143, 196, 0.25); } #layout-overlays .verse-versions-item.selected .verse-versions-badge{ background: linear-gradient(135deg, #1352a0 0%, #1e6fa8 100%); box-shadow: 0 2px 6px rgba(19, 82, 160, 0.35); } #layout-overlays .verse-versions-badge{ display: inline-flex; align-items: center; flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(135deg, #1e63a8 0%, #2b8fc4 100%); color: #fff; border-radius: 5px; padding: 2px 7px; min-width: 46px; justify-content: center; } #layout-overlays .verse-versions-text{ margin: 0; font-size: 14px; line-height: 1.4; color: #1e3550; } #layout-overlays .verse-versions-loading, #layout-overlays .verse-versions-empty{ text-align: center; padding: 30px 0; color: #7a9bb8; font-size: 14px; } #layout-overlays .verse-versions-modal-actions{ margin-top: 0; padding: 6px 16px 8px; border-top: 1px solid #dce8f4; display: flex; gap: 10px; } #layout-overlays .verse-versions-cancel{ background: linear-gradient(135deg, #eef2f7 0%, #d9e3ef 100%); color: #314b66; border: 1px solid #c4d2e0; flex: 1; min-height: 32px; padding: 0 12px; } #layout-overlays .verse-versions-cancel:hover:not(:disabled){ background: linear-gradient(135deg, #e3eaf2 0%, #ccd8e7 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(48, 73, 102, 0.14); } #layout-overlays .verse-versions-confirm{ background: linear-gradient(135deg, #76d7a3 0%, #31b87c 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); flex: 1; min-height: 32px; padding: 0 12px; } #layout-overlays .verse-versions-confirm:hover:not(:disabled){ background: linear-gradient(135deg, #4ecb90 0%, #1fa968 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24, 147, 90, 0.25); } #layout-overlays #editVerseText{ width: 100%; padding: 12px 14px; border: 2px solid var(--gray-200); border-radius: 8px; font-size: 15px; font-family: inherit; min-height: 150px; } #layout-overlays #editVerseRef{ width: 100%; padding: 10px 12px; border: 2px solid var(--gray-100); border-radius: 8px; background: var(--gray-50); color: var(--gray-700); } #layout-overlays #editVerseModal .modal-actions .btn-action{ min-width: 110px; } @media (min-width: 1024px){ #layout-overlays .verse-catalog-item{ display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 12px; } #layout-overlays .verse-catalog-reference{ margin-bottom: 0; text-align: left; } #layout-overlays .verse-catalog-text{ font-size: 15px; } } @media (min-width: 1280px){ #layout-overlays #screen-verses .container{ max-width: 1400px; } #layout-overlays #screen-verses .list-card{ padding: 16px 20px; } #layout-overlays .verse-catalog-item{ grid-template-columns: 200px 1fr auto; gap: 18px; } } /* Totais de versos */ #layout-overlays .verse-totals{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } #layout-overlays .verse-total-card{ background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } #layout-overlays .verse-total-card.highlight{ border-color: var(--primary-100, #dbeafe); background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); } #layout-overlays .verse-total-label{ font-size: 12px; color: var(--gray-600); font-weight: 600; } #layout-overlays .verse-total-value{ font-size: 20px; font-weight: 800; color: var(--gray-900); } @media (min-width: 1280px){ #layout-overlays .verse-totals{ grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; } } #layout-overlays .list-card{ background: var(--white); border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.05); position: relative; } #layout-overlays .list-card::before{ content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } #layout-overlays .list-card h2{ font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; } #layout-overlays .list-item{ padding: 12px; border-bottom: 1px solid var(--gray-200); cursor: pointer; transition: all 0.2s ease; } #layout-overlays .list-item:hover{ background: var(--gray-50); } #layout-overlays .list-item:last-child{ border-bottom: none; } #layout-overlays .list-item-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } #layout-overlays .list-item-title{ font-size: 16px; font-weight: 600; color: var(--gray-900); } #layout-overlays .list-item-status{ font-size: 11px; padding: 4px 8px; border-radius: 6px; font-weight: 600; text-transform: uppercase; } #layout-overlays .list-item-status.learn{ background: #eff6ff; color: var(--primary); } #layout-overlays .list-item-status.review{ background: #ecfdf5; color: var(--success); } #layout-overlays .list-item-status.inactive{ background: var(--gray-100); color: var(--gray-500); } #layout-overlays .list-item-meta{ font-size: 13px; color: var(--gray-600); } /* ═══════════════════════════════════════════════════════ STRONG CODE MODAL ═══════════════════════════════════════════════════════ */ #layout-overlays .strong-code-modal-content{ max-width: 1180px; } #layout-overlays{ --strong-script-font: "Noto Sans Hebrew", "Noto Sans Greek", "SBL BibLit", "Ezra SIL", "Gentium Plus", "Segoe UI Symbol", "Arial Unicode MS", serif; } #layout-overlays .strong-code-modal-header{ position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left; padding: 8px 46px 8px 12px; margin-bottom: 0; background: linear-gradient(135deg, #f7fbff 0%, #fef8ea 100%); border-bottom: 1px solid #e6eef4; } #layout-overlays .strong-code-modal-header .modal-header-title{ display: contents; } #layout-overlays .strong-code-modal-header .modal-header-icon{ width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; } #layout-overlays .strong-code-modal-header .modal-header-icon svg, #layout-overlays .strong-code-modal-header .modal-header-icon i{ width: 15px; height: 15px; font-size: 14px; } #layout-overlays .strong-code-modal-header h3{ font-size: 16px; margin: 0; display: inline-flex; align-items: center; gap: 8px; min-width: 0; } #layout-overlays .strong-code-header-inline-meta{ font-size: 11px; font-weight: 600; color: #5b7182; background: #ffffff; border: 1px solid #d9e4ec; border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; } #layout-overlays .strong-code-modal-body{ padding: 12px 14px 8px; max-height: calc(88vh - 145px); overflow-y: auto; overflow-x: hidden; } #layout-overlays .strong-code-dictionary-layout.row{ display: flex; flex-wrap: nowrap; gap: 0; height: 280px; margin-bottom: 10px; align-items: stretch; margin-left: 0; margin-right: 0; --bs-gutter-x: 0; } #layout-overlays .strong-code-dictionary-layout.row > [class^="col-"]{ padding-left: 0; padding-right: 0; } #layout-overlays .strong-code-dictionary-layout.row .col-9{ width: 75%; flex: 0 0 75%; } #layout-overlays .strong-code-dictionary-layout.row .col-3{ width: 25%; flex: 0 0 25%; } #layout-overlays .strong-code-dictionary-main, #layout-overlays .strong-code-dictionary-side{ min-width: 0; } #layout-overlays .strong-code-dictionary-main{ display: flex; height: 100%; min-height: 0; } #layout-overlays .strong-code-dictionary-side{ display: flex; flex-direction: column; gap: 10px; height: 100%; } #layout-overlays .strong-code-search-bar{ border: 1px solid #cadbe8; border-radius: 12px; background: linear-gradient(180deg, #f9fcff 0%, #f2f8fd 100%); padding: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } #layout-overlays .strong-code-search-bar label{ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #4d6677; margin-bottom: 6px; font-weight: 700; } #layout-overlays .strong-code-search-controls{ display: flex; gap: 7px; align-items: center; } #layout-overlays .strong-code-search-controls input{ flex: 1; min-width: 0; border: 1px solid #b6ccdf; border-radius: 8px; background: #ffffff; padding: 8px 10px; font-size: 14px; color: #16394c; font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 700; } #layout-overlays .strong-code-search-controls input:focus{ outline: none; border-color: #8fb5da; box-shadow: 0 0 0 3px rgba(53, 119, 186, 0.14); } #layout-overlays .strong-code-search-btn{ border: 1px solid #8baeda; background: linear-gradient(180deg, #e8f2ff 0%, #d7e8ff 100%); color: #23476d; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.35; transition: background 0.16s, border-color 0.16s; } #layout-overlays .strong-code-search-btn:hover{ background: linear-gradient(180deg, #deecff 0%, #cfe2ff 100%); border-color: #799fd1; } #layout-overlays .strong-code-search-feedback{ min-height: 16px; margin-top: 6px; font-size: 12px; color: #5f7a8c; } #layout-overlays .strong-code-search-feedback.error{ color: #a23b3b; } #layout-overlays .strong-code-search-feedback.success{ color: #2a6b47; } #layout-overlays .strong-code-dictionary-inline{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; } #layout-overlays .strong-code-dictionary-inline strong{ color: #1f4259; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } #layout-overlays .strong-code-dictionary-inline span{ color: #1f4866; font-size: 14px; font-weight: 700; } #layout-overlays .strong-code-dictionary-card{ border: 1px solid #c9dbe8; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%); padding: 12px; display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-shadow: 0 8px 20px rgba(33, 76, 118, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.95); } #layout-overlays .strong-code-dictionary-card::-webkit-scrollbar{ width: 8px; } #layout-overlays .strong-code-dictionary-card::-webkit-scrollbar-thumb{ background: #b5cadb; border-radius: 999px; } #layout-overlays .strong-code-side-card{ border: 1px solid #cadbe8; border-radius: 12px; background: linear-gradient(180deg, #f9fcff 0%, #f2f8fd 100%); padding: 8px; display: grid; gap: 7px; flex: 1; min-height: 0; } #layout-overlays .strong-code-side-item{ border: 1px solid #d4e2ec; border-radius: 10px; background: #ffffff; padding: 8px; display: grid; gap: 2px; } #layout-overlays .strong-code-side-item strong{ font-size: 10px; color: #4f697c; text-transform: uppercase; letter-spacing: 0.06em; } #layout-overlays .strong-code-side-item span{ font-size: 15px; color: #17384f; font-weight: 700; word-break: break-word; } #layout-overlays #strongCodeDictTopic, #layout-overlays #strongCodeDictLexeme{ font-family: var(--strong-script-font); font-size: 16px; line-height: 1.35; letter-spacing: 0; } #layout-overlays #strongCodeDictTranslit, #layout-overlays #strongCodeDictPronunciation{ font-size: 15px; } #layout-overlays .strong-code-dictionary-definition{ border: 1px solid #cddbe6; border-radius: 12px; background: #ffffff; color: #1d3344; font-size: 13px; line-height: 1.5; font-family: "Noto Serif Hebrew", "Noto Serif", "SBL BibLit", "Ezra SIL", "Gentium Plus", Georgia, serif; font-weight: 500; padding: 12px; overflow: visible; } #layout-overlays .strong-code-dictionary-definition.empty{ color: #5f7a8c; font-style: italic; } #layout-overlays .strong-code-dict-summary{ margin: 0 0 8px; font-size: 12px; color: #17354a; font-weight: 700; } #layout-overlays .strong-code-dict-paragraph{ margin: 0 0 8px; font-size: 13px; color: #223c4f; } #layout-overlays .strong-code-dict-list{ margin: 0 0 5px 18px; padding: 0; } #layout-overlays .strong-code-dict-list li{ margin-bottom: 6px; font-size: 13px; color: #254257; } #layout-overlays .strong-code-modal-body::-webkit-scrollbar{ width: 8px; } #layout-overlays .strong-code-modal-body::-webkit-scrollbar-thumb{ background: #b8cbd9; border-radius: 999px; } #layout-overlays .strong-code-dict-empty-text{ margin: 0; color: #5f7a8c; font-style: italic; } #layout-overlays .strong-code-modal-list{ height: 360px; overflow: auto; border: 1px solid #cfdeea; border-radius: 10px; background: #ffffff; } #layout-overlays .strong-code-results-layout{ display: grid; grid-template-columns: minmax(200px, 0.58fr) minmax(500px, 1.52fr); gap: 12px; align-items: stretch; margin-top: 14px; padding: 12px; border: 1px solid #d2e0eb; border-radius: 12px; background: linear-gradient(180deg, #f9fcff 0%, #f4f9fe 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } #layout-overlays .strong-code-row{ display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid #edf2f6; font-size: 13px; } #layout-overlays .strong-code-row:last-child{ border-bottom: none; } #layout-overlays .strong-code-book-name{ flex: 1; min-width: 0; font-weight: 700; color: #16394c; } #layout-overlays .strong-code-book-total{ color: #0e5a3a; font-size: 13px; font-weight: 800; min-width: 34px; text-align: right; } #layout-overlays .strong-code-book-load{ border: 1px solid #bfd2e7; background: linear-gradient(180deg, #f8fbff 0%, #ebf3ff 100%); color: #24507b; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1.35; transition: background 0.16s, border-color 0.16s; } #layout-overlays .strong-code-book-load:hover{ background: linear-gradient(180deg, #eff6ff 0%, #e1edff 100%); border-color: #9fbde0; } #layout-overlays .strong-code-book-verses{ border: 1px solid #cfdeea; border-radius: 10px; background: #fcfeff; height: 360px; display: flex; flex-direction: column; } #layout-overlays .strong-code-book-verses-header{ padding: 9px 10px; border-bottom: 1px solid #e8f0f5; background: linear-gradient(180deg, #f8fcff 0%, #f2f8fe 100%); } #layout-overlays .strong-code-book-verses-header strong{ color: #264961; font-size: 12px; letter-spacing: 0.01em; } #layout-overlays .strong-code-book-verses-list{ flex: 1; overflow: auto; } #layout-overlays .strong-code-verse-row{ padding: 8px 10px; border-bottom: 1px solid #edf2f6; } #layout-overlays .strong-code-verse-row:last-child{ border-bottom: none; } #layout-overlays .strong-code-verse-ref{ font-size: 12px; font-weight: 700; color: #2a5776; margin-bottom: 2px; } #layout-overlays .strong-code-verse-text{ font-size: 14px; color: #264055; line-height: 1.58; display: block; } /* Tokens Strong dentro da listagem do modal */ #layout-overlays .strong-code-verse-text .reader-strong-plain{ color: inherit; font-weight: inherit; background: none; border: none; padding: 0; margin: 0; display: inline; } #layout-overlays .strong-code-verse-text .reader-strong-original{ display: inline-block; font-style: italic; font-weight: 800; color: #0f5132; background: linear-gradient(180deg, #ecfdf3 0%, #dcf7e7 100%); border: 1px solid #98ddb8; border-radius: 8px; padding: 0 6px; margin: 0 2px 2px 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(15, 81, 50, 0.12); } #layout-overlays .strong-code-verse-text .reader-strong-original.strong-original-match{ background: linear-gradient(180deg, #ddf8e9 0%, #c9f2dc 100%); border-color: #63c58d; color: #0b4a2d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(11, 74, 45, 0.18); } #layout-overlays .strong-code-verse-text .reader-strong-code{ display: inline-block; color: #1d4ed8; background: linear-gradient(180deg, #f3f8ff 0%, #e8f1ff 100%); border: 1px solid #c9dcfb; border-radius: 7px; padding: 0 6px; margin: 0 2px 2px 0; font-size: 11px; font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 800; letter-spacing: 0.02em; } #layout-overlays .strong-code-verse-text .reader-strong-code:hover{ background: linear-gradient(180deg, #ebf3ff 0%, #deebff 100%); border-color: #b4cff7; } #layout-overlays .strong-code-verse-text .reader-strong-code.strong-code-match{ background: linear-gradient(180deg, #e5f0ff 0%, #d7e8ff 100%); border-color: #8eb7f8; color: #1e40af; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 4px rgba(30, 64, 175, 0.14); } #layout-overlays .strong-code-no-context{ color: #8aa0b1; font-size: 12px; font-style: italic; } @media (max-width: 760px){ #layout-overlays .strong-code-dictionary-layout.row{ display: block; height: auto; } #layout-overlays .strong-code-dictionary-layout.row .col-9, #layout-overlays .strong-code-dictionary-layout.row .col-3{ width: 100%; flex: 0 0 auto; } #layout-overlays .strong-code-dictionary-main{ margin-bottom: 10px; } #layout-overlays .strong-code-dictionary-side{ height: auto; } #layout-overlays .strong-code-dictionary-card{ max-height: 320px; } #layout-overlays .strong-code-search-controls{ flex-direction: column; align-items: stretch; } #layout-overlays .strong-code-search-btn{ width: 100%; } #layout-overlays .strong-code-results-layout{ grid-template-columns: 1fr; margin-top: 10px; padding: 10px; } #layout-overlays .strong-code-modal-list, #layout-overlays .strong-code-book-verses{ height: auto; max-height: 320px; } } #layout-overlays .strong-code-loading, #layout-overlays .strong-code-empty{ padding: 16px; text-align: center; color: #678194; font-size: 13px; font-weight: 600; } #layout-overlays .reader-xref-grid::-webkit-scrollbar-thumb{ background: #b0ccd6; border-radius: 999px; } #layout-overlays .reader-xref-row{ display: flex; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid #dde8ed; border-radius: 7px; padding: 7px 9px; cursor: default; transition: border-color 0.14s, box-shadow 0.14s; } #layout-overlays .reader-xref-row:hover{ border-color: #8dcfdf; box-shadow: 0 2px 7px rgba(11, 93, 108, 0.09); } #layout-overlays .reader-xref-pill{ flex-shrink: 0; background: #0b5d6c; color: #fff; border-radius: 5px; padding: 2px 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.5; } #layout-overlays .reader-xref-body{ flex: 1; min-width: 0; } #layout-overlays .reader-xref-body-text{ font-size: 13.5px; line-height: 1.5; color: #314861; overflow-wrap: break-word; } #layout-overlays .reader-xref-body-text em{ color: #8fa3b5; font-size: 11.5px; } #layout-overlays .reader-xref-votes{ display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 10px; color: #8fa3b5; vertical-align: middle; white-space: nowrap; } #layout-overlays .reader-xref-vote-bar{ display: inline-flex; height: 3px; width: 36px; border-radius: 999px; background: #e0eaf2; overflow: hidden; } #layout-overlays .reader-xref-vote-fill{ height: 100%; background: #bf8a43; border-radius: 999px; } /* Reserva estrutural antes da injeção do header/footer. */ body.app-page { padding-top: var(--app-header-height); padding-bottom: var(--app-bottom-nav-height); } /* ========================================================================== VERSE VERSIONS — responsive ownership compartilhado Fase 3.3 · Consolidado de reader.css e verses.css ========================================================================== */ @media (max-width: 768px) { #layout-overlays .verse-versions-modal-body { padding: 3px 8px 4px; gap: 3px; } #layout-overlays .verse-versions-item { padding: 4px 8px; gap: 6px; border-radius: 6px; } #layout-overlays .verse-versions-text { font-size: 12.5px; line-height: 1.38; } #layout-overlays .verse-versions-badge { font-size: 9px; padding: 1px 5px; min-width: 36px; } }