/* ================================================
   BIRKAT HAMAZÓN SEFARDÍ — ecosistema Shlomo Peretz
   ================================================ */

:root {
  --bg:           #fefcf8;
  --fg:           #111111;
  --muted:        #6b6560;
  --muted2:       #a09890;
  --gold:         #c9a227;
  --gold-light:   rgba(201, 162, 39, 0.12);
  --border:       rgba(180, 155, 90, 0.20);
  --btn-group-bg: rgba(0, 0, 0, 0.05);
  --maxw:         720px;
  --pad:          24px;
  --font:         20px;
  --he-font:      "Noto Serif Hebrew", Georgia, serif;
  --ui-font:      "Assistant", system-ui, sans-serif;
  --radius:       10px;
  --topbar-h:     52px;
  --cbar-h:       44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0e0d0b;
    --fg:           #e8e4dc;
    --muted:        #9a9186;
    --muted2:       #5a5248;
    --gold:         #d4af37;
    --gold-light:   rgba(212, 175, 55, 0.10);
    --border:       rgba(180, 155, 90, 0.16);
    --btn-group-bg: rgba(255, 255, 255, 0.07);
  }
}

/* Modo oscuro forzado por JS */
body.dark-mode {
  --bg:           #0e0d0b;
  --fg:           #e8e4dc;
  --muted:        #9a9186;
  --muted2:       #5a5248;
  --gold:         #d4af37;
  --gold-light:   rgba(212, 175, 55, 0.10);
  --border:       rgba(180, 155, 90, 0.16);
  --btn-group-bg: rgba(255, 255, 255, 0.07);
}
body.light-mode {
  --bg:           #fefcf8;
  --fg:           #111111;
  --muted:        #6b6560;
  --muted2:       #a09890;
  --gold:         #c9a227;
  --gold-light:   rgba(201, 162, 39, 0.12);
  --border:       rgba(180, 155, 90, 0.20);
  --btn-group-bg: rgba(0, 0, 0, 0.05);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: var(--font);   /* rem escala con A+/A− */
  scroll-behavior: smooth;
}
body {
  background:  var(--bg);
  color:       var(--fg);
  font-family: var(--he-font);
  line-height: 1.9;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}
a { color: var(--gold); text-decoration: none; }
a:hover { opacity: .75; }

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
header.topbar {
  position:   sticky;
  top:        0;
  z-index:    200;
  height:     var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

/* contenedor centrado — mismo patrón que tehilim */
.topbar-inner {
  max-width:   var(--maxw);
  margin:      0 auto;
  height:      100%;
  padding:     0 var(--pad);
  display:     flex;
  align-items: center;
  gap:         16px;
}

/* Brand — izquierda (tamaño fijo en px para no escalar con A+/A−) */
.brand {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  line-height:    1;
}
.brand-title {
  font-family:    var(--ui-font);
  font-size:      17px;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: 0.01em;
}
.brand-byline {
  font-family:    var(--ui-font);
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: 0.01em;
  opacity:        0.85;
}

/* Nav — derecha (margin-left:auto empuja) */
.topbar-nav {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ES — texto plano sin borde, igual que tehilim */
.tnav-lang {
  font-family:    var(--ui-font);
  font-size:      13px;
  font-weight:    600;
  color:          var(--muted);
  background:     transparent;
  border:         none;
  padding:        0 4px;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
}
.tnav-lang:hover { color: var(--fg); }

/* Contenedor unificado gris — igual que tehilim */
.tnav-group {
  display:       flex;
  align-items:   center;
  background:    var(--btn-group-bg);
  border-radius: 9px;
  padding:       0 4px;
  height:        36px;
  gap:           0;
}

/* Botón base dentro del grupo */
.tnav-btn {
  appearance:  none;
  border:      none;
  background:  transparent;
  min-width:   32px;
  height:      32px;
  padding:     0 11px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font);
  font-size:   13px;
  font-weight: 500;
  color:       var(--muted);
  cursor:      pointer;
  border-radius: 6px;
  text-decoration: none;
  transition:  background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.tnav-btn:hover { background: rgba(128,128,128,.12); color: var(--fg); }

/* Separador vertical dentro del grupo */
.tnav-sep {
  width:       1px;
  height:      14px;
  background:  var(--border);
  margin:      0 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BARRA ZIMÚN / VISTA
   ══════════════════════════════════════════ */
.controls-bar {
  position:   sticky;
  top:        var(--topbar-h);
  z-index:    190;
  height:     var(--cbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cbar-inner {
  max-width:   var(--maxw);
  margin:      0 auto;
  height:      100%;
  padding:     0 var(--pad);
  display:     flex;
  align-items: center;
  gap:         6px;
  overflow-x:  auto;
  scrollbar-width: none;
}
.cbar-inner::-webkit-scrollbar { display: none; }

/* Separador entre grupos */
.cbar-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; margin: 0 4px; }

/* Pill-tabs — igual estilo que tehilim */
.cbar-tab {
  appearance:     none;
  border:         none;
  background:     transparent;
  font-family:    var(--ui-font);
  font-size:      12px;
  font-weight:    500;
  color:          var(--muted);
  padding:        4px 10px;
  border-radius:  6px;
  cursor:         pointer;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.cbar-tab:hover        { background: rgba(128,128,128,.08); color: var(--fg); }
.cbar-tab.active       { background: var(--gold-light); color: var(--gold); font-weight: 600; }

/* ══════════════════════════════════════════
   CONTENIDO
   ══════════════════════════════════════════ */
.page {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   0 var(--pad) 80px;
}

/* Intro */
.site-intro {
  text-align:    center;
  padding:       3rem 0 2.2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.site-intro-title {
  font-family:    var(--he-font);
  font-size:      2.8rem;
  font-weight:    700;
  color:          var(--gold);
  line-height:    1.2;
  letter-spacing: 0.02em;
  margin-bottom:  0.6rem;
  direction:      rtl;
}
.site-intro-sub {
  font-family:    var(--ui-font);
  font-size:      0.62rem;
  color:          var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Secciones */
.birkat-section {
  padding-bottom: 2rem;
  margin-bottom:  2rem;
  border-bottom:  1px solid var(--border);
}
.birkat-section:last-child { border-bottom: none; }

/* Etiqueta */
.section-label {
  display:        block;
  font-family:    var(--ui-font);
  font-size:      0.58rem;
  font-weight:    500;
  color:          var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  1.2rem;
}

/* Hebreo */
.he {
  font-family:     var(--he-font);
  font-size:       1rem;
  line-height:     2.0;
  text-align:      justify;
  text-align-last: right;
  direction:       rtl;
  color:           var(--fg);
  margin:          0.4rem 0 0.15rem;
}

/* Transliteración */
.translit,
.translit-en,
.translit-fr,
.translit-pt,
.translit-ru,
.translit-it {
  font-family: var(--ui-font);
  font-size:   0.68rem;
  color:       var(--muted);
  font-style:  italic;
  direction:   ltr;
  text-align:  left;
  margin:      0 0 0.1rem;
  line-height: 1.5;
}

/* Traducción */
.traduccion,
.traduccion-en,
.traduccion-fr,
.traduccion-pt,
.traduccion-ru,
.traduccion-it {
  font-family:    var(--ui-font);
  font-size:      0.72rem;
  color:          var(--muted);
  direction:      ltr;
  text-align:     left;
  margin:         0 0 1rem;
  line-height:    1.6;
  padding-bottom: 0.8rem;
  border-bottom:  1px solid var(--border);
}
.traduccion:last-child,
.traduccion-en:last-child,
.traduccion-fr:last-child,
.traduccion-pt:last-child,
.traduccion-ru:last-child,
.traduccion-it:last-child { border-bottom: none; }

/* Zimún */
.zimun-leader   { margin-bottom: 0.15rem; }
.zimun-respuesta {
  padding-right: 1rem;
  opacity: .78;
  border-right: 2px solid var(--border);
  margin: 0.1rem 0 0.5rem;
}

/* Inserciones Shabbat / Yom Tov */
.shabbat-insert {
  border-right:  3px solid var(--gold);
  padding:       0.75rem 1rem 0.75rem 0.6rem;
  margin:        1.2rem 0;
  background:    var(--gold-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.shabbat-badge {
  display:        inline-block;
  font-family:    var(--ui-font);
  font-size:      0.52rem;
  color:          var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border:         1px solid rgba(201,162,39,.4);
  border-radius:  20px;
  padding:        0.1rem 0.45rem;
  margin-bottom:  0.6rem;
  direction:      ltr;
}

/* ── Vista ── */
body.vista-he       .translit,
body.vista-he       .traduccion  { display: none; }
body.vista-translit .he,
body.vista-translit .traduccion  { display: none; }
body.vista-es       .he,
body.vista-es       .translit    { display: none; }
body.vista-he-translit .traduccion { display: none; }
body.vista-he-es       .translit   { display: none; }

/* ── English / French / Portuguese / Russian / Italian: hidden by default ── */
.translit-en, .traduccion-en,
.translit-fr, .traduccion-fr,
.translit-pt, .traduccion-pt,
.translit-ru, .traduccion-ru,
.translit-it, .traduccion-it { display: none; }

/* ── English ── */
body.lang-en .translit      { display: none; }
body.lang-en .traduccion    { display: none; }
body.lang-en .translit-en   { display: block; }
body.lang-en .traduccion-en { display: block; }

body.lang-en.vista-he       .translit-en,
body.lang-en.vista-he       .traduccion-en  { display: none; }
body.lang-en.vista-translit .traduccion-en  { display: none; }
body.lang-en.vista-es       .he,
body.lang-en.vista-es       .translit-en    { display: none; }
body.lang-en.vista-he-translit .traduccion-en { display: none; }
body.lang-en.vista-he-es       .translit-en   { display: none; }

/* ── Français ── */
body.lang-fr .translit      { display: none; }
body.lang-fr .traduccion    { display: none; }
body.lang-fr .translit-fr   { display: block; }
body.lang-fr .traduccion-fr { display: block; }

body.lang-fr.vista-he       .translit-fr,
body.lang-fr.vista-he       .traduccion-fr  { display: none; }
body.lang-fr.vista-translit .traduccion-fr  { display: none; }
body.lang-fr.vista-es       .he,
body.lang-fr.vista-es       .translit-fr    { display: none; }
body.lang-fr.vista-he-translit .traduccion-fr { display: none; }
body.lang-fr.vista-he-es       .translit-fr   { display: none; }

/* ── Português ── */
body.lang-pt .translit      { display: none; }
body.lang-pt .traduccion    { display: none; }
body.lang-pt .translit-pt   { display: block; }
body.lang-pt .traduccion-pt { display: block; }

body.lang-pt.vista-he       .translit-pt,
body.lang-pt.vista-he       .traduccion-pt  { display: none; }
body.lang-pt.vista-translit .traduccion-pt  { display: none; }
body.lang-pt.vista-es       .he,
body.lang-pt.vista-es       .translit-pt    { display: none; }
body.lang-pt.vista-he-translit .traduccion-pt { display: none; }
body.lang-pt.vista-he-es       .translit-pt   { display: none; }

/* ── Русский ── */
body.lang-ru .translit      { display: none; }
body.lang-ru .traduccion    { display: none; }
body.lang-ru .translit-ru   { display: block; }
body.lang-ru .traduccion-ru { display: block; }

body.lang-ru.vista-he       .translit-ru,
body.lang-ru.vista-he       .traduccion-ru  { display: none; }
body.lang-ru.vista-translit .traduccion-ru  { display: none; }
body.lang-ru.vista-es       .he,
body.lang-ru.vista-es       .translit-ru    { display: none; }
body.lang-ru.vista-he-translit .traduccion-ru { display: none; }
body.lang-ru.vista-he-es       .translit-ru   { display: none; }

/* ── Italiano ── */
body.lang-it .translit      { display: none; }
body.lang-it .traduccion    { display: none; }
body.lang-it .translit-it   { display: block; }
body.lang-it .traduccion-it { display: block; }

body.lang-it.vista-he       .translit-it,
body.lang-it.vista-he       .traduccion-it  { display: none; }
body.lang-it.vista-translit .traduccion-it  { display: none; }
body.lang-it.vista-es       .he,
body.lang-it.vista-es       .translit-it    { display: none; }
body.lang-it.vista-he-translit .traduccion-it { display: none; }
body.lang-it.vista-he-es       .translit-it   { display: none; }

/* Footer */
footer {
  border-top:  1px solid var(--border);
  padding:     1.5rem var(--pad);
  text-align:  center;
  font-family: var(--ui-font);
  font-size:   0.62rem;
  color:       var(--muted);
  opacity:     .6;
  line-height: 2;
  max-width:   var(--maxw);
  margin:      0 auto;
}
footer a { color: inherit; }
footer a:hover { color: var(--gold); opacity: 1; }

/* Responsive */
@media (max-width: 560px) {
  :root { --pad: 18px; --topbar-h: 52px; }
  .brand-byline { display: none; }
  .tnav-lang    { display: none; }
  .site-intro-title { font-size: 2.2rem; }
  .he { text-align: right; text-align-last: right; }
}

/* ── Language dropdown ── */
.tnav-lang-wrap {
  position: relative;
}
.lang-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    0 4px 16px rgba(0,0,0,.12);
  min-width:     140px;
  z-index:       300;
  overflow:      hidden;
}
.lang-menu.open { display: block; }
.lang-opt {
  display:         flex;
  align-items:     center;
  gap:             10px;
  width:           100%;
  padding:         8px 14px;
  background:      transparent;
  border:          none;
  font-family:     var(--ui-font);
  font-size:       13px;
  font-weight:     600;
  color:           var(--muted);
  cursor:          pointer;
  text-align:      left;
  transition:      background .1s, color .1s;
}
.lang-opt span {
  font-weight: 400;
  font-size:   12px;
  color:       var(--muted);
}
.lang-opt:hover         { background: var(--gold-light); color: var(--fg); }
.lang-opt.active        { color: var(--gold); }
.lang-opt.active span   { color: var(--gold); opacity: .7; }