/* ═══════════════════════════════════════════════════════
   VOLTEMOS À PALAVRA — style.css
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A84C; --gold-h:#e8c76a; --gold-dim:rgba(201,168,76,.12);
  --ink:#0D1B2A; --ink-m:#112233; --ink-l:#1a3048;
  --parch:#F8F4ED; --parch-d:#EDE7DA; --parch-dd:#E0D8CA;
  --txt:#2C1810; --txt-s:#7a6555; --border:#D5C9B8;
  --shadow:0 2px 16px rgba(13,27,42,.10);
  --shadow-lg:0 16px 48px rgba(13,27,42,.22);
  --r:8px;
  --header-h:58px;
}
html{ scroll-behavior:smooth; }
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--parch); color:var(--txt);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.seo-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ═══ HEADER ═══ */
.header{
  background:var(--ink);
  border-bottom:2px solid var(--gold);
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-lg);
  height:var(--header-h);
}
.header-inner{
  max-width:1440px; margin:0 auto;
  padding:0 20px; height:100%;
  display:flex; align-items:center; gap:16px;
}
.logo{
  display:flex; flex-direction:column; gap:1px;
  border-right:1px solid rgba(201,168,76,.25);
  padding-right:16px; flex-shrink:0; text-decoration:none;
}
.logo h1{
  font-family:'Cinzel',serif; color:var(--gold);
  font-size:1.1rem; line-height:1.2; font-weight:700;
}
.logo span{
  color:rgba(255,255,255,.35); font-size:.55rem;
  font-weight:500; letter-spacing:1.2px; text-transform:uppercase;
}
.search-wrap{ flex:1; max-width:420px; display:flex; gap:8px; }
.search-wrap input{
  flex:1; padding:8px 16px;
  border:1px solid rgba(201,168,76,.25); border-radius:20px;
  background:rgba(255,255,255,.06); color:#fff;
  font-size:.86rem; font-family:'DM Sans',sans-serif; transition:.2s;
}
.search-wrap input::placeholder{ color:rgba(255,255,255,.3); }
.search-wrap input:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,.09); }
.btn-search{
  padding:8px 16px; background:var(--gold); color:var(--ink);
  border:none; border-radius:20px; font-weight:600; font-size:.84rem;
  cursor:pointer; transition:.2s; font-family:'DM Sans',sans-serif;
  white-space:nowrap;
}
.btn-search:hover{ background:var(--gold-h); }

/* ═══ LAYOUT DESKTOP ═══ */
.layout{
  max-width:1440px; margin:0 auto;
  padding:18px 24px;
  display:grid; grid-template-columns:210px 1fr; gap:16px;
}

/* ═══ SIDEBAR DESKTOP ═══ */
.sidebar{
  background:var(--ink-m); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
  position:sticky; top:calc(var(--header-h) + 10px);
  max-height:calc(100vh - var(--header-h) - 20px);
  display:flex; flex-direction:column;
  border:1px solid rgba(201,168,76,.15);
}
.sidebar-head{
  background:linear-gradient(135deg,var(--ink),var(--ink-l));
  color:var(--gold); padding:10px 16px;
  font-size:.65rem; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; font-family:'Cinzel',serif;
  border-bottom:1px solid rgba(201,168,76,.2);
}
.book-list{ list-style:none; overflow-y:auto; flex:1; padding:4px 0; }
.book-list::-webkit-scrollbar{ width:4px; }
.book-list::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:2px; }
.book-list li{
  padding:6px 14px; font-size:.82rem;
  cursor:pointer; color:rgba(255,255,255,.55);
  transition:.15s; border-left:2px solid transparent;
}
.book-list li a{ color:inherit; text-decoration:none; display:block; }
.book-list li:hover{ background:rgba(201,168,76,.08); color:rgba(255,255,255,.85); }
.book-list li.active{ background:rgba(201,168,76,.15); color:var(--gold); font-weight:600; border-left-color:var(--gold); }
.book-list .section-lbl{
  padding:8px 14px 3px; font-size:.56rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(201,168,76,.4); cursor:default; font-family:'Cinzel',serif;
}

/* ═══ MAIN ═══ */
.main{ min-width:0; display:flex; flex-direction:column; gap:10px; }

/* ─── TOOLBAR ─── */
.toolbar{
  background:var(--ink-m); border-radius:var(--r);
  box-shadow:var(--shadow); padding:9px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid rgba(201,168,76,.12);
}
.vg{ display:flex; align-items:center; gap:4px; }
.vg-lbl{ font-size:.65rem; font-weight:600; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.8px; margin-right:4px; }
.vg input.r{ display:none; }
.vg label.r{
  padding:4px 12px; border-radius:14px; font-size:.8rem; font-weight:500;
  border:1px solid rgba(201,168,76,.2); color:rgba(255,255,255,.45);
  cursor:pointer; background:transparent; transition:.2s;
  user-select:none; font-family:'DM Sans',sans-serif;
}
.vg input.r:checked+label.r{ border-color:var(--gold); background:var(--gold); color:var(--ink); font-weight:600; }
.vg label.r:hover{ border-color:var(--gold); color:rgba(255,255,255,.85); }
.t-sep{ width:1px; height:22px; background:rgba(201,168,76,.15); }
.toolbar .chk-lbl{
  display:flex; align-items:center; gap:5px; font-size:.8rem;
  color:rgba(255,255,255,.5); cursor:pointer; user-select:none;
  font-family:'DM Sans',sans-serif; transition:.15s;
}
.toolbar .chk-lbl:hover{ color:rgba(255,255,255,.8); }
.toolbar .chk-lbl input{ accent-color:var(--gold); width:14px; height:14px; cursor:pointer; }

/* ─── CHAPTER BAR ─── */
.chap-bar{
  background:var(--ink-m); border-radius:var(--r);
  box-shadow:var(--shadow); padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; border:1px solid rgba(201,168,76,.12);
}
.chap-bar h2{ font-family:'Cinzel',serif; font-size:1.3rem; color:var(--gold); font-weight:600; }
.chap-bar .sub{ font-size:.68rem; color:rgba(255,255,255,.35); margin-top:2px; }
.nav-btns{ display:flex; gap:6px; align-items:center; flex-shrink:0; }
.nav-btn{
  padding:5px 14px; border:1px solid rgba(201,168,76,.3); border-radius:14px;
  background:transparent; color:var(--gold); font-weight:600; font-size:.78rem;
  cursor:pointer; transition:.2s; font-family:'DM Sans',sans-serif;
  text-decoration:none; display:inline-block; white-space:nowrap;
}
.nav-btn:hover{ background:var(--gold); color:var(--ink); }
.cap-sel{
  padding:5px 10px; border:1px solid rgba(201,168,76,.3); border-radius:14px;
  font-size:.82rem; color:var(--gold); cursor:pointer;
  background:var(--ink-m); font-weight:600; font-family:'DM Sans',sans-serif;
}
.cap-sel:focus{ outline:none; border-color:var(--gold); }
.cap-sel option{ background:var(--ink-m); color:#fff; }

/* ─── PARALLEL HEADERS ─── */
.par-heads{ display:none; grid-template-columns:1fr 1fr; gap:24px; padding:6px 28px 0; }
.par-heads.show{ display:grid; }
.par-heads .col-lbl{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gold); opacity:.7; font-family:'Cinzel',serif; }

/* ═══ VERSÍCULOS ═══ */
.verses-panel{
  background:var(--parch); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px 26px;
  min-height:400px; border:1px solid var(--border);
}
.verse-row{
  display:grid; grid-template-columns:32px 1fr 190px; gap:8px;
  align-items:start; padding:10px 0;
  border-bottom:1px solid var(--parch-dd);
  animation:fadeUp .32s ease both;
}
.verse-row:last-child{ border-bottom:none; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }
.v-num{
  font-family:'Cinzel',serif; font-weight:600; color:var(--gold);
  font-size:.7rem; text-align:right; padding-top:4px; flex-shrink:0; opacity:.8;
}
.v-cols{ flex:1; display:grid; grid-template-columns:1fr; gap:14px; min-width:0; }
.v-cols.par{ grid-template-columns:1fr 1fr; }
.v-side{ display:flex; flex-direction:column; gap:4px; }
.v-text{
  font-family:'Crimson Pro',Georgia,serif;
  font-size:1.08rem; line-height:1.9; color:var(--txt);
}
.v-cols.par .v-side:first-child .v-text{ border-right:1px solid var(--parch-dd); padding-right:14px; }

/* ─── REFS ─── */
.v-refs-side{
  background:var(--parch-d); border-radius:6px; padding:7px;
  min-height:40px; max-height:200px; overflow:auto;
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--parch-dd); transition:.2s;
}
.v-refs-side .ref-list{ display:flex; flex-wrap:wrap; gap:3px; }
.ref-toggle{ align-self:flex-end; background:none; border:1px solid var(--border); padding:2px 6px; border-radius:5px; cursor:pointer; font-size:.72rem; color:var(--txt-s); transition:.15s; }
.ref-toggle:hover{ background:var(--parch-dd); }
.v-refs-side.collapsed{ width:32px; padding:5px; overflow:hidden; align-items:center; }
.v-refs-side.collapsed .ref-list{ display:none; }
.v-refs-side.collapsed .ref-toggle{ transform:rotate(180deg); }
.v-refs-side.collapsed .ref-label{ display:none; }
.ref-label{ font-size:.6rem; color:var(--txt-s); text-transform:uppercase; letter-spacing:.8px; font-weight:600; align-self:flex-start; }
.ref-pill{ font-size:.66rem; color:var(--ink-l); cursor:pointer; padding:2px 7px; border-radius:7px; border:1px solid transparent; transition:.12s; font-family:'DM Sans',sans-serif; background:var(--parch); }
.ref-pill:hover{ background:var(--gold-dim); border-color:var(--gold); color:var(--ink); }

/* ─── STRONG ─── */
.sw{ color:var(--ink); cursor:pointer; border-bottom:1.5px dotted var(--gold); padding:0 1px; border-radius:2px; transition:.15s; }
.sw:hover{ background:var(--gold-dim); border-bottom-style:solid; }
.sw-code{ font-size:.55rem; vertical-align:super; color:var(--gold); font-weight:600; margin-left:1px; font-family:'DM Sans',sans-serif; opacity:.8; }
.sw-code.hidden{ display:none; }

/* ═══ POPUP STRONG ═══ */
.overlay{ display:none; position:fixed; inset:0; background:rgba(13,27,42,.75); backdrop-filter:blur(5px); z-index:200; }
.popup{
  display:none; position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--parch); border-radius:14px;
  width:92%; max-width:520px; max-height:80vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); border-top:3px solid var(--gold); z-index:201;
  animation:popIn .3s cubic-bezier(.34,1.5,.64,1);
}
@keyframes popIn{ from{opacity:0;transform:translate(-50%,-46%) scale(.95);}to{opacity:1;transform:translate(-50%,-50%) scale(1);} }
.pop-top{ padding:16px 20px 12px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--parch-dd); background:linear-gradient(135deg,var(--ink),var(--ink-l)); border-radius:11px 11px 0 0; }
.pop-code{ font-family:'Cinzel',serif; font-size:1.25rem; color:var(--gold); font-weight:700; display:flex; align-items:center; gap:10px; }
.badge{ font-family:'DM Sans',sans-serif; font-size:.56rem; padding:3px 9px; border-radius:10px; background:rgba(201,168,76,.2); color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.6px; border:1px solid rgba(201,168,76,.3); }
.pop-close{ background:none; border:none; font-size:1.25rem; color:rgba(255,255,255,.4); cursor:pointer; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.15s; }
.pop-close:hover{ background:rgba(255,255,255,.08); color:#fff; }
.pop-word{ text-align:center; padding:16px 20px 6px; }
.pop-word .original{ font-family:'Cinzel',serif; font-size:2rem; color:var(--ink); font-weight:600; line-height:1.3; }
.pop-word .translit{ font-style:italic; color:var(--txt-s); font-size:.94rem; margin-top:3px; }
.pop-body{ padding:10px 20px 20px; }
.def-block{ background:var(--parch-d); border-radius:7px; border-left:3px solid var(--gold); padding:10px 14px; margin-bottom:7px; }
.def-block .lbl{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--gold); margin-bottom:3px; font-family:'DM Sans',sans-serif; }
.def-block .val{ font-size:.91rem; line-height:1.65; color:var(--txt); font-family:'Crimson Pro',serif; }

/* ═══ LOADING ═══ */
.loading{ text-align:center; padding:60px 20px; color:var(--txt-s); }
.spinner{ width:32px; height:32px; border:2px solid var(--parch-dd); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 14px; }
@keyframes spin{ to{transform:rotate(360deg);} }

/* ═══ PWA install banner ═══ */
.pwa-banner{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:300;
  background:var(--ink); border-top:2px solid var(--gold);
  padding:14px 20px; align-items:center; gap:12px;
  box-shadow:0 -8px 32px rgba(13,27,42,.3);
  animation:slideUp .4s ease;
}
.pwa-banner.show{ display:flex; }
@keyframes slideUp{ from{transform:translateY(100%);}to{transform:translateY(0);} }
.pwa-banner .pwa-icon{ font-size:1.8rem; flex-shrink:0; }
.pwa-banner .pwa-text{ flex:1; }
.pwa-banner .pwa-text strong{ display:block; color:var(--gold); font-size:.9rem; font-family:'Cinzel',serif; }
.pwa-banner .pwa-text span{ color:rgba(255,255,255,.55); font-size:.78rem; }
.pwa-btn{ padding:8px 18px; background:var(--gold); color:var(--ink); border:none; border-radius:20px; font-weight:700; font-size:.84rem; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; }
.pwa-dismiss{ background:none; border:none; color:rgba(255,255,255,.3); font-size:1.2rem; cursor:pointer; padding:4px; }

/* ═══════════════════════════════════════════════════════
   MOBILE — redesign completo
   ═══════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{ --header-h:52px; }

  /* Header compacto */
  .logo h1{ font-size:.95rem; }
  .logo span{ display:none; }
  .logo{ border-right:none; padding-right:0; }
  .search-wrap input{ font-size:.82rem; padding:7px 14px; }
  .btn-search{ padding:7px 12px; font-size:.8rem; }

  /* Layout: coluna única */
  .layout{ grid-template-columns:1fr; padding:0 0 80px; gap:0; }

  /* ── SIDEBAR MOBILE: bottom sheet drawer ── */
  .sidebar{
    position:fixed; bottom:0; left:0; right:0; top:auto;
    max-height:70vh; border-radius:18px 18px 0 0;
    z-index:150; transform:translateY(100%);
    transition:transform .35s cubic-bezier(.32,0,.67,0);
    border:none; border-top:2px solid var(--gold);
  }
  .sidebar.open{ transform:translateY(0); }
  .sidebar-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; cursor:pointer; border-radius:18px 18px 0 0;
    font-size:.72rem;
  }
  .sidebar-head::after{ content:'✕'; font-size:1rem; color:rgba(255,255,255,.4); }
  .book-list{
    display:grid; grid-template-columns:repeat(3,1fr);
    padding:8px; gap:2px; overflow-y:auto; max-height:calc(70vh - 50px);
  }
  .book-list li{
    padding:8px 6px; font-size:.78rem; border-radius:6px;
    border-left:none; text-align:center; border-bottom:2px solid transparent;
  }
  .book-list li.active{ border-left:none; border-bottom-color:var(--gold); background:rgba(201,168,76,.15); }
  .book-list .section-lbl{
    grid-column:1/-1; padding:10px 8px 4px;
    text-align:left; font-size:.6rem;
  }

  /* Overlay para fechar sidebar */
  .sidebar-overlay{
    display:none; position:fixed; inset:0; z-index:140;
    background:rgba(13,27,42,.6); backdrop-filter:blur(2px);
  }
  .sidebar-overlay.show{ display:block; }

  /* ── BOTTOM NAV MOBILE ── */
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:130;
    background:var(--ink); border-top:1px solid rgba(201,168,76,.2);
    height:58px; align-items:stretch;
    box-shadow:0 -4px 20px rgba(13,27,42,.3);
  }
  .bn-btn{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; background:none; border:none;
    color:rgba(255,255,255,.4); cursor:pointer; transition:.15s;
    font-family:'DM Sans',sans-serif; font-size:.6rem; font-weight:500;
    text-decoration:none; padding:6px 4px;
  }
  .bn-btn.active{ color:var(--gold); }
  .bn-btn svg{ width:20px; height:20px; }
  .bn-btn span{ font-size:.58rem; }

  /* ── MAIN mobile ── */
  .main{ padding:10px 12px 0; gap:8px; }

  /* Toolbar mobile: scrollável horizontal */
  .toolbar{
    padding:8px 12px; gap:8px; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-radius:var(--r);
  }
  .toolbar::-webkit-scrollbar{ display:none; }
  .t-sep{ flex-shrink:0; }
  .vg-lbl{ display:none; }
  .toolbar .chk-lbl{ white-space:nowrap; flex-shrink:0; font-size:.78rem; }

  /* Chapter bar mobile */
  .chap-bar{ padding:10px 14px; flex-wrap:wrap; gap:8px; }
  .chap-bar h2{ font-size:1.1rem; }
  .chap-bar .sub{ font-size:.62rem; }
  .nav-btns{ width:100%; justify-content:space-between; }
  .nav-btn{ padding:5px 12px; font-size:.75rem; }
  .cap-sel{ font-size:.78rem; flex:1; text-align:center; }

  /* Parallel headers off on mobile */
  .par-heads{ display:none!important; }

  /* ── VERSES mobile ── */
  .verses-panel{ padding:14px 12px; border-radius:0; border-left:none; border-right:none; }
  .verse-row{
    grid-template-columns:26px 1fr;
    gap:6px; padding:12px 0;
  }
  /* Refs vão abaixo do texto no mobile */
  .v-refs-side{
    grid-column:1/-1; width:auto!important;
    flex-direction:row; align-items:center;
    min-height:auto; padding:5px 8px; gap:4px;
  }
  .v-refs-side.collapsed{ width:auto!important; flex-direction:row; }
  .v-refs-side.collapsed .ref-list{ display:flex; }
  .v-refs-side .ref-label{ display:none; }
  .v-refs-side .ref-toggle{ display:none; }

  /* Texto maior e mais confortável no mobile */
  .v-text{ font-size:1.12rem; line-height:2; }
  .v-num{ font-size:.68rem; padding-top:6px; }

  /* Códigos Strong menores, menos intrusivos */
  .sw-code{ font-size:.5rem; opacity:.65; }

  /* Popup mobile */
  .popup{
    top:auto; bottom:0; left:0; right:0;
    transform:none; border-radius:18px 18px 0 0;
    max-width:100%; max-height:85vh;
    border-top:3px solid var(--gold);
    animation:slideUp .3s ease;
  }
  .overlay{ z-index:199; }

  /* PWA banner acima do bottom nav */
  .pwa-banner{ bottom:58px; }
}

@media(min-width:769px){
  .bottom-nav{ display:none; }
  .sidebar-overlay{ display:none!important; }
}