/* BibliaClub — estilos del lector (v0.1) */
:root{
  --primary:#6b4fa0; --primary-dark:#553d82; --primary-light:#ede7f8;
  --bg:#f6f4ef; --card:#fff; --text:#2b2733; --muted:#7a7486;
  --green:#2e9e5b; --yellow:#e6a817; --orange:#e07020; --red:#d64545;
  --border:#e5e0d8;
  --paper:#fdfcf9; --paper-text:#2b2733; --paper-accent:#6b4fa0;
  /* efecto vidrio (estilo iOS): translúcido + desenfoque */
  --glass: rgba(255,255,255,.68);
  --glass-border: rgba(255,255,255,.55);
  --glass-soft: rgba(255,255,255,.40); /* barra inferior durante la lectura */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; overflow:hidden;
}

/* Contenedor de la app: en computadora se centra con márgenes a los lados */
#app{
  position:relative; width:100%; height:100%; margin:0 auto;
  display:flex; flex-direction:column; overflow:hidden; background:var(--bg);
}

/* ===== Modos de lectura ===== */
/* Sepia cálido tipo lector de libros: tiñe TODA la página (crema, texto café tostado) */
body.theme-sepia{
  --paper:#f9f1e2; --paper-text:#584636; --paper-accent:#b07b3e;
  --bg:#f1e8d5; --card:#fbf5e8; --text:#584636; --muted:#8d7c63; --border:#e4d7bd;
  --primary-light:#efe4cd;
  --glass: rgba(251,245,232,.68);
  --glass-border: rgba(255,250,238,.6);
  --glass-soft: rgba(251,245,232,.40);
}
body.theme-night{
  --paper:#1c1a22; --paper-text:#d6d2dd; --paper-accent:#b39ddb;
  --bg:#141218; --card:#26232e; --text:#d6d2dd; --muted:#9a94a8; --border:#3a3644;
  --glass: rgba(32,29,40,.66);
  --glass-border: rgba(255,255,255,.09);
  --glass-soft: rgba(32,29,40,.38);
}

/* ===== Pantalla: lista de días ===== */
.screen{display:none;flex-direction:column;height:100%;overflow:hidden}
.screen.active{display:flex}
.topbar{padding:calc(env(safe-area-inset-top, 0px) + 16px) 20px 12px;background:var(--bg);flex-shrink:0}
.topbar h1{font-size:20px;color:var(--text)}
.topbar .sub{font-size:13px;color:var(--muted);margin-top:2px}
.content{flex:1;overflow-y:auto;padding:4px 16px calc(env(safe-area-inset-bottom, 0px) + 20px)}
.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:12px}
.progressbar{height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden}
.progressbar>div{height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.muted{color:var(--muted);font-size:13px}
.streak{color:var(--orange);font-weight:700;font-size:13px}

.day-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:none;border-radius:14px;padding:14px 16px;margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);cursor:pointer;min-height:56px;color:var(--text);font-size:15px;
}
.day-item:disabled{opacity:.45;cursor:not-allowed}
.day-item .num{
  width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:14px;
}
.day-item.done .num{background:var(--green);color:#fff}
.day-item .info{flex:1}
.day-item .title{font-weight:700;display:block}
.day-item .meta{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.day-item .chev{color:var(--muted);font-size:18px}

/* ===== Pantalla: lectura (barras fijas) ===== */
.read-header{
  padding:calc(env(safe-area-inset-top, 0px) + 6px) 14px 7px;
  background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;
}
.read-title-row{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.read-title-row b{font-size:15px;color:var(--text)}
.chip{
  font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-light);
  border-radius:14px;padding:6px 11px;white-space:nowrap;border:none;min-height:32px;cursor:default;
}
body.theme-night .chip{background:#33303d;color:#b39ddb}
/* control de anchura del texto (solo pantallas grandes) */
.width-ctl{display:none}
.controls{display:flex;gap:5px;align-items:center}
.controls button{
  border:1px solid var(--border);background:var(--card);width:37px;height:37px;border-radius:10px;
  cursor:pointer;font-size:16px;line-height:1;color:var(--text);
}
.controls button.sel{border-color:var(--primary);background:var(--primary-light)}
body.theme-night .controls button.sel{background:#33303d;border-color:#b39ddb}
/* en el celular los controles viven detrás del botón Aa (en escritorio siempre visibles) */
.controls-row{display:none}
.controls-row.show{display:flex}
.read-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:5px}
.read-track{height:4px;background:rgba(0,0,0,.08);border-radius:3px;margin-top:6px;overflow:hidden}
.read-track>div{height:100%;width:0%;background:var(--primary);transition:width .2s}

.passage{
  flex:1;overflow-y:auto;background:var(--paper);color:var(--paper-text);
  padding:20px 22px 30px;
  font-family:Georgia,'Times New Roman',serif;line-height:1.8;
  font-size:calc(var(--fsize, 17px) * var(--fscale, 1));
  -webkit-user-select:text;user-select:text;
}
.passage h2{font-family:inherit;font-size:15px;color:var(--paper-accent);margin:4px 0 14px;text-transform:uppercase;letter-spacing:.5px}
.passage p{margin-bottom:10px}
.passage sup{color:var(--paper-accent);font-weight:700;font-size:11px;margin-right:3px}
.fin-marker{text-align:center;color:var(--muted);font-size:13px;padding:18px 0 4px;font-family:-apple-system,sans-serif}

.read-footer{
  padding:7px 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background:var(--card);border-top:1px solid var(--border);flex-shrink:0;
}
.read-hint{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:6px;min-height:14px}
/* el lector compacta sus botones (el resto de la app no cambia) */
.read-footer .btn{padding:12px;min-height:46px}
.btn{
  display:block;width:100%;padding:15px;border:none;border-radius:12px;background:var(--primary);
  color:#fff;font-size:16px;font-weight:700;cursor:pointer;text-align:center;min-height:50px;
}
.btn:disabled{background:#c9c3d6;cursor:not-allowed}
body.theme-night .btn:disabled{background:#3a3644;color:#77717f}
.btn.ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.back-btn{border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;padding:9px 10px;border-radius:10px;min-height:42px}

/* ===== Selector de libros (planes personalizados) ===== */
.libro-chip{
  border:1px solid var(--border);background:var(--card);border-radius:12px;
  padding:5px 10px;font-size:12px;cursor:pointer;color:var(--text);margin:3px;min-height:30px;
}
.libro-chip.sel{border-color:var(--primary);background:var(--primary-light);font-weight:700}
body.theme-night .libro-chip.sel{background:#33303d}
.libro-grupo{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:1px;margin:8px 0 4px}

/* ===== Feed: reacciones ===== */
.reaccion{
  border:1px solid var(--border);background:var(--card);border-radius:14px;
  padding:4px 10px;font-size:12px;cursor:pointer;color:var(--text);min-height:30px;
}
.reaccion.mia{border-color:var(--primary);background:var(--primary-light);font-weight:700}
body.theme-night .reaccion.mia{background:#33303d}

/* ===== Editor de foto de perfil ===== */
#feMarco{
  width:240px;height:240px;border-radius:50%;overflow:hidden;margin:6px auto;
  position:relative;background:#e8e4dc;border:3px solid var(--primary-light);
  touch-action:none;cursor:grab;
}
#feMarco:active{cursor:grabbing}
#feMarco img{
  position:absolute;left:0;top:0;max-width:none;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}

/* ===== Club: miembros y tags de atraso ===== */
.tag{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;color:#fff}
.tag.ok{background:var(--green)} .tag.y{background:var(--yellow)}
.tag.o{background:var(--orange)} .tag.r{background:var(--red)}
.miembro{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.miembro:last-child{border-bottom:none}
.miembro .avatar{
  width:40px;height:40px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;
  overflow:hidden;position:relative;
}
.miembro .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.miembro .minfo{flex:1;min-width:0}
.miembro .mnombre{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text)}
.miembro .mbar{height:7px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden;margin-top:5px}
.miembro .mbar>div{height:100%;background:var(--green);border-radius:4px}

/* ===== Resaltado ===== */
mark.hl{border-radius:3px;padding:0 1px;color:#2b2733}
mark.hl-amarillo{background:#f9e79f}
mark.hl-menta{background:#abebc6}
mark.hl-cielo{background:#aed6f1}
mark.hl-lavanda{background:#d7bde2}
mark.hl-durazno{background:#fad7a0}
mark.hl-rosa{background:#f5b8cd}
/* 📖 Biblia libre: pin de nota personal (local) */
.bib-pin{cursor:pointer;font-size:12px;opacity:.85}
/* 📖 Biblia libre: flechas flotantes de capítulo (semitransparentes) */
#scrBiblia{position:relative}
.bib-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;
  border-radius:50%;border:none;background:rgba(20,20,30,.28);color:#fff;font-size:24px;font-weight:700;
  line-height:1;cursor:pointer;display:none;opacity:.55;transition:opacity .15s;padding:0}
.bib-flecha:active,.bib-flecha:hover{opacity:.9}
.bib-flecha:disabled{opacity:.15;cursor:default}
.bib-flecha.izq{left:6px}
.bib-flecha.der{right:6px}
/* 📖 Biblia libre: tira de capítulos arriba del pasaje */
.bib-caps-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none;
  font-family:-apple-system,sans-serif}
.bib-caps-strip::-webkit-scrollbar{display:none}
.bib-caps-strip .chip{flex:0 0 auto;min-width:40px;text-align:center;cursor:pointer}
.bib-caps-strip .chip.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
/* separadores de fecha en los chats (v206) */
.chat-sep{text-align:center;margin:12px 0 8px}
.chat-sep span{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:3px 12px;font-size:11.5px;color:var(--muted)}
/* título del lector tocable: abre el selector de día (v206) */
#readTitle.con-sel{cursor:pointer}
#readTitle.con-sel::after{content:" ▾";opacity:.55;font-size:12px}
.hl-palette{
  position:absolute;bottom:calc(env(safe-area-inset-bottom, 0px) + 110px);left:50%;transform:translateX(-50%);
  background:var(--card);border-radius:22px;box-shadow:0 6px 24px rgba(0,0,0,.28);
  padding:10px 16px;display:none;flex-direction:column;gap:8px;z-index:40;
}
.hl-palette.show{display:flex}
.hl-fila{display:flex;gap:10px;align-items:center;justify-content:center}
.hl-fila [data-color]{width:38px;height:38px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer}
.hl-palette .hl-off{background:var(--card);font-size:15px;border:none;padding:0 6px;color:var(--muted);cursor:pointer}
/* acciones estilo iOS: ícono con etiqueta debajo */
.hl-acciones{border-top:1px solid var(--border);padding-top:8px;gap:26px}
.hl-accion{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;color:var(--text);
  font-size:11.5px;padding:2px 8px;
}
.hl-accion svg{width:22px;height:22px}
/* 📖 definir palabra (v209): botón grande y fácil de tocar dentro de la paleta */
.hl-define-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 14px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--primary);background:var(--primary-light);
  color:var(--text);font-size:14px;line-height:1.35;text-align:left;
}
.hl-define-btn b{color:var(--primary)}

/* ===== Preguntas ===== */
.quiz-overlay{position:absolute;inset:0;background:rgba(30,26,38,.55);display:none;align-items:flex-end;z-index:50}
.quiz-overlay.show{display:flex}
.quiz-sheet{
  background:var(--card);width:100%;border-radius:24px 24px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  animation:up .25s ease;color:var(--text);
}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.quiz-dots{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.quiz-dots span{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.15)}
.quiz-dots span.done{background:var(--green)}
.quiz-dots span.cur{background:var(--primary)}
.quiz-label{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:6px;letter-spacing:.5px}
.quiz-q{font-size:16px;margin-bottom:16px;line-height:1.45}
.quiz-opt{
  display:block;width:100%;text-align:left;padding:15px 16px;margin-bottom:10px;
  border:1.5px solid var(--border);border-radius:12px;background:var(--card);
  font-size:14.5px;cursor:pointer;min-height:50px;color:var(--text);line-height:1.4;
}
.quiz-opt.correct{border-color:var(--green);background:rgba(46,158,91,.12)}
.quiz-opt.wrong{border-color:var(--red);background:rgba(214,69,69,.12)}
.quiz-msg{font-size:13px;color:var(--muted);min-height:18px;text-align:center;margin-top:4px}

/* ===== Foto de perfil ===== */
.avatar-pick{
  width:84px;height:84px;border-radius:50%;border:2px dashed var(--border);background:var(--card);
  cursor:pointer;overflow:hidden;position:relative;font-size:26px;
  display:inline-flex;align-items:center;justify-content:center;
}
.avatar-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-btn{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--primary-light);background:var(--primary-light);
  cursor:pointer;overflow:hidden;position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-weight:800;font-size:19px;
}
.avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.theme-night .avatar-btn{background:#33303d;border-color:#3a3644;color:#b39ddb}

/* ===== Wizard de onboarding ===== */
#scrWizard{background:var(--bg)}
.wiz-body{flex:1;overflow-y:auto;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.wiz-step{display:none;animation:up .3s ease}
.wiz-step.active{display:block}
.wiz-logo{
  width:76px;height:76px;border-radius:22px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 18px;
}
.wiz-step h2{font-size:22px;text-align:center;margin-bottom:10px;color:var(--text)}
.wiz-step p.lead{font-size:15px;color:var(--muted);text-align:center;line-height:1.55;margin-bottom:14px}
.wiz-feature{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.wiz-feature .ico{font-size:22px;flex-shrink:0}
.wiz-feature b{font-size:14px;display:block;color:var(--text)}
.wiz-feature span{font-size:13px;color:var(--muted);line-height:1.4}
.wiz-input{
  width:100%;padding:15px 16px;border:1.5px solid var(--border);border-radius:12px;
  font-size:16px;background:var(--card);color:var(--text);margin-bottom:6px;min-height:50px;
}
.wiz-input:focus{outline:2px solid var(--primary);border-color:var(--primary)}
/* error de credenciales: destello rojo en los campos */
@keyframes destelloRojo{
  0%,100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}
  30%{box-shadow:0 0 0 5px rgba(214,69,69,.35)}
  60%{box-shadow:0 0 0 2px rgba(214,69,69,.25)}
}
.wiz-input.error{border-color:var(--red);animation:destelloRojo .8s ease 2}
.wiz-msg-error{color:var(--red) !important;font-weight:700}
.wiz-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 16px;margin-bottom:10px;border:1.5px solid var(--border);border-radius:12px;
  background:var(--card);font-size:15px;cursor:pointer;min-height:54px;color:var(--text);
}
.wiz-opt .ico{font-size:20px}
.wiz-opt.sel{border-color:var(--primary);background:var(--primary-light);font-weight:700}
body.theme-night .wiz-opt.sel{background:#33303d}
.wiz-footer{padding:12px 26px calc(env(safe-area-inset-bottom, 0px) + 18px);flex-shrink:0}
.wiz-dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.wiz-dots span{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.15)}
.wiz-dots span.cur{background:var(--primary);width:22px;border-radius:5px}
.wiz-dots span.done{background:var(--primary);opacity:.45}
.wiz-skip{border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;display:block;margin:10px auto 0;padding:8px 14px;min-height:40px}
.wiz-preview{
  border-radius:14px;padding:16px 18px;margin-bottom:12px;border:1px solid var(--border);
  font-family:Georgia,serif;font-size:15.5px;line-height:1.7;background:var(--paper);color:var(--paper-text);
}
.wiz-preview sup{color:var(--paper-accent);font-weight:700;font-size:10px;margin-right:2px}

/* ===== Toast ===== */
.toast{
  position:absolute;top:calc(env(safe-area-inset-top, 0px) + 14px);left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;padding:12px 20px;border-radius:22px;font-size:14px;font-weight:700;
  display:none;z-index:60;box-shadow:0 4px 14px rgba(0,0,0,.25);
  max-width:calc(100% - 32px);text-align:center;white-space:normal;width:max-content;
}
/* animación propia: conserva el translateX(-50%) para que nazca centrado */
@keyframes toastIn{from{transform:translate(-50%,24px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.toast.show{display:block;animation:toastIn .3s ease}

/* ===== Vista resumen: mapa de lecturas (heatmap) ===== */
.vista-btn{width:100%;margin-top:10px;padding:10px;font-size:13.5px}
.heat-grid{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.heat{
  width:16px;height:16px;border-radius:4px;border:none;padding:0;
  cursor:pointer;background:#d8d4cc;flex:0 0 auto;
}
.heat:disabled{cursor:default}
.heat.ok{background:#2fa45f}
.heat.y{background:#f2c037}
.heat.o{background:#ef8a3c}
.heat.r{background:#e15241}
.theme-night .heat{background:#3a3a45}
.heat-leyenda{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:11px;color:var(--muted)}
.heat-leyenda span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.heat-leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ===== Insignias en cuadrícula ===== */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.insignia.mini{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:12px 6px;border:1px solid var(--border);border-radius:12px;
}
.insignia.mini .ins-e{font-size:30px}
.insignia.mini.off{opacity:.4}

/* ===== 🧠 Memorización ===== */
.memo-oculta{
  background:var(--primary-light);border-radius:6px;padding:0 7px;cursor:pointer;
  color:var(--primary);user-select:none;
}

/* ===== 👋 Toque de ánimo ===== */
.btn-animo{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--primary);
  background:var(--primary-light);font-size:18px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;color:var(--primary);
}

/* ===== Notificaciones: filas con interruptor ===== */
.ntf-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.ntf-row:last-child{border-bottom:none}
.sw{
  width:52px;height:30px;border-radius:15px;border:none;background:#cfc9c0;
  position:relative;cursor:pointer;transition:background .2s;flex:0 0 auto;padding:0;
}
.sw::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.sw.on{background:var(--primary)}
.sw.on::after{left:25px}

/* ===== Editor de foto: barra de zoom grande y morada ===== */
#feZoom{
  -webkit-appearance:none;appearance:none;height:14px;border-radius:9px;
  background:var(--primary-light);border:2px solid var(--primary);outline:none;
  touch-action:none;   /* el dedo controla la barra, no el scroll */
}
#feZoom::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;
  background:var(--primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer;
}
#feZoom::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:var(--primary);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer;
}

/* ===== Tour de bienvenida (walkthrough) ===== */
.tour-overlay{position:fixed;inset:0;background:rgba(20,15,35,.6);z-index:90}
.tour-tip{
  position:fixed;z-index:92;background:var(--card);border-radius:14px;padding:14px 16px;
  width:min(300px, calc(100vw - 24px));box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.tour-tip h4{margin:0 0 4px;font-size:15px;color:var(--primary)}
.tour-tip p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.4}
.tour-destacado{
  position:relative;z-index:91;
  box-shadow:0 0 0 3px var(--primary), 0 0 0 9px rgba(107,79,160,.35) !important;
  border-radius:14px;
}
/* la tabbar tiene su propio contexto de apilamiento: hay que subirla completa */
.tour-destacado-padre{z-index:91 !important}

/* ===== Extras: confeti, badges de no leídos, versículo del día ===== */
.confeti{position:fixed;inset:0;z-index:95;pointer-events:none}
.tabbar button.con-dot{position:relative}
.tabbar button.con-dot::after{
  content:"";position:absolute;top:2px;right:14px;width:9px;height:9px;
  border-radius:50%;background:#e15241;border:2px solid var(--card);
}
.miembro{position:relative}
.dm-badge{
  position:absolute;top:8px;right:6px;background:#e15241;color:#fff;
  font-size:10.5px;font-weight:800;min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.verso-txt{
  font-family:Georgia,serif;font-size:16.5px;line-height:1.55;
  color:var(--text);margin:8px 0;font-style:italic;
}

/* ===== Aviso de versión nueva ===== */
.update-bar{
  position:absolute;left:50%;transform:translateX(-50%);z-index:70;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 84px);
  background:var(--primary);color:#fff;border:none;border-radius:22px;
  padding:12px 20px;font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;
}
/* aviso de versión nueva: amarillo claro con letra morada y borde que destella amarillo
   (para que no se pierda sobre la tarjeta morada del buzón ni sobre el fondo claro) */
#updateBar{
  background:#fff8dc;color:var(--primary);
  border:3px solid #f4c430;
  animation:destelloAmarillo 1.2s ease-in-out infinite;
}
@keyframes destelloAmarillo{
  0%,100%{border-color:#f4c430;box-shadow:0 4px 14px rgba(0,0,0,.25), 0 0 0 0 rgba(244,196,48,.7)}
  50%{border-color:#ffe9a8;box-shadow:0 4px 14px rgba(0,0,0,.25), 0 0 12px 5px rgba(244,196,48,.55)}
}

/* ⓘ de información: explicación al toque, sin texto permanente */
.info-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--muted);
  color:var(--muted);font-size:11px;font-weight:700;font-style:normal;
  cursor:pointer;vertical-align:2px;margin-left:5px;
}

/* 🙏 tiempo de oración cumplido: parpadeo esperando el Amén */
.orar-fin{
  color:#e15241 !important;
  animation:orarParpadeo .8s ease-in-out infinite;
}
@keyframes orarParpadeo{0%,100%{opacity:1}50%{opacity:.25}}

/* 🧠 dictado de memorización: la palabra que toca escribir */
.memo-oculta.memo-cur{
  background:var(--primary-light);border-radius:6px;padding:0 4px;
  outline:1.5px solid var(--primary);
}

/* ✅ pantalla Hábitos: tarjetas grandes y simples */
.hab-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--card);border:1.5px solid var(--border);border-radius:16px;
  padding:20px 10px 16px;cursor:pointer;color:var(--text);text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.hab-card.ok{border-color:#34a853;background:rgba(52,168,83,.07)}
.hab-check{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:#34a853;color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* 🏺 lámpara de oración semanal */
.lamp{
  position:relative;width:38px;height:52px;flex-shrink:0;overflow:hidden;
  border:2.5px solid rgba(128,128,128,.35);border-radius:8px 8px 15px 15px;
  background:rgba(128,128,128,.08);
}
.lamp-fill{position:absolute;bottom:0;left:0;right:0;height:0%;transition:height .8s ease, background .4s}
.lamp.vacia{border-color:#e15241;animation:lampRojo 1.1s ease-in-out infinite}
@keyframes lampRojo{
  0%,100%{box-shadow:0 0 0 0 rgba(225,82,65,.5)}
  50%{box-shadow:0 0 10px 3px rgba(225,82,65,.55)}
}

/* ===== Barra de pestañas inferior ===== */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:40;display:none;
  justify-content:space-around;background:var(--card);border-top:1px solid var(--border);
  padding:6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.tabbar button{
  border:none;background:none;font-size:11px;font-weight:600;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 10px;cursor:pointer;min-width:56px;border-radius:10px;
}
.tabbar button span{font-size:21px;line-height:1}
.tabbar button.sel{color:var(--primary);font-weight:800}
body.con-tabs .tabbar{display:flex}
body.con-tabs .screen .content{padding-bottom:96px}
body.con-tabs #scrChat .read-footer{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 74px)}

/* ===== Club Chat ===== */
.chat-lista{flex:1;overflow-y:auto;padding:14px;background:var(--bg)}
.chat-fila{display:flex;margin-bottom:8px}
.chat-fila.mia{justify-content:flex-end}
.chat-fila.seleccionable{cursor:pointer}
.chat-fila.seleccionada .chat-burbuja{outline:2.5px solid var(--primary);box-shadow:0 0 0 3px rgba(107,79,160,.18);border-radius:14px}
.chat-burbuja{
  max-width:78%;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:8px 12px;font-size:14.5px;line-height:1.45;
}
.chat-fila.mia .chat-burbuja{background:var(--primary);border-color:var(--primary);color:#fff}
.chat-quien{display:block;font-size:11.5px;font-weight:800;color:var(--primary);margin-bottom:2px}
.dm-foto{
  display:inline-flex;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:var(--primary-light);align-items:center;justify-content:center;
  font-weight:800;font-size:22px;color:var(--primary);
}
.dm-foto img{width:100%;height:100%;object-fit:cover}
.chat-av{display:flex;flex-direction:column;align-items:center;width:40px;flex:0 0 auto;margin:0 6px}
.chat-av .mini{
  width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--primary-light);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--primary);
}
.chat-av .mini img{width:100%;height:100%;object-fit:cover}
.chat-av i{font-style:normal;font-size:9.5px;color:var(--muted);margin-top:2px;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-texto{white-space:pre-wrap;word-break:break-word}
.chat-hora{display:block;font-size:10.5px;opacity:.6;text-align:right;margin-top:3px}
.chat-fila.mia .chat-hora .muted{color:#fff;opacity:.8}

/* ===== Gamificación: tarjeta hero e insignias ===== */
.hero-card{background:var(--primary);color:#fff;border:none}
.hero-card .hero-label{font-size:11px;font-weight:800;letter-spacing:1.2px;opacity:.85}
.hero-card h3{font-size:20px;font-weight:800;margin:6px 0 4px;line-height:1.25}
.hero-card .hero-meta{font-size:13px;opacity:.88;margin-bottom:12px}
.hero-card .btn{background:#fff;color:var(--primary)}
body.theme-night .hero-card{background:#4a3d6b}
.insignia{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.insignia:last-child{border-bottom:none}
.insignia.off{opacity:.45;filter:grayscale(1)}
.insignia .ins-e{font-size:22px;width:30px;text-align:center;flex:0 0 auto}

/* ===== Pantalla grande (al FINAL para ganar en cascada) ===== */
@media (min-width:560px){
  /* pantalla completa: la app ocupa todo; el CONTENIDO se centra en columnas legibles */
  body{--fscale:1.5}
  #app{max-width:none; height:100%; border-radius:0; box-shadow:none; border:none}
  .topbar{max-width:820px; margin:0 auto; width:100%}
  .content{max-width:820px; margin:0 auto; width:100%}
  .wiz-body > .wiz-step{max-width:640px; margin:0 auto}
  .wiz-footer{max-width:640px; margin:0 auto; width:100%}
  .quiz-overlay{justify-content:center}
  .quiz-sheet{width:min(680px, 100%); margin:0}
  /* interfaz más grande en pantalla de computadora */
  .topbar h1{font-size:28px}
  .topbar .sub{font-size:16px}
  .card{padding:22px 24px}
  .card b{font-size:17px !important}
  .muted{font-size:15px}
  .streak{font-size:16px}
  .day-item{font-size:19px;min-height:72px;padding:18px 22px}
  .day-item .num{width:46px;height:46px;font-size:18px}
  .day-item .meta{font-size:14.5px}
  .read-title-row b{font-size:19px}
  .chip{font-size:14px;padding:10px 16px}
  .controls button{width:48px;height:48px;font-size:20px}
  .read-meta{font-size:15px}
  .read-hint{font-size:14px}
  .btn{font-size:18px;padding:17px}
  .back-btn{font-size:17px}
  /* columna de texto centrada, con anchura ajustable por el usuario (--tw) */
  .passage{padding:34px max(24px, calc((100% - var(--tw, 860px)) / 2)) 44px}
  .width-ctl{
    display:flex;align-items:center;gap:8px;color:var(--muted);font-size:16px;
    background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0 12px;height:48px;
  }
  .width-ctl input[type=range]{width:150px;accent-color:var(--primary);cursor:pointer}
  .read-title-row, .read-meta, .read-track{max-width:900px;margin-left:auto;margin-right:auto}
  .read-meta{margin-top:8px}
  .read-track{margin-top:8px}
  /* en escritorio los controles siempre están visibles y el botón Aa sobra */
  .controls-row{display:flex}
  #btnAa{display:none}
  .read-footer > *{max-width:860px;margin-left:auto;margin-right:auto}
  .passage h2{font-size:22px}
  .quiz-q{font-size:20px}
  .quiz-opt{font-size:17px;padding:18px 20px}
  .quiz-label{font-size:13px}
  .wiz-step h2{font-size:28px}
  .wiz-step p.lead{font-size:17px}
  .wiz-feature b{font-size:16px}
  .wiz-feature span{font-size:14.5px}
  .wiz-opt{font-size:17px;min-height:60px}
  .wiz-input{font-size:18px}
  .wiz-preview{font-size:19px}
}

/* versículos elegidos por toque para resaltar (multi-selección, pueden ser discontinuos) */
.vs-pre{background:var(--primary-light);border-radius:6px;box-shadow:0 0 0 2px var(--primary-light)}