/* Aplicação de hinários (PWA) — aspeto de app nativa. Azul e branco; tema escuro e claro. */
:root { --bg: #061746; --bg2: #0a2160; --card: #0d2a78; --line: rgba(255, 255, 255, .12); --txt: #fff; --mute: rgba(255, 255, 255, .66); --acc: #2f7bff; --acc2: #8fb8ff; --ok: #5ad1c5; --bar: rgba(6, 23, 70, .94); --field: rgba(255, 255, 255, .08); --chip: rgba(255, 255, 255, .1); --lyr: var(--card); --lyr-txt: #fff; --sheet: #0c1d55; --tab: 66px; --top: 60px; --fs: 1; --serif: "Fraunces", Georgia, serif; --sans: "Manrope", "Inter", system-ui, sans-serif; }
body.ap-claro { --bg: #eef4ff; --bg2: #fff; --card: #fff; --line: #dbe6fb; --txt: #0b1a3d; --mute: #5b6b8a; --acc: #0057e5; --acc2: #0057e5; --ok: #0a8a7f; --bar: rgba(255, 255, 255, .94); --field: #fff; --chip: #e7f0ff; --lyr: #fff; --lyr-txt: #1b2742; --sheet: #fff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; transition: background .3s, color .3s; }
body { overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ap-lyrics, .ap-lyrics * , input { -webkit-user-select: text; user-select: text; }
button, input { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───────── ecrã de arranque ───────── */
#ap-splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(47, 123, 255, .5), transparent 70%), linear-gradient(170deg, #040f3a, #0a2a85); color: #fff; transition: opacity .5s ease, visibility .5s; }
#ap-splash.out { opacity: 0; visibility: hidden; }
#ap-splash img { width: 108px; height: 108px; padding: 10px; border-radius: 28px; background: #fff; box-shadow: 0 20px 50px rgba(0, 20, 90, .55); animation: spPop .8s cubic-bezier(.2, .8, .2, 1) both; }
#ap-splash strong { font: 700 22px "Manrope", sans-serif; letter-spacing: .14em; animation: spUp .8s .15s both; }
#ap-splash small { font: 500 11px "Inter", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #9cc3ff; animation: spUp .8s .3s both; }
#ap-splash i { width: 34px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; margin-top: 18px; position: relative; animation: spUp .8s .4s both; }
#ap-splash i::after { content: ""; position: absolute; inset: 0; width: 40%; background: #8fb8ff; border-radius: 3px; animation: spBar 1s ease-in-out infinite alternate; }
@keyframes spPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spBar { to { left: 60%; } }

#app { display: flex; flex-direction: column; min-height: 100%; padding-top: env(safe-area-inset-top); }
.ap-top { position: sticky; top: env(safe-area-inset-top); z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--top); padding: 0 14px 0 16px; background: var(--bar); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.ap-top img { width: 36px; height: 36px; padding: 3px; border-radius: 11px; background: #fff; box-shadow: 0 4px 12px rgba(0, 20, 90, .25); }
.ap-top h1 { flex: 1; min-width: 0; margin: 0; font: 600 18px "Manrope", sans-serif; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ib { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--chip); color: var(--txt); cursor: pointer; }
.ap-ib:active { transform: scale(.94); }
.ap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(90, 209, 197, .25); }
.ap-dot.off { background: #ff8a8a; box-shadow: 0 0 0 3px rgba(255, 138, 138, .25); }

.ap-view { flex: 1; padding: 16px 16px calc(var(--tab) + 28px + env(safe-area-inset-bottom)); outline: 0; max-width: 760px; width: 100%; margin: 0 auto; animation: apIn .28s both; }
@keyframes apIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ap-tabs { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: flex; height: calc(var(--tab) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bar); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.ap-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mute); font: 500 11px "Inter", sans-serif; transition: color .2s; }
.ap-tabs a.is-on { color: var(--txt); font-weight: 600; }
.ap-tabs a.is-on svg { stroke: var(--acc2); transform: translateY(-1px); }

.ap-h2 { margin: 22px 4px 12px; font: 600 12px "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2); }
.ap-h2:first-child { margin-top: 4px; }
.ap-banner { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding: 16px; border-radius: 20px; background: linear-gradient(120deg, #0a3fb8, #2f7bff); color: #fff; }
.ap-banner > div { flex: 1; min-width: 0; }
.ap-banner strong { display: block; font: 600 15px "Manrope", sans-serif; }
.ap-banner small { display: block; margin-top: 3px; font-size: 12.5px; opacity: .92; line-height: 1.45; }
.ap-banner button { flex: none; padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: #0057e5; font: 600 13px "Inter", sans-serif; cursor: pointer; }
.ap-card { display: flex; gap: 14px; margin-bottom: 12px; padding: 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.ap-cover { flex: none; width: 74px; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 12px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0a3fb8, #2f7bff); box-shadow: 0 8px 20px rgba(0, 20, 90, .25); }
.ap-cover img { width: 100%; height: 100%; object-fit: cover; }
.ap-cover svg { width: 28px; height: 28px; opacity: .75; }
.ap-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-info h3 { margin: 0; font: 600 16px/1.25 "Manrope", sans-serif; letter-spacing: -.01em; }
.ap-info p { margin: 0; font-size: 12.5px; color: var(--mute); }
.ap-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--txt); font: 600 13px "Inter", sans-serif; cursor: pointer; }
.ap-btn.p { background: var(--acc); border-color: var(--acc); color: #fff; }
.ap-btn.ok { background: rgba(90, 209, 197, .16); border-color: rgba(90, 209, 197, .5); color: var(--ok); }
.ap-btn.danger { color: #ff8a8a; border-color: rgba(255, 138, 138, .4); }
.ap-btn:active { transform: scale(.97); }
.ap-btn[disabled] { opacity: .5; pointer-events: none; }
.ap-btn svg { width: 17px; height: 17px; }
.ap-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px "Inter", sans-serif; color: var(--ok); }
.ap-tag.up { color: #e0a321; }

/* início: continuar e hino do dia */
.ap-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding: 18px; border-radius: 24px; color: #fff; background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(143, 184, 255, .4), transparent 60%), linear-gradient(130deg, #061746, #0a3fb8 70%, #2f7bff); box-shadow: 0 18px 40px rgba(0, 60, 170, .25); }
.ap-hero .ap-num { background: rgba(255, 255, 255, .18); box-shadow: none; }
.ap-hero .k { font: 700 10.5px "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #bcd6ff; }
.ap-hero strong { display: block; margin: 3px 0; font: 600 18px/1.25 "Manrope", sans-serif; letter-spacing: -.02em; }
.ap-hero small { display: block; font-size: 12.5px; opacity: .85; line-height: 1.45; }
.ap-hero > span:last-child { margin-left: auto; opacity: .8; }
.ap-hero.dia { background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(90, 209, 197, .3), transparent 60%), linear-gradient(130deg, #0a2160, #0d3fa8); }

/* lista de hinos */
.ap-search { position: relative; margin-bottom: 12px; }
.ap-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--acc2); width: 19px; height: 19px; }
.ap-search input { width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--line); border-radius: 16px; background: var(--field); color: var(--txt); font: 400 16px "Inter", sans-serif; outline: 0; }
.ap-search input:focus { border-color: var(--acc2); box-shadow: 0 0 0 3px rgba(47, 123, 255, .22); }
.ap-search input::placeholder { color: var(--mute); }
.ap-list { display: grid; gap: 8px; }
.ap-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ap-row:active { transform: scale(.985); }
.ap-row[hidden] { display: none; }
.ap-num { flex: none; min-width: 46px; height: 46px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #2f7bff, #0057e5); font: 700 16px "Manrope", sans-serif; box-shadow: 0 6px 14px rgba(0, 87, 229, .3); }
.ap-row strong { display: block; font: 600 15px/1.3 "Manrope", sans-serif; letter-spacing: -.01em; }
.ap-row small { display: block; margin-top: 2px; color: var(--mute); font-size: 12.5px; line-height: 1.4; }
.ap-lang { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--acc2); font: 700 10px "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.ap-vazio { padding: 40px 20px; text-align: center; color: var(--mute); line-height: 1.6; }
.ap-vazio b { display: block; margin-bottom: 6px; color: var(--txt); font: 600 17px "Manrope", sans-serif; }

/* leitura */
.ap-hhead { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ap-hhead .ap-num { min-width: 62px; height: 62px; font-size: 24px; border-radius: 18px; }
.ap-hhead h2 { margin: 0; font: 600 22px/1.2 "Manrope", sans-serif; letter-spacing: -.02em; }
.ap-hhead small { display: block; margin-top: 4px; color: var(--mute); font-size: 12.5px; }
.ap-tools { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.ap-tools::-webkit-scrollbar { display: none; }
.ap-tools button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--txt); font: 600 13px "Inter", sans-serif; cursor: pointer; }
.ap-tools button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.ap-tools button.proj { background: var(--acc); border-color: var(--acc); color: #fff; }
.ap-tools svg { width: 16px; height: 16px; }
.ap-lyrics { padding: 24px 20px; border-radius: 24px; background: var(--lyr); color: var(--lyr-txt); border: 1px solid var(--line); display: grid; gap: 22px; }
.ap-st { position: relative; padding-left: 40px; }
.ap-st > b { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--chip); color: var(--acc2); font: 700 12px "Manrope", sans-serif; }
.ap-st p { margin: 0; font: 400 calc(1.2rem * var(--fs))/1.8 var(--serif); white-space: pre-line; }
body.ap-sans .ap-st p { font-family: var(--sans); font-weight: 500; line-height: 1.7; letter-spacing: -.005em; }
body.ap-centro .ap-lyrics { text-align: center; }
body.ap-centro .ap-st { padding-left: 0; }
body.ap-centro .ap-st > b { position: static; margin: 0 auto 8px; }
.ap-st.r { margin-inline: -8px; padding: 16px 16px 16px 52px; border-radius: 18px; background: var(--chip); border-left: 3px solid var(--acc); }
body.ap-centro .ap-st.r { padding: 16px; border-left: 0; border-top: 3px solid var(--acc); }
.ap-st.r > b { left: 12px; top: 16px; background: var(--acc); color: #fff; }
body.ap-centro .ap-st.r > b { left: auto; top: auto; }
.ap-st.r p { font-style: italic; }
body.ap-sans .ap-st.r p { font-style: normal; font-weight: 600; }
.ap-st.r em { display: block; margin-bottom: 4px; font: 700 10.5px "Inter", sans-serif; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--acc2); }
body.ap-sem-refrao .ap-st.r { background: none; border: 0; padding-left: 40px; margin: 0; }
body.ap-sem-refrao .ap-st.r > b { left: 0; top: 2px; background: var(--chip); color: var(--acc2); }
.ap-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.ap-pager .ap-btn { flex: 1; padding: 13px; }
.ap-pager .ap-btn[disabled] { opacity: .3; }

/* botão flutuante, folhas e teclado */
.ap-fab { position: fixed; z-index: 24; right: 16px; bottom: calc(var(--tab) + 16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, #2f7bff, #0057e5); color: #fff; box-shadow: 0 14px 30px rgba(0, 87, 229, .5); cursor: pointer; }
.ap-fab:active { transform: scale(.94); }
.ap-fab svg { width: 26px; height: 26px; }
.ap-modal { position: fixed; z-index: 40; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 8, 30, .7); backdrop-filter: blur(5px); animation: apFade .2s both; }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
.ap-sheet { width: min(100%, 460px); padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--sheet); color: var(--txt); border: 1px solid var(--line); animation: apUp .3s both; }
@keyframes apUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ap-sheet header { display: flex; align-items: center; justify-content: space-between; }
.ap-sheet h2 { margin: 0; font: 600 17px "Manrope", sans-serif; }
.ap-sheet header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--txt); cursor: pointer; }
.ap-disp { padding: 14px 6px 16px; text-align: center; min-height: 100px; }
.ap-disp strong { display: block; font: 300 54px/1.1 "Manrope", sans-serif; letter-spacing: .04em; }
.ap-disp strong.bad { color: #ff7a7a; }
.ap-disp small { display: block; margin-top: 6px; min-height: 20px; color: var(--acc2); font-size: 14px; }
.ap-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
.ap-keys button { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--txt); font: 400 27px "Manrope", sans-serif; cursor: pointer; }
.ap-keys button:active { background: var(--chip); transform: scale(.93); }
.ap-keys .x { border-color: rgba(255, 120, 120, .6); color: #ff7a7a; }
.ap-keys .go { border-color: var(--ok); color: var(--ok); }
.ap-sheet ol, .ap-sheet p { color: var(--mute); line-height: 1.65; font-size: 14.5px; }
.ap-sheet ol { margin: 14px 0 6px; padding-left: 20px; }
.ap-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tab) + 18px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 90%; padding: 12px 18px; border-radius: 999px; background: #fff; color: #0b1a3d; font: 600 13.5px "Inter", sans-serif; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); animation: apUp .3s both; text-align: center; }
.ap-toast[hidden], .ap-modal[hidden] { display: none; }

/* definições */
.ap-set { margin-bottom: 8px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.ap-rs { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ap-rs:last-child { border-bottom: 0; }
.ap-rs > div { flex: 1; min-width: 0; }
.ap-rs strong { display: block; font: 600 14.5px "Inter", sans-serif; }
.ap-rs small { display: block; margin-top: 2px; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.ap-rs.col { flex-direction: column; align-items: stretch; gap: 12px; }
.ap-sw { flex: none; position: relative; width: 50px; height: 30px; border: 0; border-radius: 999px; background: rgba(128, 150, 200, .4); cursor: pointer; transition: background .2s; }
.ap-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .2s; }
.ap-sw[aria-checked="true"] { background: var(--acc); }
.ap-sw[aria-checked="true"]::after { transform: translateX(20px); }
.ap-seg { display: flex; padding: 4px; border-radius: 14px; background: var(--chip); }
.ap-seg button { flex: 1; padding: 9px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--mute); font: 600 13px "Inter", sans-serif; cursor: pointer; }
.ap-seg button.on { background: var(--acc); color: #fff; box-shadow: 0 4px 10px rgba(0, 87, 229, .3); }
.ap-range { width: 100%; accent-color: var(--acc); }
.ap-prev { padding: 16px; border-radius: 16px; background: var(--lyr); color: var(--lyr-txt); border: 1px solid var(--line); text-align: left; }
.ap-prev p { margin: 0; font: 400 calc(1.2rem * var(--fs))/1.7 var(--serif); }
body.ap-sans .ap-prev p { font-family: var(--sans); font-weight: 500; }
body.ap-centro .ap-prev { text-align: center; }
.ap-big { font: 300 28px "Manrope", sans-serif; }
.ap-saved { display: flex; align-items: center; gap: 12px; }
.ap-saved .ap-btn { padding: 8px 12px; }

/* projeção na app */
.ap-proj { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; color: #fff; background: #040f3a; touch-action: manipulation; }
.ap-proj[data-bg="noite"] { background: radial-gradient(ellipse 70% 60% at 82% 8%, rgba(47, 123, 255, .5), transparent 62%), radial-gradient(ellipse 60% 55% at 8% 100%, rgba(0, 87, 229, .38), transparent 60%), linear-gradient(160deg, #040f3a, #071a58 55%, #0a2a85); }
.ap-proj[data-bg="aurora"] { background: radial-gradient(circle at 15% 15%, #1c63ff, transparent 55%), radial-gradient(circle at 90% 95%, #19b4ff, transparent 55%), #031238; }
.ap-proj[data-bg="ceu"] { background: linear-gradient(170deg, #fff, #cfe2ff); color: #082063; }
.ap-proj[data-bg="preto"] { background: #000; }
.ap-proj header, .ap-proj footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; font-size: 13px; opacity: .85; }
.ap-proj footer { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); justify-content: center; gap: 22px; }
.ap-proj button { width: 46px; height: 46px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .16); color: inherit; font-size: 17px; cursor: pointer; }
.ap-proj[data-bg="ceu"] button { background: rgba(0, 87, 229, .12); }
.ap-proj .body { flex: 1; display: grid; place-items: center; padding: 2vmin 7vw; overflow: hidden; }
.ap-proj .body p { margin: 0; max-width: 1200px; text-align: center; font: 500 5vmin/1.45 "Manrope", sans-serif; white-space: pre-line; text-shadow: 0 .05em .4em rgba(0, 10, 50, .5); }
.ap-proj[data-bg="ceu"] .body p { text-shadow: none; }
.ap-proj .lbl { display: block; margin-bottom: .6em; font: 700 .55em "Inter", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #9cc3ff; }
.ap-proj[data-bg="ceu"] .lbl { color: #0057e5; }
.ap-proj .body p.r { font-style: italic; font-family: var(--serif); }
@media (min-width: 760px) { .ap-tabs { max-width: 760px; left: 50%; transform: translateX(-50%); border-radius: 22px 22px 0 0; border-inline: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* identidade: nome da plataforma e sigla da igreja */
.ap-bt { flex: 1; min-width: 0; line-height: 1.15; }
.ap-bt h1 { font-size: 18px; }
.ap-bt small { display: block; margin-top: 2px; font: 600 10.5px "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ap-splash em { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); text-align: center; font: 500 11.5px "Inter", sans-serif; font-style: normal; letter-spacing: .06em; color: rgba(255, 255, 255, .6); padding: 0 24px; }
#ap-splash small { font-weight: 600; }

/* folha longa (termos) */
.ap-sheet.long { max-height: 86vh; display: flex; flex-direction: column; }
.ap-termos { overflow-y: auto; margin: 10px 0 12px; padding-right: 4px; color: var(--mute); font-size: 14.5px; line-height: 1.65; }
.ap-termos h3 { margin: 14px 0 4px; color: var(--txt); font: 600 15px "Manrope", sans-serif; }
.ap-termos ol { margin: 6px 0 10px; padding-left: 20px; }
.ap-termos li { margin-bottom: 6px; }
.ap-termos a { color: var(--acc2); text-decoration: underline; }