/* ─── [2026-07-27] Modo SOLO LECTURA (super/admin readOnly) ───
   body.is-solo-lectura se aplica cuando el claim readOnly del token es true (ver
   applySuperAdminBodyClass). El usuario ve todo pero no puede modificar nada: los
   guardas de cloudSave/queueCollectionDocDelete y las reglas de Firestore bloquean
   las escrituras; este CSS es solo el gating visual. Elementos con .hide-solo-lectura
   se ocultan. [2026-07-28] Sin banner fijo: el aviso vive como etiqueta «solo lectura» junto a
   super/admin en el selector de Nivel de acceso (openNivelAccesoSheet). */
body.is-solo-lectura .hide-solo-lectura{display:none !important;}
/* Los controles marcados como escritura quedan visibles pero inertes/atenuados para dejar claro
   que se puede mirar pero no tocar. Se marca puntualmente con .disable-solo-lectura donde aplique. */
body.is-solo-lectura .disable-solo-lectura{opacity:.45 !important;pointer-events:none !important;filter:grayscale(.4);}

/* ─── Multi-iglesia (Fase 3): gating de UI por iglesia ───
   Las secciones que SOLO tienen sentido cuando la iglesia activa tiene
   grupos (CABALLEROS DEL CIELO, CENTINELAS, EMBAJADORES DEL REY, EMANUEL)
   se marcan con .requires-grupos. Las que solo tienen sentido SIN grupos
   se marcan con .hide-with-grupos.
   El body recibe iglesia-tiene-grupos / iglesia-sin-grupos en cada cambio
   de iglesia (ver applyIglesiaBodyClass en app.js). */
body.iglesia-sin-grupos .requires-grupos{display:none !important;}
body.iglesia-tiene-grupos .hide-with-grupos{display:none !important;}
/* Badge de iglesia al lado del nombre del caballero en rankings cross-iglesia. */
.iglesia-badge{display:inline-block;font-size:9px;padding:1px 5px;margin-left:4px;border-radius:5px;background:rgba(58,171,186,0.15);color:var(--teal3);font-weight:700;letter-spacing:.3px;text-transform:uppercase;vertical-align:middle;}

/* ─── Multi-iglesia (Fase 5+6): gating de super-admin ───
   body.is-super-admin se aplica cuando la sesion local esta en modo admin
   Y la iglesia activa tiene superAdminEnabled. Sin esa combinacion, las
   secciones .requires-super-admin permanecen ocultas. */
.requires-super-admin{display:none !important;}
/* Inline genericos (chips, badges, spans dentro de otras secciones) */
body.is-super-admin span.requires-super-admin,
body.is-super-admin a.requires-super-admin,
body.is-super-admin button.requires-super-admin{display:inline-block !important;}
/* Boton de nav: siempre visible para super-admin */
body.is-super-admin .requires-super-admin.ntab{display:flex !important;}
/* Contenido del tab SOLO se muestra cuando esta active. Sin la condicion
   .active, el tab se quedaria visible cuando el usuario pulsa otra
   pestania, montandose encima del contenido de la pestaña activa. */
body.is-super-admin .requires-super-admin.tab.active{display:block !important;}
/* Genericos: panel, details y cualquier div con la clase */
body.is-super-admin div.requires-super-admin:not(.tab):not(.ntab),
body.is-super-admin .requires-super-admin.panel{display:block !important;}
body.is-super-admin details.requires-super-admin{display:block !important;}
/* [2026-07-03 Independización] Pestañas EXCLUSIVAS de la iglesia local (Secretaría, Miembros, Registro,
   Finanzas, Informes, Directivas): el SUPER-ADMIN puro (body.is-super-admin) administra iglesias y
   contenido global, NO las cosas de cada iglesia → se le OCULTAN. Al cambiar de nivel a "Admin de Iglesia"
   (⚙️) isSuperAdmin() pasa a false → se quita is-super-admin y vuelven a verse. Un adminIglesia normal (no
   super) NO tiene is-super-admin, así que SIEMPRE las ve. Inverso a requires-super-admin. */
body.is-super-admin .ntab.iglesia-local{display:none !important;}
/* [2026-08-03 auditoría] Secretaría: la lee SOLO el admin de iglesia o el líder/secretario de junta (claim
   secRead), NUNCA el super. `no-secretaria` (app.js, según _puedoVerSecretaria) oculta su pestaña cuando la
   sesión no puede leerla — cubre también al super en "ver como Admin de Iglesia" (is-super-admin off pero el
   token real sigue sin poder leerla). applyAdminScope salta a la 1ª pestaña visible. */
body.no-secretaria .ntab[onclick*="t-secretaria"]{display:none !important;}
/* [2026-07-21] «Notificar» de Eventos = notificación LOCAL de la iglesia (por comité). El SUPER PURO tiene su
   propia pestaña «📣 Notificar» (global), así que este botón se oculta para él y solo lo ve el admin de iglesia. */
body.is-super-admin button.evt-notificar-igl{display:none !important;}
/* [2026-07-03] requires-super-real: visible para el super REAL (c28) AUNQUE esté en modo "Admin de
   Iglesia" (ver-como). La pestaña Estudios lo usa para que la iglesia gestione programación/calificación
   de estudios. Oculta para adminIglesia normales (no super real). NO es iglesia-local (no se oculta a super). */
.requires-super-real{display:none !important;}
body.is-super-real .requires-super-real.ntab{display:flex !important;}
body.is-super-real .requires-super-real.tab.active{display:block !important;}
/* [2026-07-03] requires-iglesia-admin: visible para CUALQUIER admin de iglesia (super o adminIglesia).
   La pestaña Estudios lo usa: super y adminIglesia programan/califican; crear contenedores = solo super. */
.requires-iglesia-admin{display:none !important;}
body.is-iglesia-admin .requires-iglesia-admin.ntab{display:flex !important;}
body.is-iglesia-admin .requires-iglesia-admin.tab.active{display:block !important;}
/* [2026-07-03] requires-igl-mgmt: controles de gestión INTERNA de la iglesia dentro de Estudios
   (programar estudios, calificar, grupos de caballeros). Visibles para el admin de iglesia PERO NO
   en modo SUPER puro — el super solo gestiona CONTENIDO global (material/evaluaciones). Regla:
   is-iglesia-admin (super real o adminIglesia) Y NO is-super-admin (= está en modo Admin de Iglesia). */
.requires-igl-mgmt{display:none !important;}
body.is-iglesia-admin:not(.is-super-admin) button.requires-igl-mgmt{display:inline-block !important;}
/* [2026-07-03] requires-iglesia-mod: MODERACIÓN de chats LOCALES por el admin de IGLESIA (Chat de cada
   comité + Comunidad local de HdV). Visible para el admin de iglesia en modo local (is-iglesia-admin) y
   NO en modo super puro (el super modera HdV distrital/nacional, no los chats de comité). Los admin
   DELEGADOS de comité (no is-iglesia-admin) tampoco lo ven → dejan de moderar el chat. */
.requires-iglesia-mod{display:none !important;}
body.is-iglesia-admin:not(.is-super-admin) .requires-iglesia-mod.ntab{display:flex !important;}
body.is-iglesia-admin:not(.is-super-admin) .requires-iglesia-mod.tab.active{display:block !important;}

/* [Admin separado] Dos paneles independientes: Iglesia app (super, desde el lobby) y Hombres
   de Verdad (sección, desde dentro de HdV). Cada pestaña lleva ascope-iglesia/ascope-hdv y solo
   se ven las del ámbito activo (body.admin-scope-*). Especificidad (0,4,1) para ganar sobre la
   regla de super-admin (0,3,1) y ocultar también las pestañas super que no son del ámbito. */
body.admin-scope-iglesia .app-nav .ascope-hdv.ntab,
body.admin-scope-hdv .app-nav .ascope-iglesia.ntab{display:none !important;}
/* Contenido (no pestañas) marcado por ámbito: p. ej. el editor de la reflexión del
   día (ascope-iglesia) NO aparece en el admin de Hombres de Verdad. */
body.admin-scope-hdv .ascope-iglesia:not(.ntab){display:none !important;}
body.admin-scope-iglesia .ascope-hdv:not(.ntab){display:none !important;}
/* [2026-06-13] Ámbito genérico de COMITÉ (Generación Vida, Mujeres del Bien, …). Su contenido
   (ascope-comite) solo en su ámbito; en comité se ocultan los contenidos de iglesia/hdv. */
body.admin-scope-comite .ascope-iglesia:not(.ntab),
body.admin-scope-comite .ascope-hdv:not(.ntab){display:none !important;}
body.admin-scope-hdv .ascope-comite:not(.ntab),
body.admin-scope-iglesia .ascope-comite:not(.ntab){display:none !important;}
/* [2026-06-18] En el admin de un COMITÉ: botón "Volver al usuario" (a la vista de miembro del
   comité) en vez del perfil de admin. Fuera del ámbito de comité, lo contrario. */
body:not(.admin-scope-comite) .admin-volver-usuario{display:none !important;}
body.admin-scope-comite .admin-perfil-btn{display:none !important;}
/* [2026-07-01] En el admin de HDV (admin-scope-hdv), como en cualquier comité, se ofrece "Vista de usuario
   de HDV" (👤) en lugar de "Mi perfil de admin" (⚙️). HDV no es admin-scope-comite, por eso su regla propia.
   Va DESPUÉS de las de arriba para ganar por orden (misma especificidad). */
body.admin-scope-hdv .admin-volver-usuario{display:inline-flex !important;}
body.admin-scope-hdv .admin-perfil-btn{display:none !important;}

/* Reducción de estilos inline en index.html */
.btn-admin-fixed{
  position:fixed;
  top:12px;
  right:12px;
  z-index:50;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:0 6px 18px rgba(15,23,42,0.12);
  border-radius:12px;
  padding:9px 10px;
  font-size:14px;
}
.login-logo-img{
  width:300px;
  max-width:88%;
  height:auto;
  display:block;
  margin:0 auto 14px;
}
/* ── BASE APP STYLES (migrados desde index.html) ── */

:root{
  --teal:#3aabba;--teal2:#2d8f9c;--teal3:#1d6b77;--teal-bg:rgba(58,171,186,0.12);
  --gold:#f5c518;--gold2:#d4a800;--gold-bg:rgba(245,197,24,0.12);
  --off:#f4f7fa;--white:#fff;--card:#fff;
  --dark:#1a1f2e;--dark2:#242b3d;--dark3:#2e3650;
  --border:rgba(58,171,186,0.22);--border2:rgba(58,171,186,0.5);
  --text:#1a1f2e;--text2:#3d4857;--text3:#64748b;
  --red:#ef4444;--red-bg:rgba(239,68,68,0.1);
  --green:#16a34a;--green-bg:rgba(22,163,74,0.12);
  --shadow:0 2px 12px rgba(0,0,0,0.06);--shadow2:0 6px 30px rgba(58,171,186,0.18);
  --radius:12px;--radius-lg:18px;--radius-xl:22px;
  --shadow-pro:0 3px 14px rgba(15,23,42,0.07),0 1px 3px rgba(0,0,0,0.04);
  --shadow-pro-hover:0 8px 28px rgba(15,23,42,0.12),0 2px 6px rgba(0,0,0,0.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;background:var(--dark);overscroll-behavior-x:none;}
body{height:100%;background:var(--off);color:var(--text);font-family:'Lato',sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
/* Con vista personal o admin activa, el rebote del viewport no destapa gris claro junto a la cabecera */
/* Clase gestionada desde JS (evita body:has() que fuerza re-eval en cada mutación DOM) */
body.screen-dark{
  background:var(--dark);
}
/* Portada (lobby) con fondo uniforme de borde a borde. Mientras el lobby está
   visible (clase puesta por enterLobby), <html> y <body> comparten EXACTAMENTE
   el mismo color que el overlay #iglesia-lobby (#f4f7fa), de modo que ningún
   hueco posible muestre otro color: la zona segura del notch/home-indicator en
   la app instalada (PWA standalone), el rebote del scroll o un sliver del fondo
   oscuro de la sección que quedara detrás. Gana a body.screen-dark (de ahí el
   !important y el orden). En teléfonos sin notch el resultado es idéntico. */
html.iglesia-lobby-open,
html.iglesia-lobby-open body{
  background:#f8fafc !important;
}
.screen{display:none;height:100vh;min-height:100vh;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;}
/* El login permite scroll vertical: altura FIJA al viewport con overflow-y:auto
   para que el contenido interno (logo + iglesia + 3 modos + form + footer)
   pueda exceder la altura visible y scrollear DENTRO del contenedor. NO usar
   height:auto: el padre body tiene overflow:hidden y el contenido se sale sin
   scroll. La idea: contenedor del tamano del viewport, scroll interno. */
#screen-login.screen{overflow-y:auto;overflow-x:hidden;height:100vh;min-height:100vh;}
/* Rendimiento: las pantallas ocultas no necesitan layout ni paint */
.screen:not(.active){content-visibility:hidden;contain-intrinsic-size:auto 100vh;}

/* Viewport moderno (evita “scroll fantasma” en móvil por 100vh) */
@supports (height: 100dvh){
  .screen{height:100dvh;min-height:100dvh;}
  #screen-login{height:100dvh;min-height:100dvh;}
}
@supports (height: 100svh){
  .screen{height:100svh;min-height:100svh;}
  /* svh = smallest viewport height (excluye URL bar) — garantiza que el
     contenido siempre quepa, dando margen para scroll dentro del viewport
     visible incluso con la barra URL desplegada en mobile. */
  #screen-login{height:100svh;min-height:100svh;}
}
/* [2026-07-25] PWA INSTALADA (standalone): no hay barra de URL, así que `svh` se quedaba corto y dejaba una
   FRANJA oscura (fondo de <html>) en la zona del home-indicator, quitando espacio. En standalone usamos `dvh`
   (alto REAL de la pantalla) para llenar de borde a borde como la app nativa. Solo afecta a la app instalada;
   en el navegador se conserva `svh`. */
@media all and (display-mode: standalone){
  .screen{height:100dvh;min-height:100dvh;}
  #screen-login{height:100dvh;min-height:100dvh;}
}

/* ── LOGIN ── */
#screen-login{
  position:relative;
  background:var(--white);
  background-image:radial-gradient(ellipse at 20% 90%,rgba(58,171,186,0.07) 0%,transparent 50%),
                   radial-gradient(ellipse at 80% 10%,rgba(58,171,186,0.05) 0%,transparent 50%);
  align-items:center;justify-content:flex-start;
  padding:calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  min-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.login-ptr-indicator{
  position:absolute;
  top:calc(8px + env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%) translateY(-70%);
  padding:8px 14px;
  background:var(--teal-bg);
  border:1px solid var(--border);
  border-radius:12px;
  font-size:12px;
  color:var(--teal2);
  font-weight:700;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s linear, transform .12s linear;
  z-index:55;
  max-width:92%;
  text-align:center;
  box-shadow:var(--shadow);
}
.login-ptr-indicator.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.login-box{
  width:100%;
  max-width:400px;
  text-align:center;
  /* SCROLL FIX (incidente reportado): antes max-height:100% + overflow:hidden
     creaba un contenedor cap interno que bloqueaba el scroll del padre
     #screen-login. Si el contenido (selector iglesia + 3 modos + form +
     footer) excedia el viewport en moviles, no habia forma de hacer scroll.
     Ahora la box puede crecer libremente; el scroll lo gestiona el padre
     #screen-login que tiene overflow-y:auto. */
}
.login-logo{margin-top:44px;margin-bottom:24px;}
.login-year{display:inline-block;margin-top:0;background:var(--teal-bg);border:1px solid var(--border);color:var(--teal2);font-size:11px;font-weight:700;letter-spacing:3px;padding:4px 14px;border-radius:20px;text-transform:uppercase;}
.login-main{width:100%;}
.login-footer{width:100%;}
/* Portal de secciones (app Iglesia) */
.iglesia-sec-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid var(--border);border-radius:16px;padding:14px 15px;background:var(--card);box-shadow:var(--shadow-pro);cursor:pointer;font-family:inherit;transition:transform .12s ease,box-shadow .12s ease;}
.iglesia-sec-card:active{transform:scale(.985);}
.iglesia-sec-card--soon{opacity:.55;cursor:default;box-shadow:none;}
.iglesia-sec-emoji{font-size:26px;line-height:1;flex-shrink:0;}
.iglesia-sec-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.iglesia-sec-txt strong{font-size:15px;font-weight:800;color:var(--text);}
.iglesia-sec-txt small{font-size:12px;color:var(--text2);}
.iglesia-sec-arrow{font-size:22px;color:var(--text3);flex-shrink:0;}
.iglesia-back-link{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--teal2);font:700 13px/1 inherit;cursor:pointer;padding:8px 4px;margin-top:8px;}

.login-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 14px;}
.login-fields-panel{width:100%;}
.mode-btn{padding:14px 10px;border:1px solid rgba(30,41,59,0.12);border-radius:var(--radius);background:var(--white);color:var(--text3);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow);}
.mode-btn:hover{box-shadow:var(--shadow-pro);}
.mode-btn .ico{font-size:22px;}
.mode-btn.active{border-color:var(--teal);background:var(--teal-bg);color:var(--teal2);box-shadow:var(--shadow-pro);}
.lf{margin-bottom:12px;text-align:left;}
.lf label{display:block;font-size:10px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-bottom:6px;font-weight:700;}
.lf input,.lf select{width:100%;padding:12px 16px;background:var(--off);border:1px solid rgba(30,41,59,0.12);border-radius:var(--radius);color:var(--text);font-family:'Lato',sans-serif;font-size:15px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s;}
.lf input:focus,.lf select:focus{border-color:var(--teal);}
.login-err{color:var(--red);font-size:13px;margin-bottom:10px;display:none;}
.btn-enter{width:100%;padding:15px;background:linear-gradient(135deg,var(--teal),var(--teal2));border:none;border-radius:var(--radius);color:white;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;letter-spacing:2px;cursor:pointer;text-transform:uppercase;box-shadow:0 4px 20px rgba(58,171,186,0.35);transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;margin-top:4px;}
.btn-enter:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(58,171,186,0.5);}

/* ── PWA INSTALL BANNER ── */
#pwa-install-banner{
  width:100%;
  background:linear-gradient(135deg,rgba(58,171,186,0.13),rgba(56,189,248,0.09));
  border:1.5px solid rgba(58,171,186,0.4);
  border-radius:14px;
  margin-bottom:14px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  animation:hdv-banner-appear 0.4s ease-out;
}
@keyframes hdv-banner-appear{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.pwa-banner-body{
  display:flex;align-items:center;gap:11px;
  width:calc(100% - 34px);
  padding:11px 14px;
  background:none;border:none;cursor:pointer;text-align:left;
}
.pwa-banner-icon-wrap{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 2px 8px rgba(58,171,186,0.35);
}
.pwa-banner-bell{font-size:19px;line-height:1;display:block;animation:hdv-bell-shake 4s ease-in-out 6;}
@keyframes hdv-bell-shake{
  0%,60%,100%{transform:rotate(0)}
  65%{transform:rotate(-12deg)}
  70%{transform:rotate(12deg)}
  75%{transform:rotate(-8deg)}
  80%{transform:rotate(8deg)}
  85%{transform:rotate(-4deg)}
  90%{transform:rotate(4deg)}
  95%{transform:rotate(0)}
}
.pwa-banner-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.pwa-banner-text strong{font-size:12px;font-weight:800;color:var(--teal2);font-family:'Montserrat',sans-serif;line-height:1.3;}
.pwa-banner-text span{font-size:11px;color:var(--text3);}
.pwa-banner-arrow{font-size:20px;color:var(--teal);font-weight:700;flex-shrink:0;line-height:1;}
.pwa-banner-close{
  position:absolute;top:8px;right:8px;
  background:none;border:none;cursor:pointer;
  font-size:13px;color:var(--text3);
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;padding:0;
}
.pwa-banner-close:hover{background:rgba(0,0,0,0.07);}
/* ── Botón CTA "Entrar con Google" — destacado e invitador ── */
.btn-google-cta{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 18px;
  background:#fff;
  border:1px solid rgba(60,64,67,0.14);
  border-radius:14px;
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.2px;
  color:#23303a;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(58,171,186,0.20),0 1px 3px rgba(0,0,0,0.08);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:gg-cta-pulse 2.6s ease-in-out 8;
}
.btn-google-cta:hover{
  animation:none;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(58,171,186,0.34),0 2px 6px rgba(0,0,0,0.10);
}
.btn-google-cta:active{
  animation:none;
  transform:translateY(0);
  box-shadow:0 3px 12px rgba(58,171,186,0.22);
}
.btn-google-cta .gg-icon{width:22px;height:22px;flex-shrink:0;display:block;}
/* Botón «Continuar con Apple» (regla 4.8 App Store). Estilo Apple HIG: negro,
   logo y texto blancos. Mismo tamaño/forma que el de Google. */
.btn-apple-cta{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:10px;
  padding:14px 18px;
  background:#000;
  border:1px solid #000;
  border-radius:14px;
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.2px;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.22),0 1px 3px rgba(0,0,0,0.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-apple-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.30),0 2px 6px rgba(0,0,0,0.12);}
.btn-apple-cta:active{transform:translateY(0);box-shadow:0 3px 12px rgba(0,0,0,0.22);}
.btn-apple-cta .ap-icon{width:20px;height:20px;flex-shrink:0;display:block;color:#fff;margin-top:-2px;}
/* Indicador de conexión / cambios pendientes (offline-first · regla 4.2). Pill fijo,
   visible solo cuando hay algo que comunicar (sin conexión, sincronizando, o «hecho» breve). */
#conn-status{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  z-index:9000; display:none; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.2px;
  color:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.20),0 1px 3px rgba(0,0,0,0.10);
  pointer-events:none; max-width:92vw; white-space:nowrap;
}
#conn-status b{font-weight:800;}
#conn-status.cs-off{ background:#b45309; }   /* ámbar — sin conexión */
#conn-status.cs-sync{ background:#0f766e; }  /* teal — subiendo cambios */
#conn-status.cs-ok{ background:#16a34a; }    /* verde — sincronizado (breve) */
@keyframes gg-cta-pulse{
  0%,100%{box-shadow:0 4px 16px rgba(58,171,186,0.20),0 1px 3px rgba(0,0,0,0.08);}
  50%{box-shadow:0 7px 22px rgba(58,171,186,0.36),0 1px 3px rgba(0,0,0,0.08);}
}
@media (prefers-reduced-motion: reduce){
  .btn-google-cta{animation:none;}
}
/* ── Guía ilustrada de instalación ── */
.install-step-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;}
.install-step-row+.install-step-row{border-top:1px solid #f1f5f9;}
.install-phone-frame{
  width:52px;height:84px;
  border:2px solid #374151;border-radius:12px 12px 9px 9px;
  background:var(--dark);padding:4px 3px 3px;
  flex-shrink:0;display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.install-phone-notch{height:4px;background:#374151;border-radius:3px;margin-bottom:3px;display:flex;align-items:center;justify-content:center;}
.install-phone-notch span{width:10px;height:2px;border-radius:1px;background:#555;}
.install-phone-screen{flex:1;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;}
.install-step-info{flex:1;}
.install-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:11px;font-weight:800;margin-right:6px;flex-shrink:0;
}
.install-step-title{font-size:13px;font-weight:800;color:var(--dark);display:flex;align-items:center;margin-bottom:4px;}
.install-step-desc{font-size:12px;color:var(--text2);line-height:1.45;}

/* Login compacto general (móvil + alturas pequeñas) — minimizar espacios
   para que entren los 3 modos + form + footer + selector de iglesia sin
   forzar scroll en pantallas medianas. En las muy pequeñas (max-height:740)
   se aprieta más. */
@media (max-height: 820px), (max-width: 768px){
  #screen-login{padding:calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));}
  .login-logo{margin-bottom:22px;}
  .login-logo img{width:240px !important;max-width:86% !important;}
  .login-year{padding:3px 12px;font-size:10px;letter-spacing:2px;}
  .login-modes{margin:10px 0 8px;gap:6px;}
  .mode-btn{padding:9px 6px;font-size:10px;letter-spacing:1px;gap:3px;}
  .mode-btn .ico{font-size:18px;}
  .lf{margin-bottom:8px;}
  .lf label{margin-bottom:4px;font-size:9px;letter-spacing:1.5px;}
  .lf input,.lf select{padding:9px 12px;font-size:14px;}
  .btn-enter{padding:11px;font-size:12px;letter-spacing:1.5px;}
  .login-err{font-size:12px;margin-bottom:6px;}
  #login-install-hint{margin-top:8px !important;font-size:10px;}
  #login-install-share-wrap{margin-top:4px !important;}
  #pwa-install-banner{margin-bottom:10px;}
  .pwa-banner-body{padding:8px 12px;}
  .pwa-banner-icon-wrap{width:32px;height:32px;}
  .pwa-banner-text strong{font-size:11px;}
  .pwa-banner-text span{font-size:10px;}
}
/* Alturas extra pequeñas (iPhone SE, viewports cortos con teclado abierto):
   reduce aún más para que el contenido quepa en 1 scroll mínimo. */
@media (max-height: 640px){
  .login-logo{margin-bottom:6px;}
  .login-logo img{width:200px !important;max-width:74% !important;}
  .login-year{padding:2px 10px;font-size:9px;}
  .login-modes{margin:6px 0 6px;gap:5px;}
  .mode-btn{padding:7px 4px;font-size:9px;}
  .mode-btn .ico{font-size:16px;}
  .lf{margin-bottom:6px;}
  .lf input,.lf select{padding:8px 11px;font-size:13px;}
  .btn-enter{padding:9px;font-size:11px;}
}

@media (max-width: 768px){
  #screen-login{
    align-items:stretch;
    justify-content:flex-start;
  }
  .login-box{
    max-width:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-bottom:6px;
  }
  .login-logo{
    margin-top:40px;
    margin-bottom:22px;
  }
  .login-main{
    /* Antes: flex:1; justify-content:center; — esto centraba el form en el
       viewport, lo que en pantallas cortas empujaba los modos/inputs hacia
       abajo y el btn-enter quedaba oculto fuera del foco. Ahora el contenido
       fluye desde arriba; el scroll del padre #screen-login resuelve si
       supera el viewport. */
    flex:initial;
    display:flex;
    flex-direction:column;
  }
  .login-footer{
    margin-top:8px;
  }
}

@media (max-width: 768px) and (max-height: 740px){
  .login-logo{margin-bottom:6px;}
  .login-footer{margin-top:6px;}
  .login-footer .install-hint{margin-top:6px !important;}
}

/* ── APP HEADER ── */
.app-header{background:var(--dark);border-bottom:2px solid rgba(58,171,186,0.3);padding:calc(5px + env(safe-area-inset-top,0px)) 16px 5px 16px;display:flex;align-items:center;gap:10px;position:-webkit-sticky;position:sticky;top:0;z-index:100;flex-shrink:0;min-height:46px;}
.hbrand{flex:1;display:flex;align-items:center;gap:10px;}
.hbrand-text{line-height:1.2;}
.h-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:900;color:white;letter-spacing:1px;}
.h-title span{color:var(--teal);}
/* [2026-06-14] Nombre de la iglesia en la cabecera SIEMPRE en blanco: la cabecera es oscura/de
   color (HdV, Iglesia app teal, comités azul/rosa…), así que el teal se perdía en algunos fondos. */
.h-sub{font-family:'Caveat',cursive;font-size:13px;color:rgba(255,255,255,0.92);opacity:1;text-shadow:0 1px 2px rgba(0,0,0,0.22);}
.hbrand-icon{font-size:24px;filter:drop-shadow(0 0 6px rgba(201,168,76,0.4));color:var(--teal);display:inline-flex;align-items:center;min-width:28px;}
#screen-personal .hbrand-icon{color:rgba(255,255,255,0.95);}
.hacts{display:flex;align-items:center;gap:4px;}
.btn-hdr{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.6);padding:7px 11px;border-radius:8px;font-size:11px;cursor:pointer;font-family:'Lato',sans-serif;white-space:nowrap;transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.btn-hdr:hover{background:rgba(255,255,255,0.14);color:white;}

/* Admin (botón fijo del login) */
#btn-admin.active{
  background:rgba(58,171,186,0.18) !important;
  border:1px solid rgba(58,171,186,0.85) !important;
  color:rgba(255,255,255,0.95) !important;
  box-shadow:0 10px 26px rgba(58,171,186,0.28) !important;
}

/* ── NAV ── */
.app-nav{background:var(--dark2);display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:2px solid rgba(58,171,186,0.2);flex-shrink:0;overscroll-behavior-y:none;touch-action:pan-x;}
.app-nav::-webkit-scrollbar{display:none;}
.ntab{padding:10px 12px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .2s ease, border-color .2s ease, background-color .2s ease;font-family:'Montserrat',sans-serif;font-weight:700;flex-shrink:0;text-align:center;line-height:1.25;}
.ntab.active{color:var(--teal);border-bottom-color:var(--teal);}
/* ── Admin: DOS barras INDEPENDIENTES (una por ámbito) ───────────────────────
   [2026-06-13] Antes había UNA sola barra (app-nav-three-rows) con las pestañas de
   ambos ámbitos mezcladas y ocultadas por CSS — tocar una arriesgaba la otra. Ahora
   cada ámbito tiene su PROPIA barra en el DOM: .app-nav-iglesia (Iglesia app) y
   .app-nav-hdv (Hombres de Verdad). El CSS muestra solo la del ámbito activo
   (body.admin-scope-*). Rejilla de 4 por fila (flex-wrap); las pestañas super-admin
   ocultas se colapsan solas, así que el orden lo da el propio DOM. */
.app-nav.app-nav-admin{
  display:none;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center; /* [2026-06-13] filas uniformes: la última fila parcial queda centrada */
  overflow:visible;
  touch-action:manipulation;
  padding:7px 7px 8px;
  gap:6px;
  border-bottom-width:1px;
}
body.admin-scope-iglesia .app-nav.app-nav-iglesia{display:flex;}
body.admin-scope-hdv .app-nav.app-nav-hdv{display:flex;}
.app-nav-admin .ntab{
  /* [2026-06-13] Sin tope de ancho: las pestañas de cada fila CRECEN para llenar el ancho
     (no quedan huecos). 4 por fila por el flex-basis del 25%; la última fila parcial reparte
     el espacio entre sus pestañas (p.ej. 5 → 4 + 1 a ancho completo; 6 → 4 + 2 al 50%). */
  flex:1 1 calc(25% - 6px);
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:10.5px;
  font-weight:700;
  padding:8px;
  min-height:38px;
  line-height:1.15;
  text-align:center;
  text-transform:none;
  letter-spacing:0.01em;
  border:1px solid transparent;
  border-bottom:1px solid transparent;
  border-radius:11px;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.app-nav-admin .ntab:active{transform:scale(0.97);}
@media(min-width:400px){ .app-nav-admin .ntab{font-size:11px;} }
@media(min-width:520px){ .app-nav-admin .ntab{font-size:11.5px;letter-spacing:0.03em;} }

/* Tema IGLESIA APP (teal): cabecera afín + su barra. */
body.admin-scope-iglesia .app-header{background:linear-gradient(120deg,#0f766e 0%,#0e7490 58%,#155e75 100%);border-bottom-color:rgba(255,255,255,0.18);}
.app-nav.app-nav-iglesia{background:linear-gradient(180deg,#0c4f4a,#0a4540);border-bottom-color:rgba(153,246,228,0.25);}
.app-nav-iglesia .ntab{color:rgba(255,255,255,0.82);background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
.app-nav-iglesia .ntab.active{background:rgba(153,246,228,0.18);border-color:rgba(153,246,228,0.60);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.18);}

/* Tema HOMBRES DE VERDAD (oscuro/oro): distinto del de Iglesia app. */
.app-nav.app-nav-hdv{background:linear-gradient(180deg,#20283c,#161c2b);border-bottom-color:rgba(245,197,24,0.22);}
.app-nav-hdv .ntab{color:rgba(255,255,255,0.78);background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.10);}
.app-nav-hdv .ntab.active{background:rgba(245,197,24,0.16);border-color:rgba(245,197,24,0.55);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.22);}

/* ════════════════════════════════════════════════════════════════════════════
   COMITÉS (modelo Generación Vida) — [2026-06-13]
   Sistema GENÉRICO reusado por cada comité (jóvenes, mujeres, …). Tema por variables CSS:
   cada comité define --sec-* en body.admin-scope-<key> / body.seccion-<key>, y las reglas
   genéricas (admin-scope-comite / seccion-comite / app-nav-comite) las consumen. Para añadir
   un comité basta un bloque de variables nuevo (+ su entrada en SECCIONES_APP).
   ════════════════════════════════════════════════════════════════════════════ */
/* Paleta por comité (admin + vista personal comparten variables). [2026-06-14] Tonos suaves:
   jóvenes = azul cielo (el del antiguo botón "Nueva publicación"); mujeres = rosa suave. Los
   gradientes van de oscuro (izda, donde va el texto blanco) a medio para que las letras blancas
   se lean siempre. Las pestañas usan SIEMPRE texto blanco (ver reglas .ntab/.pv-ntab). */
/* [2026-07-04 FIX] COMITÉS A MEDIDA (dinámicos sec_*): solo reciben --sec-accent inline (launcher.js),
   sin bloque de tema propio → les faltaban --sec-grad/--sec-nav/-soft/-border y la cabecera + barra de
   pestañas quedaban TRANSPARENTES sobre el fondo claro, con el texto en blanco (ilegible). Aquí se DERIVAN
   del accent en el genérico. Va ANTES de los bloques por-comité built-in: como tienen la misma
   especificidad, los built-in (más abajo) redefinen estas vars y GANAN por orden de fuente → su diseño no
   cambia; solo los dinámicos (sin bloque propio) heredan estas derivadas. color-mix soportado en los
   navegadores objetivo (verificado en vivo). */
body.seccion-comite,body.admin-scope-comite{
  --sec-grad:linear-gradient(120deg, color-mix(in srgb,var(--sec-accent,#0e7490),#000 55%) 0%, color-mix(in srgb,var(--sec-accent,#0e7490),#000 18%) 58%, var(--sec-accent,#0e7490) 100%);
  --sec-nav:linear-gradient(180deg, color-mix(in srgb,var(--sec-accent,#0e7490),#000 58%), color-mix(in srgb,var(--sec-accent,#0e7490),#000 76%));
  --sec-accent-soft:color-mix(in srgb, var(--sec-accent,#0e7490) 22%, transparent);
  --sec-accent-border:color-mix(in srgb, var(--sec-accent,#0e7490) 58%, transparent);
}
body.admin-scope-jovenes,body.seccion-jovenes{
  --sec-grad:linear-gradient(120deg,#075985 0%,#0284c7 55%,#38bdf8 100%);
  --sec-nav:linear-gradient(180deg,#0c4a6e,#082f49);
  --sec-accent:#0ea5e9;--sec-accent-soft:rgba(14,165,233,0.22);--sec-accent-border:rgba(14,165,233,0.60);
}
/* [2026-06-24] Escuela Dominical: lila suave tirando a rosado (#b56fae, malva-orquídea). */
body.admin-scope-escuela,body.seccion-escuela{
  --sec-grad:linear-gradient(120deg,#7a4878 0%,#b56fae 55%,#e6b3de 100%);
  --sec-nav:linear-gradient(180deg,#5a3a5a,#43293f);
  --sec-accent:#b56fae;--sec-accent-soft:rgba(181,111,174,0.20);--sec-accent-border:rgba(181,111,174,0.58);
}
body.admin-scope-mujeres,body.seccion-mujeres{
  --sec-grad:linear-gradient(120deg,#9d174d 0%,#db2777 55%,#f472b6 100%);
  --sec-nav:linear-gradient(180deg,#831843,#5b1133);
  --sec-accent:#ec4899;--sec-accent-soft:rgba(236,72,153,0.18);--sec-accent-border:rgba(236,72,153,0.55);
}
body.admin-scope-misiones,body.seccion-misiones{
  --sec-grad:linear-gradient(120deg,#92400e 0%,#d97706 55%,#fbbf24 100%);
  --sec-nav:linear-gradient(180deg,#7c2d12,#451a03);
  --sec-accent:#f59e0b;--sec-accent-soft:rgba(245,158,11,0.20);--sec-accent-border:rgba(245,158,11,0.58);
}
body.admin-scope-alabanza,body.seccion-alabanza{
  --sec-grad:linear-gradient(120deg,#4c1d95 0%,#7c3aed 55%,#a78bfa 100%);
  --sec-nav:linear-gradient(180deg,#3b0764,#2e1065);
  --sec-accent:#8b5cf6;--sec-accent-soft:rgba(139,92,246,0.20);--sec-accent-border:rgba(139,92,246,0.58);
}
body.admin-scope-recepcion,body.seccion-recepcion{
  --sec-grad:linear-gradient(120deg,#065f46 0%,#059669 55%,#34d399 100%);
  --sec-nav:linear-gradient(180deg,#064e3b,#022c22);
  --sec-accent:#10b981;--sec-accent-soft:rgba(16,185,129,0.20);--sec-accent-border:rgba(16,185,129,0.58);
}
body.admin-scope-comunicaciones,body.seccion-comunicaciones{
  --sec-grad:linear-gradient(120deg,#3730a3 0%,#4f46e5 55%,#818cf8 100%);
  --sec-nav:linear-gradient(180deg,#312e81,#1e1b4b);
  --sec-accent:#6366f1;--sec-accent-soft:rgba(99,102,241,0.20);--sec-accent-border:rgba(99,102,241,0.58);
}
body.admin-scope-obrasocial,body.seccion-obrasocial{
  --sec-grad:linear-gradient(120deg,#9f1239 0%,#e11d48 55%,#fb7185 100%);
  --sec-nav:linear-gradient(180deg,#881337,#4c0519);
  --sec-accent:#f43f5e;--sec-accent-soft:rgba(244,63,94,0.18);--sec-accent-border:rgba(244,63,94,0.55);
}
body.admin-scope-intercesion,body.seccion-intercesion{
  --sec-grad:linear-gradient(120deg,#115e59 0%,#0d9488 55%,#5eead4 100%);
  --sec-nav:linear-gradient(180deg,#134e4a,#042f2e);
  --sec-accent:#0d9488;--sec-accent-soft:rgba(13,148,136,0.20);--sec-accent-border:rgba(13,148,136,0.58);
}
body.admin-scope-mantenimiento,body.seccion-mantenimiento{
  --sec-grad:linear-gradient(120deg,#334155 0%,#475569 55%,#94a3b8 100%);
  --sec-nav:linear-gradient(180deg,#1e293b,#0f172a);
  --sec-accent:#64748b;--sec-accent-soft:rgba(100,116,139,0.22);--sec-accent-border:rgba(100,116,139,0.60);
}
body.admin-scope-limpieza,body.seccion-limpieza{
  --sec-grad:linear-gradient(120deg,#15803d 0%,#22c55e 55%,#86efac 100%);
  --sec-nav:linear-gradient(180deg,#166534,#052e16);
  --sec-accent:#22c55e;--sec-accent-soft:rgba(34,197,94,0.20);--sec-accent-border:rgba(34,197,94,0.58);
}
/* [2026-06-17] Comités SIN Finanzas/Informes (p.ej. Recepción & Protocolo): ocultamos esas
   pestañas del nav de comité. applyAdminScope pone sec-sin-finanzas/sec-sin-informes en el body
   según los flags del comité; el salto a pestaña por defecto ya cae en la primera VISIBLE. */
body.sec-sin-finanzas .app-nav-comite .ntab.comite-tab-finanzas{display:none !important;}
body.sec-sin-informes .app-nav-comite .ntab.comite-tab-informes{display:none !important;}
/* [2026-06-17] Finanzas simplificada (Obra Social): oculta el panel de Actividades y revela el
   panel de Canastas de ayuda (oculto por defecto en el resto de comités / HdV). */
body.fin-sin-actividades #fin-panel-actividades{display:none !important;}
/* [2026-06-18] Canasta = pestaña admin propia (#t-canasta), ya no dentro de Finanzas. El botón
   "Canasta" del nav de comité SOLO en Obra Social; y Obra Social NO usa la pestaña Registro/Cultos. */
body.admin-scope-comite:not(.admin-scope-obrasocial) .app-nav-comite .ntab.comite-tab-canasta{display:none !important;}
body.admin-scope-obrasocial #comite-ntab-cultos{display:none !important;}
/* [2026-06-21] Obra Social NO usa la pestaña Finanzas (no tiene sentido): su gestión es la Canasta. */
body.admin-scope-obrasocial .app-nav-comite .ntab.comite-tab-finanzas{display:none !important;}
/* [2026-06-17] Pestaña "Canasta" (solo lectura) en la vista de miembro: SOLO en el comité de
   Obra Social. Oculta por defecto (inline) y revelada por su sección. */
body.seccion-obrasocial #pvtab-canasta-btn{display:flex !important;}
/* [2026-06-18] Pestaña "Cronograma" (solo lectura) en la vista de miembro: comités con programación. */
body.seccion-alabanza #pvtab-cronograma-btn,
body.seccion-recepcion #pvtab-cronograma-btn,
body.seccion-comunicaciones #pvtab-cronograma-btn,
body.seccion-intercesion #pvtab-cronograma-btn,
body.seccion-mantenimiento #pvtab-cronograma-btn,
body.seccion-limpieza #pvtab-cronograma-btn,
/* [2026-07-04] Comités a medida: clase genérica para los DINÁMICOS con Cronograma (no tienen CSS por-clave). */
body.seccion-crono #pvtab-cronograma-btn{display:flex !important;}
/* [2026-06-17] Junta Local (lobby): rota el chevron (▼) al abrir el desplegable. */
#lobby-junta details[open] .lobby-junta-chev{transform:rotate(180deg);}
/* [2026-06-26] Iconos de acción (Llamar/WhatsApp) de la Junta: pulsables, con feedback
   al tocar. El SVG lleva pointer-events:none inline para que el toque caiga en el <a>. */
.junta-act{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease;}
.junta-act:active{transform:scale(.9);opacity:.9;}
.junta-act:hover{filter:brightness(1.04);}
/* (El tema de Escuela Dominical —malva #b56fae, sombra #7a4878— se define arriba, junto a jóvenes/mujeres.) */
/* Admin del comité (genérico) usa las variables. */
body.admin-scope-comite .app-header{background:var(--sec-grad);border-bottom-color:var(--sec-accent-border);}
body.admin-scope-comite .app-nav.app-nav-comite{display:flex;}
.app-nav.app-nav-comite{background:var(--sec-nav);border-bottom-color:var(--sec-accent-border);}
.app-nav-comite .ntab{color:rgba(255,255,255,0.80);background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
.app-nav-comite .ntab.active{background:var(--sec-accent-soft);border-color:var(--sec-accent-border);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.22);}

/* Vista personal del comité (genérica): solo "Listado" + Comunidad, marca propia y recoloreo. */
.h-title-seccion{display:none;}
#pvtab-secmiembros-btn{display:none;}
body.seccion-comite .hbrand .h-title-seccion{display:block;}
body.seccion-comite .hbrand .h-title:not(.h-title-seccion){display:none;}
body.seccion-comite #pvtab-secmiembros-btn{display:flex;}
/* [2026-06-15] HdV también muestra la pestaña Listado (como "👥 Miembros", entre Inicio y
   Comunidad). Se mantiene oculta en modo función del lobby (iglesia-feature). La regla del
   comité (arriba) sigue aplicando en su contexto. */
body:not(.seccion-comite):not(.iglesia-feature) #pvtab-secmiembros-btn{display:flex;}
/* En un comité NO hay Inicio: se oculta su pestaña y el chrome de HdV no aplicable. */
body.seccion-comite #pvtab-perfil-btn,
body.seccion-comite #pv-btn-grupos,
body.seccion-comite #pv-btn-hdv-admin,
body.seccion-comite #pvtab-finanzas-btn{display:none !important;}
/* [2026-06-14] La pestaña Comunidad del comité debe verla TODO integrante (sea caballero o no).
   render.js oculta a los invitados TANTO el botón de nav (#pvtab-sod-btn) COMO el cuerpo de la
   pestaña (#pvtab-sod) con display:none inline (la SOD de HdV es solo-caballeros). En modo comité
   se FUERZAN visibles (CSS !important gana al inline); el cuerpo solo cuando está activo. */
body.seccion-comite #pvtab-sod-btn{display:flex !important;}
body.seccion-comite #pvtab-sod.pv-tab.active{display:block !important;}
body.seccion-comite #screen-personal .app-header{background:var(--sec-grad);border-bottom-color:var(--sec-accent-border);}
body.seccion-comite #screen-personal .pv-nav{background:var(--sec-nav);}
/* [2026-06-14] En un comité las dos pestañas visibles (Listado + Comunidad) son claras; el fondo
   del scroll pasa a claro para que, si la lista es corta, NO asome el fondo oscuro por abajo. */
body.seccion-comite #screen-personal{background:var(--off);}
body.seccion-comite #pvtab-secmiembros.pv-tab.active{min-height:100%;}
/* Pestaña activa: SIEMPRE texto blanco (legible sobre el nav oscuro); el color del comité va en
   la "pastilla" (fondo/borde), no en la letra. */
body.seccion-comite .pv-ntab.active{
  background:linear-gradient(135deg,var(--sec-accent-soft),rgba(255,255,255,0.06));
  border-color:var(--sec-accent-border);color:#fff;
}
body.seccion-comite .pv-ntab.active .pv-ntab-ico,
body.seccion-comite .pv-ntab.active .pv-ntab-txt{color:#fff;}

/* ── TAB CONTENT ── */
.tab{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;}
.tab.active{display:block;}
/* Rendimiento: tabs admin ocultas sin layout/paint */
.tab:not(.active){content-visibility:hidden;contain-intrinsic-size:auto 500px;}
#screen-admin{background:var(--dark);}
#screen-admin > .tab.active{background:var(--off);}
.pg{padding:16px;}

/* ── BANNER INSTALAR APP (inicio) ── */
.install-app-banner{margin-bottom:16px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-pro);border:1px solid var(--border);}
.install-app-banner-inner{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:linear-gradient(135deg,var(--teal-bg) 0%,#e0f7fa 100%);position:relative;}
.install-app-banner-ico{font-size:24px;flex-shrink:0;line-height:1;}
.install-app-banner-txt{flex:1;min-width:0;}
.install-app-banner-title{display:block;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:var(--teal2);margin-bottom:6px;}
.install-app-banner-steps{font-size:12px;color:var(--text2);line-height:1.45;margin:0;}
.install-app-banner-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border:none;background:rgba(0,0,0,0.06);border-radius:50%;font-size:20px;line-height:1;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;}
.install-app-banner-close:hover{background:rgba(0,0,0,0.1);color:var(--text);}

.sec-ttl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:var(--dark);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.sec-ttl .tag{font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:20px;background:var(--teal-bg);color:var(--teal2);border:1px solid var(--border);}

/* ── EVIDENCIAS LOGO IN DASHBOARD ── */
.ev-banner{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 60%,var(--teal3) 100%);
  border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;
  border:1px solid rgba(58,171,186,0.25);box-shadow:var(--shadow2);position:relative;overflow:hidden;
}
.ev-banner::before{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(245,197,24,0.12) 0%,transparent 70%);}
.ev-logo-box{flex-shrink:0;}
.ev-vine{position:relative;width:56px;height:56px;}
/* SVG evidencias vine inline */
.ev-text{flex:1;}
.ev-name{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:900;color:var(--gold);letter-spacing:2px;text-transform:uppercase;line-height:1;}
.ev-ref{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.4);text-transform:uppercase;margin-top:3px;}
.ev-lema{font-family:'Caveat',cursive;font-size:15px;color:var(--teal);margin-top:4px;}

/* ── CARRUSEL DE BANNERS (inicio) ── unifica versículo, cumpleaños, evidencias,
   próximo evento, grupo WhatsApp y anuncios del admin en un único banner deslizable. */
.hdv-carousel{position:relative;margin-bottom:14px;}
.hdv-carousel-track{
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;            /* Firefox */
  height:auto;transition:height .3s ease;
  border-radius:var(--radius-lg);
}
.hdv-carousel-track::-webkit-scrollbar{display:none;}   /* WebKit */
.hdv-carousel-slide{
  flex:0 0 100%;width:100%;min-width:100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  align-self:flex-start;
  height:144px;                          /* TAMAÑO ESTÁNDAR (≈ banner de cumpleaños) */
}
.hdv-carousel-slide.hdv-slide-empty{display:none !important;}
/* el contenido del slide ocupa todo el ancho y la altura estándar, sin márgenes propios */
.hdv-carousel-slide > *{width:100%;height:100%;margin:0 !important;}

/* ── Tarjeta estándar unificada (todos los banners del mismo tamaño) ── */
.hdv-bcard{
  height:100%;box-sizing:border-box;border-radius:var(--radius-lg);padding:15px 18px 15px 22px;
  color:#fff;display:flex;flex-direction:column;justify-content:center;gap:3px;
  position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,0.28);
}
.hdv-bcard.click{cursor:pointer;transition:transform .16s ease, box-shadow .16s ease;}
/* Banners del carrusel clicables (banners.js): lift + sombra más profunda. El box-shadow base va en
   .hdv-bcard (clase, no inline) → no necesita !important; solo el background va inline. Solo con puntero. */
@media (hover:hover){ .hdv-bcard.click:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,23,42,0.34);} }
.hdv-bcard.click:active{transform:scale(.995);}
@media (prefers-reduced-motion: reduce){ .hdv-bcard.click{transition:none;} .hdv-bcard.click:hover,.hdv-bcard.click:active{transform:none;} }
.hdv-bcard-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.72);margin-bottom:2px;}
.hdv-bcard-label.right{text-align:right;}
.hdv-bcard-title{font-family:'Montserrat',sans-serif;font-size:15.5px;font-weight:800;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hdv-bcard-sub{font-size:11.5px;font-weight:700;color:rgba(255,255,255,0.82);}
.hdv-bcard-body{font-size:12px;line-height:1.45;color:rgba(255,255,255,0.9);margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hdv-bcard-body.clamp3{-webkit-line-clamp:3;}
.hdv-bcard-foot{position:absolute;right:15px;bottom:9px;font-size:9.5px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,0.62);}
.hdv-bcard-badge{position:absolute;top:12px;right:14px;z-index:1;font-family:'Montserrat',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.8px;padding:3px 8px;border-radius:10px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.hdv-bcard-deco{position:absolute;top:-28px;right:-28px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none;}
/* Encajar los banners EXISTENTES a la altura estándar (sin reescribirlos) */
.hdv-carousel-slide .ev-banner{height:100%;margin:0;border-radius:var(--radius-lg);}
/* Ajuste por CLASE (no por id): el clon del carrusel pierde el id y, si el
   selector fuera #pv-wa-grupo-wrap, el banner de WhatsApp clonado se veía con su
   tamaño original (recortado). La clase sí sobrevive al clonado. */
.hdv-carousel-slide .wa-grupo-fit{height:100%;margin:0 !important;}
.hdv-carousel-slide .wa-grupo-fit > a{display:block;height:100%;}
.hdv-carousel-slide .wa-grupo-fit > a > div{height:100%;box-sizing:border-box;}
.hdv-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:9px;}
.hdv-carousel-dot{
  width:7px;height:7px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:rgba(58,171,186,0.28);transition:width .25s ease,background-color .25s ease;
}
.hdv-carousel-dot.active{background:var(--teal);width:20px;border-radius:4px;}
.hdv-carousel-hint{
  position:absolute;right:7px;bottom:38px;z-index:2;
  display:flex;align-items:center;gap:2px;pointer-events:none;
  font-family:'Montserrat',sans-serif;font-size:7.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.92);background:rgba(15,23,42,0.62);
  padding:2px 6px;border-radius:20px;animation:hdv-hint-pulse 1.7s ease-in-out 12;
}
.hdv-carousel-hint span{display:inline-block;animation:hdv-hint-arrow 1.7s ease-in-out 12;}
@keyframes hdv-hint-pulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes hdv-hint-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){
  .hdv-carousel-track{scroll-behavior:auto;transition:none;}
  .hdv-carousel-hint,.hdv-carousel-hint span{animation:none;}
}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
.stat-card{background:white;border:1px solid rgba(30,41,59,0.08);border-radius:var(--radius-lg);padding:18px 14px;text-align:center;box-shadow:var(--shadow-pro);transition:border-color .2s;contain:layout style;}
.stat-click{cursor:pointer;}
.stat-click:hover{border-color:var(--teal);box-shadow:var(--shadow-pro-hover);}
.stat-num{font-family:'Montserrat',sans-serif;font-size:30px;font-weight:900;color:var(--teal);}
.stat-lbl{font-size:11px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-top:3px;font-weight:700;}
.stat-card.gold .stat-num{color:var(--gold2);}

/* ── DASH FILTER ROW removed ──*/

/* ── CAB CARD ── */
.card-list{display:flex;flex-direction:column;gap:8px;}
.cab-card{background:white;border:1px solid rgba(30,41,59,0.08);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-pro);contain:layout style;}
.cab-card:hover,.cab-card:active{border-color:var(--teal);box-shadow:var(--shadow-pro-hover);}
/* [2026-07-04 diseño] Interacción CONSISTENTE en tarjetas clicables. Estas tenían la transición definida pero
   SIN estado :hover (no hacían nada) o ninguno; ahora usan el mismo lift+sombra que .cab-card/.gr-card-pv.
   Hover solo con puntero (no deja estados pegados en táctil); :active da feedback al pulsar en móvil. */
@media (hover:hover){
  .lobby-sec-card:hover,.iglesia-sec-card:hover,.cl-card:hover,.can-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pro-hover);}
}
.lobby-sec-card:active,.iglesia-sec-card:active,.cl-card:active,.can-card:active,.cab-card:active,.gr-card-pv:active{transform:scale(.99);}
@media (prefers-reduced-motion: reduce){
  .lobby-sec-card:hover,.iglesia-sec-card:hover,.cl-card:hover,.can-card:hover,
  .lobby-sec-card:active,.iglesia-sec-card:active,.cl-card:active,.can-card:active,.cab-card:active,.gr-card-pv:active{transform:none;}
}
/* Tarjetas de la agenda de Eventos (app.eventos.js): clicables pero inline-styled → mismo lift+sombra.
   box-shadow con !important porque la sombra base va inline; el transform es libre. */
.ev-agenda-card{transition:transform .16s ease, box-shadow .16s ease;}
@media (hover:hover){ .ev-agenda-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pro-hover)!important;} }
.ev-agenda-card:active{transform:scale(.99);}
@media (prefers-reduced-motion: reduce){ .ev-agenda-card{transition:none;} .ev-agenda-card:hover,.ev-agenda-card:active{transform:none;} }
/* Libro contable (finanzas-libro.js): filas inline-styled sin CSS propio.
   Hover sutil en filas de movimiento (tabla densa → escaneo) y feedback en la cabecera de fecha clicable
   (filter, porque su fondo va inline). Solo con puntero; sin cambios de layout. */
tr.lib-mov-row{transition:background .12s ease;}
tr.lib-date-hdr{transition:filter .12s ease;}
@media (hover:hover){
  tr.lib-mov-row:hover{background:#f1f5f9;}
  tr.lib-date-hdr:hover{filter:brightness(0.97);}
}
@media (prefers-reduced-motion: reduce){ tr.lib-mov-row,tr.lib-date-hdr{transition:none;} }
/* Listado de miembros (super-miembros.js): el área de nombre es lo clicable (abre la ficha) pero no tenía
   feedback. Al pasar el puntero, el nombre vira a teal + subrayado → señal de "click para ver ficha".
   !important porque el color del nombre va inline; sin cambios de layout. */
.sm-nameclick > div:first-child{transition:color .12s ease;}
@media (hover:hover){ .sm-nameclick:hover > div:first-child{color:var(--teal3)!important;text-decoration:underline;text-underline-offset:2px;} }
/* Estudios (study-detail.js): tarjetas de material y de evaluación son clicables enteras e inline-styled
   → mismo lift+sombra que el resto (box-shadow con !important porque la sombra base va inline; transform libre).
   La cabecera de grupo expandible usa filter (su fondo va inline). Solo con puntero. */
.std-clickcard{transition:transform .16s ease, box-shadow .16s ease;}
@media (hover:hover){ .std-clickcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-pro-hover)!important;} }
.std-clickcard:active{transform:scale(.99);}
.std-grouptoggle{transition:filter .12s ease;}
@media (hover:hover){ .std-grouptoggle:hover{filter:brightness(0.97);} }
@media (prefers-reduced-motion: reduce){ .std-clickcard,.std-grouptoggle{transition:none;} .std-clickcard:hover,.std-clickcard:active{transform:none;} }
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal-bg),var(--teal));display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:white;flex-shrink:0;overflow:hidden;border:2px solid var(--border2);}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.cab-inf{flex:1;min-width:0;}
.cab-nm{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cab-mt{font-size:11px;color:var(--text3);margin-top:2px;}
.cab-scores{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
.cab-sc{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:900;color:var(--teal);}
.cab-eval{font-size:11px;font-weight:700;color:var(--text3);}

/* ── BADGES ── */
.badges{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px;}
.bdg{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.bdg.bautizado{background:#dbeafe;color:#1d4ed8;}
.bdg.sellado{background:#ede9fe;color:#6d28d9;}
.bdg.servidor{background:#dcfce7;color:#15803d;}
.bdg.directivo{background:#fef3c7;color:#b45309;}
.bdg.predicador{background:#fee2e2;color:#b91c1c;}
.bdg.evangelista{background:#fff7ed;color:#c2410c;}
.bdg.devoto{background:#ecfdf5;color:#065f46;}

/* ── SEARCH / CHIPS ── */
.search-wrap{position:relative;margin-bottom:10px;}
.search-wrap input{width:100%;padding:10px 14px 10px 38px;background:white;border:1.5px solid #e9edf2;border-radius:10px;color:var(--text);font-size:14px;outline:none;font-family:'Lato',sans-serif;transition:border-color .2s;}
.search-wrap input:focus{border-color:var(--teal);}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);}
.chips-row{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:10px;padding-bottom:2px;}
.chips-row::-webkit-scrollbar{display:none;}
.chip{padding:5px 12px;border:1.5px solid #e9edf2;border-radius:20px;font-size:11px;font-weight:700;color:var(--text3);cursor:pointer;white-space:nowrap;background:white;transition:background-color .15s ease, border-color .15s ease, color .15s ease;font-family:'Montserrat',sans-serif;flex-shrink:0;}
.chip.active{background:var(--teal-bg);border-color:var(--teal);color:var(--teal2);}
.chip.chip-grupo:hover{transform:translateY(-2px);opacity:0.95;}
.chip.chip-todos.active{background:var(--teal-bg);border-color:var(--teal);color:var(--teal2);}
.select-grupo{font-family:'Montserrat',sans-serif !important;font-weight:700 !important;letter-spacing:0.5px !important;padding:12px 16px !important;border-radius:12px !important;border:2px solid #e2e8f0 !important;background:linear-gradient(180deg,#fafbfc 0%,#f8fafc 100%) !important;box-shadow:0 2px 8px rgba(0,0,0,0.04) !important;cursor:pointer !important;transition:border-color .2s,box-shadow .2s !important;}
.select-grupo:hover{border-color:var(--teal) !important;box-shadow:0 4px 14px rgba(58,171,186,0.15) !important;}
.select-grupo:focus{border-color:var(--teal) !important;box-shadow:0 0 0 3px rgba(58,171,186,0.2) !important;outline:none !important;}
.estudios-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(58,171,186,0.2);
  background:linear-gradient(180deg,rgba(240,253,250,0.9) 0%,rgba(255,255,255,0.96) 100%);
}
/* Mismo espaciado entre desplegable y primera tarjeta/año que entre tarjetas */
.estudios-toolbar + .cl-card--estudio,
.estudios-toolbar + .cl-year-ttl{
  margin-top:18px;
}
.estudios-toolbar--general{
  border-color:rgba(58,171,186,0.24);
  background:linear-gradient(180deg,rgba(236,253,250,0.95) 0%,rgba(255,255,255,0.98) 100%);
}
.estudios-toolbar--unicidad{
  border-color:rgba(153,27,27,0.22);
  background:linear-gradient(180deg,rgba(253,245,242,0.96) 0%,rgba(255,255,255,0.98) 100%);
}
.estudios-toolbar--articulos-fe{
  border-color:rgba(139,94,60,0.24);
  background:linear-gradient(180deg,rgba(253,248,240,0.95) 0%,rgba(255,255,255,0.98) 100%);
}
.estudios-toolbar--general .select-grupo{
  border-color:rgba(58,171,186,0.38) !important;
  background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%) !important;
  box-shadow:0 2px 10px rgba(58,171,186,0.12) !important;
}
.estudios-toolbar--general .select-grupo:hover{
  border-color:var(--teal) !important;
  box-shadow:0 4px 14px rgba(58,171,186,0.18) !important;
}
.estudios-toolbar--general .select-grupo:focus{
  border-color:var(--teal) !important;
  box-shadow:0 0 0 3px rgba(58,171,186,0.2) !important;
}
.estudios-toolbar--unicidad .select-grupo{
  border-color:rgba(153,27,27,0.4) !important;
  background:linear-gradient(180deg,#fff7f5 0%,#ffffff 100%) !important;
  box-shadow:0 2px 10px rgba(127,29,29,0.12) !important;
}
.estudios-toolbar--unicidad .select-grupo:hover{
  border-color:#991b1b !important;
  box-shadow:0 4px 14px rgba(127,29,29,0.18) !important;
}
.estudios-toolbar--unicidad .select-grupo:focus{
  border-color:#991b1b !important;
  box-shadow:0 0 0 3px rgba(153,27,27,0.2) !important;
}
.pv-lista--articulos-fe .estudios-toolbar--articulos-fe .select-grupo{
  border-color:rgba(139,94,60,0.42) !important;
  background:linear-gradient(180deg,#fdf8f0 0%,#f5ead8 100%) !important;
  box-shadow:0 2px 10px rgba(107,66,38,0.12) !important;
}
.pv-lista--articulos-fe .estudios-toolbar--articulos-fe .select-grupo:hover{
  border-color:#8b5e3c !important;
  box-shadow:0 4px 14px rgba(107,66,38,0.18) !important;
}
.pv-lista--articulos-fe .estudios-toolbar--articulos-fe .select-grupo:focus{
  border-color:#8b5e3c !important;
  box-shadow:0 0 0 3px rgba(139,94,60,0.2) !important;
}
.gr-card.gr-card-pro:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.gr-card-pv:hover{border-color:var(--teal);box-shadow:0 8px 28px rgba(58,171,186,0.12);transform:translateY(-2px);}
/* Badge filter chips */
.chip.bdg-filter.active{background:var(--gold-bg);border-color:var(--gold2);color:var(--gold2);}

/* ── CLASE CARD ── */
.cl-card{background:white;border:1px solid rgba(30,41,59,0.08);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-pro);margin-bottom:10px;contain:layout style;}
.cl-card:hover{border-color:var(--teal);box-shadow:var(--shadow-pro-hover);}
.cl-date{background:linear-gradient(135deg,var(--teal),var(--teal2));border-radius:10px;padding:8px 10px;text-align:center;flex-shrink:0;min-width:46px;}
.cl-day{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:900;color:white;line-height:1;}
.cl-mon{font-size:10px;font-weight:700;color:rgba(255,255,255,0.8);letter-spacing:1px;text-transform:uppercase;}
.cl-inf{flex:1;min-width:0;}
.cl-nm{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-mt{font-size:11px;color:var(--text3);margin-top:3px;}
.cl-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.cl-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:0.3px;}
.cl-realizada{background:#dcfce7;color:#15803d;}
.cl-proxima{background:#e0e7ff;color:#4338ca;}
.cl-calificada{background:#d1fae5;color:#047857;}
.cl-pendiente{background:#fef3c7;color:#b45309;}
.cl-year-ttl{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid #e5e7eb;}
.cl-year-ttl:first-child{margin-top:0;}
.cl-avg{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:900;}

/* Pestaña Estudio — barra de fecha a ancho completo; título en una línea; grupo / asistentes */
.cl-card--estudio{
  flex-direction:column;
  align-items:stretch;
  padding-top:0;
  overflow:visible;
  margin-bottom:18px;
}
.cl-estudio-date-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-15px -17px 4px -17px;
  padding:10px 16px 11px 14px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.3;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 6px 18px rgba(58,171,186,0.22);
}
.cl-estudio-date-bar--proximo{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  box-shadow:0 6px 18px rgba(245,158,11,0.3);
}
.cl-estudio-date-bar-ico{
  flex-shrink:0;
  font-size:14px;
  line-height:1;
  opacity:0.95;
}
.cl-estudio-date-bar-txt{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:900;
  letter-spacing:0.01em;
}
.cl-estudio-next-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.cl-estudio-body{
  display:flex;
  align-items:flex-start;
  gap:8px;
  width:100%;
  min-width:0;
}
.cl-inf--estudio{
  flex:1;
  min-width:0;
  width:auto;
  padding-top:0;
}
.cl-estudio-kicker{
  margin:0 0 4px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#0f766e;
}
.cl-estudio-title{
  margin:0;
  padding:0;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(12px,3.5vw,15px);
  font-weight:800;
  color:var(--dark);
  line-height:1.25;
  letter-spacing:-0.02em;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.cl-estudio-eval{
  font-size:11px;
  font-weight:700;
  margin-top:0;
  line-height:1.35;
}
.cl-estudio-eval--warn{
  color:#b45309;
}
.cl-estudio-eval--ok{
  color:#047857;
}
.cl-estudio-notif-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.cl-estudio-chip{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.02em;
  line-height:1;
  border-radius:999px;
  padding:5px 8px;
  border:1px solid transparent;
}
.cl-estudio-chip--material{
  color:#0f766e;
  background:#ccfbf1;
  border-color:#5eead4;
}
.cl-estudio-chip--eval{
  color:#7c2d12;
  background:#ffedd5;
  border-color:#fdba74;
}
.cl-card--estudio-has-notif{
  border-color:#f59e0b;
  box-shadow:0 0 0 1px rgba(245,158,11,0.25),0 8px 22px rgba(245,158,11,0.18);
}
.cl-card--estudio-material-only{
  border:1px solid #99f6e4;
  box-shadow:0 0 0 1px rgba(45,212,191,0.22),0 10px 24px rgba(13,148,136,0.14);
  background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 62%);
  cursor:pointer;
}
/* [Estudios 2026-06-12] Banner colapsado: la tarjeta es SOLO la barra de título + puntaje
   (material/evaluación/ranking se ven al tocarla → openEstudioDetallePV). La barra llena la
   tarjeta y las esquinas se redondean por recorte; el borde/sombra de la tarjeta hacen de marco.
   Se comporta como un BOTÓN: realce al pasar/posar y hundimiento al pulsar (feedback táctil). */
.cl-card--estudio-solo-banner{padding:0;overflow:hidden;margin-bottom:12px;border-radius:15px;transition:transform .13s ease,box-shadow .13s ease;-webkit-tap-highlight-color:transparent;}
.cl-card--estudio-solo-banner:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(45,212,191,0.30),0 12px 26px rgba(13,148,136,0.20);}
.cl-card--estudio-solo-banner:active{transform:scale(.978) translateY(0);box-shadow:0 0 0 1px rgba(45,212,191,0.24),0 4px 12px rgba(13,148,136,0.16);}
.cl-card--estudio-solo-banner .cl-estudio-date-bar{margin:0;border-radius:0;padding-top:14px;padding-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);}
/* Título menos grueso (era 900, “muy negrilla”) + chevron que invita a entrar. */
.cl-card--estudio-solo-banner .cl-estudio-date-bar-txt{font-weight:700;font-size:12.5px;letter-spacing:.2px;}
.cl-card--estudio-solo-banner .cl-estudio-date-bar::after{content:"\203A";flex:0 0 auto;margin-left:3px;font-size:19px;font-weight:700;line-height:1;opacity:.72;}
.cl-estudio-date-bar--material-only{
  background:linear-gradient(135deg,#0d9488,#0f766e);
  box-shadow:0 6px 18px rgba(15,118,110,0.28);
  margin-bottom:0;
  padding-top:10px;
  padding-bottom:10px;
  font-size:11px;
  white-space:normal;
  line-height:1.3;
}
.cl-estudio-body--material-only{
  padding-top:8px;
  padding-bottom:10px;
}
.cl-estudio-title--material-only{
  white-space:normal;
  overflow:visible;
  font-size:clamp(14px,3.8vw,16px);
  line-height:1.28;
}
.cl-avg--estudio{
  flex-shrink:0;
  align-self:flex-start;
  margin-top:14px;
  line-height:1;
}
.cl-estudio-stack{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  grid-template-rows:auto;
  column-gap:9px;
  row-gap:0;
  align-items:start;
  width:100%;
  min-width:0;
  margin-top:4px;
  padding-top:0;
  border-top:none;
  box-sizing:border-box;
}

/* ── Unicidad de Dios – tema vino / rojo / marrón ── */
.cl-estudio-date-bar--unicidad{background:linear-gradient(135deg,#991b1b,#7f1d1d);box-shadow:0 6px 18px rgba(127,29,29,0.32);}
.cl-estudio-date-bar--unicidad-proximo{background:linear-gradient(135deg,#b91c1c,#991b1b);box-shadow:0 6px 18px rgba(185,28,28,0.38);}
.cl-estudio-date-bar--unicidad-material{background:linear-gradient(135deg,#7f1d1d,#92400e);box-shadow:0 6px 18px rgba(127,29,29,0.3);margin-bottom:0;padding-top:10px;padding-bottom:10px;font-size:11px;white-space:normal;line-height:1.3;}
.cl-card--estudio-material-only--unicidad{border-color:rgba(153,27,27,0.35);box-shadow:0 0 0 1px rgba(185,28,28,0.14),0 12px 28px rgba(92,64,50,0.14);background:linear-gradient(180deg,#fdf4f2 0%,#ffffff 68%);}
.cl-card--estudio--unicidad{border-color:rgba(114,47,55,0.28);background:linear-gradient(165deg,#fdf5f2 0%,#faf0eb 40%,#ffffff 85%);box-shadow:0 2px 14px rgba(92,64,50,0.09);}
.cl-card--estudio--unicidad:hover{border-color:rgba(153,27,27,0.55);box-shadow:0 4px 18px rgba(127,29,29,0.16);}
.cl-card--estudio--unicidad .cl-estudio-title{color:#3f2e26;}
.cl-card--estudio--unicidad .cl-estudio-stack{
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(114,47,55,0.07) 0%,rgba(146,64,14,0.05) 100%);
  border:1px solid rgba(153,27,27,0.14);
  box-sizing:border-box;
}
.cl-card--estudio--unicidad .cl-estudio-grupo-placeholder{color:#92400e;font-weight:700;}
.cl-card--estudio-material-only--unicidad .cl-estudio-title--material-only{color:#4a3728;}
.cl-estudio-kicker--unicidad{color:#991b1b;}
.pv-lista--unicidad .cl-year-ttl{color:#7f1d1d;border-bottom:none;padding-bottom:0;}
/* Modal sheet — Unicidad (cabecera clara tipo estudios por defecto; acentos marrón / vinotinto) */
.sheet.sheet--unicidad{background:#fffbf9;}
.sheet.sheet--unicidad .sh-handle{background:rgba(114,47,55,0.18);}
.sheet.sheet--unicidad .sh-head{
  border-bottom:1px solid rgba(92,64,50,0.12);
  background:linear-gradient(180deg,#fffdfb 0%,#fff7f2 100%);
  box-shadow:none;
}
.sheet.sheet--unicidad .sh-ttl{color:#4a3728;}
.sheet.sheet--unicidad .sh-sub{color:#7c665a;}
.sheet.sheet--unicidad .sh-close{color:#6b5d54;}
.sheet.sheet--unicidad .sh-av{
  border-color:rgba(153,27,27,0.22);
  background:linear-gradient(145deg,#fde8e8,#f5e6dc);
  box-shadow:0 1px 6px rgba(127,29,29,0.12);
}
.sheet.sheet--unicidad .sh-body{background:#fffbf9;}
/* Tarjeta estudio sin fecha: sin barra superior; el bloque de título usa el padding estándar de la tarjeta */
.cl-card--estudio--no-fecha{padding-top:14px;}
.cl-card--estudio--no-fecha .cl-estudio-kicker{margin-top:0;}
/* Unicidad – estado de evaluación */
.cl-estudio-eval--warn-unicidad{color:#991b1b !important;}
.cl-estudio-eval--ok-unicidad{color:#6b4c3b !important;}
/* Unicidad – chips/botones usan color de grupo vía estilos inline (GCOL); fondo de tarjeta mantiene marrón/vino */
/* Unicidad – borde notificación */
.cl-card--estudio-material-only--unicidad.cl-card--estudio-has-notif,
.cl-card--estudio--unicidad.cl-card--estudio-has-notif{border-color:#b91c1c;box-shadow:0 0 0 1px rgba(185,28,28,0.25),0 8px 22px rgba(127,29,29,0.18);}

/* Artículos de Fe — tema sepia */
.cl-estudio-date-bar--articulos-fe{background:linear-gradient(135deg,#8b5e3c,#6b4226);box-shadow:0 6px 18px rgba(107,66,38,0.32);}
.cl-estudio-date-bar--articulos-fe-proximo{background:linear-gradient(135deg,#a0722a,#6b4226);box-shadow:0 6px 18px rgba(160,114,42,0.38);}
.cl-estudio-date-bar--articulos-fe-material{background:linear-gradient(135deg,#6b4226,#a0722a);box-shadow:0 6px 18px rgba(107,66,38,0.3);margin-bottom:0;padding-top:10px;padding-bottom:10px;font-size:11px;white-space:normal;line-height:1.3;}
.cl-card--estudio-material-only--articulos-fe{border-color:rgba(107,66,38,0.35);box-shadow:0 0 0 1px rgba(139,94,60,0.14),0 12px 28px rgba(107,66,38,0.14);background:linear-gradient(180deg,#fdf5e8 0%,#ffffff 68%);}
.cl-card--estudio--articulos-fe{border-color:rgba(107,66,38,0.28);background:linear-gradient(165deg,#fdf8f0 0%,#f5ead8 40%,#ffffff 85%);box-shadow:0 2px 14px rgba(107,66,38,0.09);}
.cl-card--estudio--articulos-fe:hover{border-color:rgba(107,66,38,0.55);box-shadow:0 4px 18px rgba(107,66,38,0.16);}
.cl-card--estudio--articulos-fe .cl-estudio-title{color:#4a3518;}
.cl-card--estudio--articulos-fe .cl-estudio-stack{margin-top:6px;padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(107,66,38,0.07) 0%,rgba(160,114,42,0.05) 100%);border:1px solid rgba(107,66,38,0.14);box-sizing:border-box;}
.cl-card--estudio--articulos-fe .cl-estudio-grupo-placeholder{color:#8b5e3c;font-weight:700;}
.cl-card--estudio-material-only--articulos-fe .cl-estudio-title--material-only{color:#4a3518;}
.cl-estudio-kicker--articulos-fe{color:#8b5e3c;}
.pv-lista--articulos-fe .cl-year-ttl{color:#6b4226;border-bottom:none;padding-bottom:0;}
.cl-card--estudio-material-only--articulos-fe.cl-card--estudio-has-notif,
.cl-card--estudio--articulos-fe.cl-card--estudio-has-notif{border-color:#8b5e3c;box-shadow:0 0 0 1px rgba(139,94,60,0.25),0 8px 22px rgba(107,66,38,0.18);}

.cl-estudio-stack-ico{
  grid-column:1;
  grid-row:1;
  font-size:13px;
  line-height:1.2;
  text-align:center;
  margin-top:2px;
  align-self:start;
}
.cl-estudio-grupo{
  grid-column:2;
  grid-row:1;
  min-width:0;
  font-size:clamp(11px,3.1vw,13px);
  font-weight:700;
  color:var(--text2);
  line-height:1.25;
  white-space:normal;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  margin-top:1px;
}
.cl-estudio-grupo-placeholder{
  font-weight:600;
  font-style:italic;
  color:var(--text3);
}
.cl-estudio-asis{
  grid-column:3;
  grid-row:1;
  min-width:0;
  font-size:clamp(10px,2.6vw,11px);
  font-weight:700;
  color:var(--teal2);
  letter-spacing:0.02em;
  line-height:1.2;
  white-space:nowrap;
  text-align:right;
}
.cl-estudio-status-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:7px;
}
.cl-estudio-status-line--solo{
  margin-top:6px;
}
.cl-badges--compact{
  margin-top:0;
}
.cl-estudio-proximo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.cl-material-disp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:32px;
  gap:6px;
  margin-top:10px;
  background:linear-gradient(135deg,#0e7490 0%,#0d9488 100%);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.3px;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(14,116,144,0.35);
  text-align:center;
  white-space:nowrap;
  max-width:calc(100% - 6px);
  margin-left:auto;
  margin-right:auto;
}
.cl-material-disp--flat{
  margin-top:10px;
  background:rgba(13,148,136,0.09);
  color:#0f766e;
  box-shadow:none;
  border:1px solid #5eead4;
}
.cl-material-btn{
  width:100%;
  cursor:pointer;
  font-family:inherit;
  border:1px solid #5eead4;
  min-height:34px;
  font-size:11px;
}
.cl-material-disp--flat.cl-material-btn{
  margin-top:6px;
}
.cl-material-btn--eval{
  background:rgba(59,130,246,0.1);
  border-color:#93c5fd;
  color:#1d4ed8;
  margin-top:6px;
}
.cl-material-btn--unicidad{
  background:rgba(153,27,27,0.09);
  border-color:#fca5a5;
  color:#991b1b;
}
.cl-material-btn--eval-unicidad{
  background:rgba(127,29,29,0.1);
  border-color:#fca5a5;
  color:#7f1d1d;
}

/* Pestaña ESTUDIOS: respiración visual del contenido */
#pv-estudio-lista{
  gap:12px !important;
}
.estudios-toolbar{
  margin-bottom:4px !important;
}
#pv-estudio-lista .cl-year-ttl{
  margin-top:6px;
  margin-bottom:8px;
}

/* ── GRUPO CARD ── */
.gr-card{background:white;border:1px solid rgba(30,41,59,0.08);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-pro);contain:layout style;}
.gr-card.gr-card-pro{border-radius:var(--radius-lg);padding:18px 20px;}
.gr-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px solid #f3f4f6;}
.gr-nm{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;}
.gr-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f9fafb;cursor:pointer;}
.gr-row:last-child{border:none;}
.gr-row:hover .gr-rname{color:var(--teal2);}
.gr-rname{font-size:13px;font-weight:600;transition:color .15s;}
.gr-rdist{font-size:10px;color:var(--text3);margin-left:6px;}
.gr-rsc{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:var(--teal);}

/* ── MODAL ── */
/* [2026-07-03] z-index 1400 (>.adm-window 1300): un sheet modal (openSheet) abierto DESDE una ventana
   de Secretaría/Directivas —p.ej. la lista del Censo— debe quedar POR ENCIMA de esa ventana, no detrás.
   Sigue por debajo de toasts (9999/10050) y del visor de alabanza (100000). */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1400;align-items:flex-end;}
.overlay.open{display:flex;}
/* will-change solo durante la animación del sheet para no consumir GPU en reposo */
.sheet{width:100%;max-height:96vh;background:white;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:up .28s cubic-bezier(.32,.72,0,1);box-shadow:0 -4px 24px rgba(0,0,0,0.12);transform:translate3d(0,0,0);}
.overlay.open .sheet{will-change:transform;}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* [2026-07-04 diseño] En pantallas anchas (escritorio/tablet) el sheet NO se estira a todo el ancho: se
   muestra como panel FLOTANTE centrado (esquinas redondeadas + sombra), en vez de barrido a ~1500px con el
   contenido disperso. Móvil (<760px) queda IGUAL (sheet a pantalla completa deslizando desde abajo). */
@media (min-width:760px){
  .overlay{justify-content:center;padding-bottom:26px;}
  .sheet{max-width:720px;max-height:92vh;border-radius:var(--radius-xl);box-shadow:0 16px 50px rgba(0,0,0,0.30);}
}
.sh-handle{width:36px;height:4px;background:#e5e7eb;border-radius:2px;margin:12px auto 0;}
.sh-head{padding:14px 18px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:12px;position:sticky;top:0;background:white;z-index:10;}
.sh-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal-bg),var(--teal));display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;color:white;flex-shrink:0;overflow:hidden;border:2px solid var(--border2);}
.sh-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* Cabecera compacta (openSheet {compact:true}): círculo más pequeño → la cabecera ocupa menos alto. */
.sheet.sheet--compact .sh-head{padding:9px 16px;gap:9px;}
.sheet.sheet--compact .sh-av{width:32px;height:32px;font-size:16px;border-width:1.5px;}
.sh-ttl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:var(--dark);flex:1;min-width:0;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sh-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.sh-close{background:none;border:none;color:var(--text3);font-size:26px;cursor:pointer;padding:2px;line-height:1;flex-shrink:0;}
.sh-body{padding:16px 18px 40px;}
/* Panel Mi Perfil — elegante, invitación a completar */
.perfil-panel{background:linear-gradient(180deg,#f8fafc 0%,#fff 12%);padding:0 0 24px;}
.perfil-panel .perfil-hero{background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 55%,var(--teal3) 100%);border-radius:18px;padding:22px 20px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(26,31,46,0.18);isolation:isolate;}
.perfil-panel .perfil-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(58,171,186,0.18) 0%,transparent 42%),radial-gradient(circle at 85% 20%,rgba(245,197,24,0.08) 0%,transparent 38%);pointer-events:none;z-index:0;}
.perfil-panel .perfil-hero > *{position:relative;z-index:1;}
.perfil-panel .perfil-hero .perfil-photo-wrap{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,0.42);box-shadow:0 4px 16px rgba(0,0,0,0.2);flex-shrink:0;background:transparent;position:relative;z-index:2;}
.perfil-panel .perfil-hero .perfil-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.perfil-panel .perfil-hero .perfil-photo-wrap div{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;color:rgba(255,255,255,0.8);}
.perfil-panel .perfil-hero-txt{color:white;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:0.5px;margin-bottom:4px;}
.perfil-panel .perfil-hero-sub{font-size:12px;color:rgba(255,255,255,0.75);}
.perfil-panel .perfil-block{background:white;border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-pro);border:1px solid rgba(30,41,59,0.08);}
.perfil-panel .perfil-block-title{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal2);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--teal-bg);display:flex;align-items:center;gap:8px;}
.perfil-panel .perfil-block-title::before{content:'';width:4px;height:14px;background:linear-gradient(180deg,var(--teal),var(--teal2));border-radius:2px;}
.perfil-panel .fr{margin-bottom:14px;}
.perfil-panel .fr:last-of-type{margin-bottom:0;}
.perfil-panel .fr label{font-size:11px;font-weight:700;letter-spacing:0.5px;color:var(--text2);margin-bottom:6px;display:block;}
.perfil-panel input[type="text"],.perfil-panel input[type="tel"],.perfil-panel input[type="number"],.perfil-panel input[type="date"],.perfil-panel input[type="password"],.perfil-panel select,.perfil-panel textarea{width:100%;padding:12px 14px;border:1.5px solid #e5e7eb;border-radius:12px;font-size:14px;font-family:'Lato',sans-serif;background:#fafbfc;transition:border-color .2s,box-shadow .2s,background .2s;}
.perfil-panel input:focus,.perfil-panel select:focus,.perfil-panel textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,171,186,0.15);background:white;}
.perfil-panel textarea{resize:vertical;min-height:80px;}
.perfil-panel .btn.bteal{background:linear-gradient(135deg,var(--teal),var(--teal2));color:white;border:none;padding:12px 24px;border-radius:12px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.5px;cursor:pointer;box-shadow:0 4px 16px rgba(58,171,186,0.35);transition:transform .2s,box-shadow .2s;}
.perfil-panel .btn.bteal:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(58,171,186,0.45);}
.perfil-panel .perfil-block .btn.bteal{width:100%;margin-top:8px;}
.perfil-panel .dsec{margin-top:20px;padding-top:18px;border-top:1px solid #eef1f5;background:transparent;}
.perfil-panel .dhead{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--teal2);margin-bottom:10px;}
.perfil-panel label[style*="cursor:pointer"]{font-size:13px;color:var(--text);}
/* [2026-07-04 diseño] Densidad de la ficha de perfil (openCabDetail): los campos label+valor pasan de un
   flex-wrap con anchos irregulares (disperso) a una GRID responsiva de columnas ALINEADAS. En móvil cae a
   1-2 columnas; en el sheet de escritorio (720px), 3-4. .dwide (p.ej. "Rol o roles", multilínea) ocupa la
   fila completa para no descuadrar la rejilla. */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px 20px;align-items:start;}
.dgrid > .dwide{grid-column:1 / -1;}
.dgrid > div > span:first-child{display:block;margin-bottom:2px;}

/* ── DETAIL SECTIONS ── */
.dsec{margin-bottom:20px;}
.dhead{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--teal2);font-weight:700;margin-bottom:10px;padding-bottom:5px;border-bottom:1.5px solid var(--border);}
.bw{margin-bottom:8px;}
.bl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;font-weight:600;}
.bl span:first-child{color:var(--text2);}
.bl span:last-child{color:var(--teal2);}
.bt{height:7px;background:#f0f2f5;border-radius:4px;overflow:hidden;}
.bf{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal2));border-radius:4px;transition:width .6s ease;}

/* TABLE */
.dtable{width:100%;border-collapse:collapse;font-size:12px;}
.dtable th{text-align:left;padding:7px 6px;color:var(--teal2);font-size:10px;letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid var(--border);font-weight:700;}
.dtable td{padding:7px 6px;border-bottom:1px solid #f3f4f6;color:var(--text);}
.dtable tr:last-child td{border:none;}
.dtable-perfil td{padding:12px 10px;vertical-align:top;}
.dtable-perfil td:nth-child(2){max-width:160px;line-height:1.4;white-space:normal;word-wrap:break-word;}
.dtable-perfil td:first-child{font-size:10px;}
.historial-table-wrap,.pv-hist-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.dtable-perfil-compact{font-size:10px;table-layout:fixed;width:100%;max-width:100%;}
.dtable-perfil-compact th,.dtable-perfil-compact td{padding:4px 3px;font-size:10px;}
.dtable-perfil-compact th{font-size:9px;letter-spacing:0.3px;}
.dtable-perfil-compact td:nth-child(1),.dtable-perfil-compact th:nth-child(1){width:14%;min-width:0;}
.dtable-perfil-compact td:nth-child(2),.dtable-perfil-compact th:nth-child(2){width:32%;min-width:0;word-break:break-word;}
.dtable-perfil-compact th:nth-child(n+3),.dtable-perfil-compact td:nth-child(n+3){width:7.7%;min-width:0;text-align:center;}
#pv-hist .pv-hist-details summary{font-size:11px;}
.sc{font-family:'Montserrat',sans-serif;font-weight:800;}
.sc-hi{color:#15803d;}
.sc-mid{color:var(--gold2);}
.sc-lo{color:var(--text3);}

/* ── STARS ── */
.star-row{display:flex;gap:6px;justify-content:center;padding:6px 0;}
.star{font-size:26px;color:#e5e7eb;cursor:pointer;transition:color .12s ease, transform .12s ease;line-height:1;}
.star.lit{color:var(--gold);text-shadow:0 0 6px rgba(245,197,24,0.5);}

/* ── FORM ── */
.fr{margin-bottom:14px;}
.fr label{display:block;font-size:10px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-bottom:6px;font-weight:700;}
.fr input,.fr select,.fr textarea{width:100%;padding:12px 14px;background:var(--off);border:1px solid rgba(30,41,59,0.12);border-radius:var(--radius);color:var(--text);font-family:'Lato',sans-serif;font-size:14px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s;}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:var(--teal);}
.chk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.chk-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--off);border:1px solid rgba(30,41,59,0.12);border-radius:var(--radius);cursor:pointer;transition:background-color .15s ease, border-color .15s ease;user-select:none;}
.chk-item.on{border-color:var(--teal);background:var(--teal-bg);}
.chk-box{width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .15s ease, border-color .15s ease;background:white;}
.chk-item.on .chk-box{background:var(--teal);border-color:var(--teal);}
.chk-box-tick{color:white;font-size:12px;font-weight:900;display:none;}
.chk-item.on .chk-box-tick{display:block;}
.chk-lbl{font-size:12px;color:var(--text2);font-weight:600;transition:color .15s;}
.chk-item.on .chk-lbl{color:var(--teal2);}
.chk-item input[type=checkbox]{display:none;}

/* BUTTONS */
.btn{padding:12px 16px;border-radius:var(--radius);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease, filter .16s ease;border:none;display:inline-block;}
.bteal{background:linear-gradient(135deg,var(--teal),var(--teal2));color:white;box-shadow:0 4px 16px rgba(58,171,186,0.35);}
.bteal:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(58,171,186,0.45);}
.boutline{background:white;border:1.5px solid #e9edf2;color:var(--text2);}
.boutline:hover{border-color:var(--teal);color:var(--teal2);}
.bred{background:var(--red-bg);border:1.5px solid rgba(239,68,68,0.3);color:var(--red);}
/* [2026-06-20] Clases de color reutilizables para CTAs (unifican los gradientes/colores inline). */
.bgreen{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;border:none;box-shadow:0 4px 16px rgba(21,128,61,0.30);}
.bdanger{background:#ef4444;color:#fff;border:1.5px solid #ef4444;}
.bindigo{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;box-shadow:0 4px 16px rgba(79,70,229,0.30);}
.bamber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;box-shadow:0 4px 16px rgba(217,119,6,0.30);}
.bfull{width:100%;padding:13px;font-size:13px;}
/* [2026-07-04 diseño] Micro-interacciones CONSISTENTES para TODOS los .btn: realce sutil en hover (solo con
   puntero, para no dejar estados pegados en táctil) + feedback claro al PULSAR (móvil y escritorio). El
   brillo se SUMA a los hover específicos (bteal/boutline…) sin pisarlos; el :active va después para ganar al
   presionar. Respeta prefers-reduced-motion (transform anulado abajo). */
@media (hover:hover){ .btn:hover{filter:brightness(1.05);} }
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.97);}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none;} }
.btn-row{display:flex;gap:8px;margin-top:10px;}
.btn-row .btn{flex:1;}
.confirm-box{background:var(--red-bg);border:1.5px solid rgba(239,68,68,0.25);border-radius:var(--radius);padding:16px;margin-top:14px;}
.confirm-box p{font-size:13px;color:var(--text);margin-bottom:12px;line-height:1.6;}

/* ── GRADING SCREEN ── */
/* [2026-07-03] z-index por ENCIMA del sheet/modal (.overlay=1400): al pulsar "Calificar" desde el detalle
   del estudio (un sheet abierto) la pantalla de calificar quedaba DETRÁS. 1600 = misma capa que el visor de
   material (ambas son tomas de pantalla completa, nunca simultáneas). */
.grade-screen{display:none;position:fixed;inset:0;background:var(--off);z-index:1600;flex-direction:column;}
.grade-screen.open{display:flex;}
.grade-top{background:var(--dark);padding:12px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.grade-top-ttl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:white;flex:1;}
.grade-top-sub{font-size:11px;color:var(--teal);margin-top:1px;}
.grade-save-bar{background:white;border-top:1.5px solid #e9edf2;padding:12px 16px;flex-shrink:0;}
.grade-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
/* table-layout:fixed + width:100% → la tabla NUNCA excede el ancho → sin scroll horizontal.
   7 columnas: Nombre 31% · 4 notas 12% c/u · Eval 11% · Total 10%. */
.grade-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.grade-table col.gc-name{width:31%;}
.grade-table col.gc-note{width:12%;}
.grade-table col.gc-eval{width:11%;}
.grade-table col.gc-total{width:10%;}
.grade-table thead tr{background:var(--dark2);position:sticky;top:0;z-index:5;}
.grade-table th{padding:9px 2px;font-size:8.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--teal);text-align:center;font-family:'Montserrat',sans-serif;font-weight:700;white-space:nowrap;}
.grade-table th:first-child{text-align:left;padding-left:10px;}
.grade-table .grp-sep{background:var(--dark3);}
.grade-table .grp-sep td{padding:6px 10px;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);border:none;}
.grade-table td{padding:6px 2px;text-align:center;border-bottom:1px solid #f0f2f5;}
.grade-table td:first-child{text-align:left;padding-left:10px;}
.grade-table tr:last-child td{border:none;}
.grade-table tr:nth-child(even) td{background:#fafbfc;}
.gname{font-size:12px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Paso 1: lista de asistencia (solo caballeros) */
.grade-asist-head{padding:12px 14px 6px;font-size:12px;color:var(--text3);}
.grade-asist-grp{padding:12px 14px 4px;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.grade-asist-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:white;border:none;border-bottom:1px solid #f0f2f5;padding:11px 14px;cursor:pointer;font-family:inherit;}
.grade-asist-row .ga-check{width:26px;height:26px;flex-shrink:0;border-radius:50%;border:2px solid #d1d5db;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--text3);background:white;}
.grade-asist-row .ga-name{font-size:14px;font-weight:600;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grade-asist-row.sel{background:var(--green-bg);}
.grade-asist-row.sel .ga-check{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.grade-asist-row.sel .ga-name{color:var(--green);}
/* Inputs de nota: llenan la celda fija (table-layout:fixed) sin desbordar en móviles estrechos. */
.grade-table .sc-inp{width:100%;max-width:46px;box-sizing:border-box;padding:6px 0;}
.gmeta{font-size:10px;color:var(--text3);}
.att-btn{width:32px;height:32px;border-radius:50%;border:2px solid #d1d5db;background:white;color:var(--text3);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease, border-color .15s ease, color .15s ease;}
.att-btn.yes{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.sc-inp{width:40px;padding:6px 2px;background:var(--off);border:1.5px solid #e9edf2;border-radius:7px;color:var(--dark);font-size:13px;text-align:center;font-family:'Montserrat',sans-serif;font-weight:700;outline:none;transition:border-color .15s;}
.sc-inp:focus{border-color:var(--teal);}
.sc-inp:disabled{opacity:.2;background:transparent;border-color:transparent;}
.total-cell{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:var(--teal);}

/* ── INFO BOX ── */
.info-box{background:var(--teal-bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:12px;color:var(--teal2);line-height:1.7;margin-bottom:14px;}

/* ── PERSONAL VIEW ── */
/* Fondo del scroll: oscuro para que el rebote (rubber-band) no muestre franjas claras
   bajo la cabecera; el área de contenido lleva fondo claro en .pv-body. */
#screen-personal{
  position:relative;
  background:var(--dark);
  overflow-x:hidden;
  overflow-y:auto;
  /* [2026-06-13] SIN `-webkit-overflow-scrolling:touch`: en iOS ese flag crea una
     capa de scroll propia donde los hijos `position:sticky` (la cabecera y la barra
     de pestañas Inicio/Comunidad) NO se quedan fijos — se deslizaban con el scroll.
     Quitarlo hace que el sticky funcione en iOS; iOS 13+ ya tiene momentum por
     defecto, así que no se pierde la inercia. */
  /* none (no contain): bloquea el rebote/overscroll — la app no se desliza más
     allá de su contenido ni dispara el pull-to-refresh nativo del navegador. */
  overscroll-behavior:none;
}
/* Contenedor que se desplaza al tirar hacia abajo (cabecera + resto) */
#screen-personal-pull-wrap{
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
  min-width:0;
  width:100%;
}
/* Pull-to-refresh personal: mensaje en la franja superior que se descubre al tirar */
#pv-pull-refresh-personal{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:8;
  height:0;
  overflow:hidden;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  background:transparent;
}
#pv-pull-refresh-personal.pv-pull-refresh-personal--open{
  padding:0 14px 10px;
  background:linear-gradient(180deg,rgba(8,12,20,.94) 0%,rgba(26,31,46,.62) 52%,transparent 100%);
}
/* Portada oculta: solo “elástico” al tirar, sin chip ni avisos */
#pv-pull-refresh-personal.pv-pull-refresh-personal--silent.pv-pull-refresh-personal--open{
  padding:0;
  background:transparent;
}
#pv-pull-refresh-personal.pv-pull-refresh-personal--silent .pv-pull-refresh-personal-chip{
  visibility:hidden;
  pointer-events:none;
}
#pv-pull-refresh-personal-inner{
  width:100%;
  max-width:420px;
  display:flex;
  justify-content:center;
}
#pv-pull-refresh-personal .pv-pull-refresh-personal-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(36,43,61,.96) 0%,rgba(26,31,46,.92) 100%);
  border:1px solid rgba(58,171,186,.38);
  box-shadow:0 12px 36px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05) inset;
  opacity:.12;
  transform:translate3d(0,8px,0) scale(.94);
  transition:opacity .12s linear,transform .12s linear;
}
#pv-pull-refresh-personal .pv-pfr-ico{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  line-height:1;
  color:#ecfeff;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 16px rgba(58,171,186,.38);
}
#pv-pull-refresh-personal .pv-pfr-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:left;
}
#pv-pull-refresh-personal .pv-pfr-main{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  color:rgba(255,255,255,.96);
  line-height:1.25;
}
#pv-pull-refresh-personal .pv-pfr-sub{
  display:none;
  font-family:'Lato',sans-serif;
  font-size:12px;
  font-weight:600;
  color:rgba(148,163,184,.96);
  line-height:1.3;
}
#pv-pull-refresh-personal .pv-pull-refresh-personal-chip--ready{
  border-color:rgba(245,197,24,.55);
  box-shadow:0 12px 38px rgba(0,0,0,.42),0 0 0 1px rgba(245,197,24,.14) inset;
}
#pv-pull-refresh-personal .pv-pull-refresh-personal-chip--ready .pv-pfr-ico{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--dark);
}
#pv-pull-refresh-personal .pv-pull-refresh-personal-chip--busy .pv-pfr-ico{
  animation:pvPullSpin .85s linear infinite;
}
.pv-body,.pv-tab{max-width:100%;min-width:0;overflow-x:hidden;box-sizing:border-box;}
/* Fondo claro defensivo: durante un re-render (innerHTML wipe) no se ve el
 * --dark de #screen-personal por debajo del .pv-body durante el frame en
 * que el contenido se reconstruye. */
.pv-tab.active{background:var(--off);}
/* Aislar paint/layout dentro de cada panel: cambios en una pestaña no
 * obligan al navegador a recalcular layout fuera de ella (cabecera, nav).
 * Sin `paint` para no recortar overlays absolutos que cuelgan de dentro. */
.pv-tab,.pv-body{contain:layout style;}

/* Pull-to-refresh (admin) — chip fijo bajo cabecera */
#pv-pull-refresh-indicator{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top,0px) + 52px);
  z-index:140;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-50%,6px,0);
  transition:opacity .22s ease,transform .18s ease;
  max-width:min(340px,calc(100vw - 28px));
  width:max-content;
}
#pv-pull-refresh-indicator .pv-pull-refresh-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px 12px 16px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(15,23,42,.1);
  border-radius:999px;
  box-shadow:0 8px 32px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.06);
}
#pv-pull-refresh-indicator .pv-pull-refresh-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:var(--teal2);
  background:var(--teal-bg);
  border-radius:50%;
  border:1px solid var(--border);
  transform-origin:50% 50%;
}
#pv-pull-refresh-indicator .pv-pull-refresh-textwrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:left;
}
#pv-pull-refresh-indicator .pv-pull-refresh-main{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--dark);
  letter-spacing:.02em;
  line-height:1.25;
}
#pv-pull-refresh-indicator .pv-pull-refresh-sub{
  display:none;
  font-family:'Lato',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  line-height:1.3;
  max-width:100%;
}
#pv-pull-refresh-indicator .pv-pull-refresh-chip--ready .pv-pull-refresh-icon{
  color:var(--teal);
  background:rgba(58,171,186,.18);
  border-color:rgba(58,171,186,.45);
}
#pv-pull-refresh-indicator .pv-pull-refresh-chip--busy .pv-pull-refresh-icon{
  animation:pvPullSpin .85s linear infinite;
}
@keyframes pvPullSpin{
  to{transform:rotate(360deg);}
}
.pv-hero{background:linear-gradient(160deg,var(--dark) 0%,var(--dark2) 50%,var(--teal3) 100%);padding:28px 20px 22px;text-align:center;position:relative;overflow:hidden;flex-shrink:0;max-height:420px;opacity:1;transform:translate3d(0,0,0);transform-origin:top center;will-change:transform;transition:max-height .15s cubic-bezier(.33,1,.68,1),opacity .1s linear,transform .12s cubic-bezier(.33,1,.68,1),padding .12s cubic-bezier(.33,1,.68,1);}
.pv-hero.pv-hero--collapse-instant{transition:none !important;}
.pv-hero.pv-hero-hidden{max-height:0 !important;min-height:0 !important;opacity:0;transform:translate3d(0,0,0);padding-top:0 !important;padding-bottom:0 !important;margin:0 !important;visibility:hidden;pointer-events:none;border:none;box-shadow:none;}
.pv-hero.pv-hero-hidden::before{opacity:0;}
.pv-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 25% 50%,rgba(58,171,186,0.18) 0%,transparent 50%),radial-gradient(circle at 75% 30%,rgba(245,197,24,0.1) 0%,transparent 40%);}
.pv-av-wrap{position:relative;display:inline-block;width:76px;height:76px;margin-bottom:12px;flex-shrink:0;}
.pv-av{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal3));display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:26px;font-weight:900;color:white;border:3px solid rgba(255,255,255,0.25);box-shadow:0 0 24px rgba(58,171,186,0.4);overflow:hidden;cursor:pointer;position:relative;z-index:1;}
.pv-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pv-cam{position:absolute;top:0;right:0;width:20px;height:20px;background:rgba(255,255,255,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:0.9;cursor:pointer;z-index:2;pointer-events:auto;}
.pv-av-wrap:hover .pv-cam{opacity:1;background:rgba(255,255,255,0.6);}
.pv-ntab-cumple{margin-right:12px;}
.pv-name{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:900;color:white;position:relative;}
.pv-meta{font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:1px;position:relative;}
.pv-bdg{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px;position:relative;}
.pv-body{padding:16px 16px 40px;background:var(--off);}
/* Forjados (personal): mismo fondo claro que el resto de pestañas (no heredar el oscuro de #screen-personal) */
#pvtab-forjados > .pv-body.forjados-shell-body{background:var(--white);}
/* Vista personal: el cuerpo de la pestaña activa debe poder “llenar” el viewport bajo header+tabs,
   para que #screen-personal tenga scroll suficiente y se oculte el hero (foto, nombre, insignias)
   dejando la barra .pv-nav pegada bajo .app-header (sticky top:46px), igual que con mucho contenido.
   Con #screen-personal-pull-wrap el contenido vive dentro del contenedor de pull. */
#screen-personal-pull-wrap > .pv-tab.active > .pv-body,
#screen-personal > .pv-tab.active > .pv-body{
  /* 46px ≈ .app-header; ~46px dos filas .pv-nav-two-rows */
  min-height:max(240px, calc(100dvh - 92px));
  min-height:max(240px, calc(100svh - 92px));
}
.score-hero{background:white;border-radius:var(--radius-lg);padding:24px 18px;text-align:center;margin-bottom:18px;box-shadow:var(--shadow-pro);border:1px solid rgba(30,41,59,0.08);position:relative;overflow:hidden;}
.score-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--teal2),var(--gold));border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.sh-big{font-family:'Montserrat',sans-serif;font-size:56px;font-weight:900;color:var(--teal);line-height:1;}
.sh-lbl{font-size:11px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;font-weight:700;margin-top:4px;}
.sh-sub{font-size:13px;color:var(--text2);margin-top:6px;}
.ev-pill{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--dark);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;padding:5px 12px;border-radius:20px;margin-top:10px;text-transform:uppercase;}
.vine-div{display:flex;align-items:center;gap:8px;margin:14px 0 12px;}
.vine-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border));}
.vine-line.r{background:linear-gradient(90deg,var(--border),transparent);}
.vine-ico{font-size:16px;color:var(--teal);}
/* Personal view tabs (tab bar) */
/* [2026-08-02] Cabecera + pestañas = UN solo bloque sticky (.pv-topbar). Antes eran dos sticky
   independientes y la barra se escondía detrás de la cabecera cuando su alto variaba (notch/Dynamic Island,
   standalone/PWA/nativo, o Safari al colapsar su barra). Ahora la cabecera y la nav son ESTÁTICAS y va sticky
   el contenedor .pv-topbar que las envuelve → siempre pegadas, sin medir alturas ni JS. */
.pv-topbar{position:-webkit-sticky;position:sticky;top:0;z-index:100;display:flex;flex-direction:column;flex-shrink:0;}
.pv-topbar .app-header{position:static;top:auto;z-index:auto;}
.pv-nav{background:var(--dark2);display:flex;border-bottom:3px solid rgba(0,0,0,0.15);flex-shrink:0;padding:0 8px 0;gap:0;overflow-y:hidden;overscroll-behavior-y:none;touch-action:pan-x;position:static;z-index:1;}
.pv-nav-single-row{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;justify-content:flex-start;}
.pv-nav-single-row .pv-ntab{flex:1;min-width:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;}
.pv-nav-single-row .pv-ntab-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:1em;}
.pv-nav-single-row .pv-ntab-txt{display:inline-block;}
@media (max-width:420px){
  .pv-nav-single-row .pv-ntab-txt{font-size:10px;letter-spacing:-0.02em;}
}
/* Dos filas: finas, mismo ancho por pestaña */
.pv-nav-two-rows{
  flex-direction:column;
  align-items:stretch;
  padding:2px 5px 3px;
  gap:0;
  border-bottom:2px solid rgba(0,0,0,0.14);
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:manipulation;
}
.pv-nav-two-rows .pv-nav-trow{
  display:flex;
  flex-direction:row;
  width:100%;
  gap:2px;
  align-items:stretch;
}
.pv-nav-two-rows .pv-nav-trow-secondary{
  border-top:1px solid rgba(255,255,255,0.09);
  padding-top:2px;
  margin-top:1px;
}
.pv-nav-two-rows .pv-ntab{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 4px;
  font-size:9px;
  letter-spacing:0.14em;
  font-weight:700;
  border-radius:7px 7px 0 0;
  line-height:1.15;
  margin-bottom:-1px;
  box-shadow:none;
}
.pv-nav-two-rows .pv-ntab:hover{color:rgba(255,255,255,0.72);}
.pv-nav-two-rows .pv-ntab.active{
  font-weight:800;
  box-shadow:0 -3px 12px rgba(0,0,0,0.1),inset 0 2px 0 rgba(58,171,186,0.15);
  border-bottom-width:2px;
}
.pv-nav-two-rows .pv-ntab-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  opacity:0.92;
  flex-shrink:0;
}
.pv-nav-two-rows .pv-ntab-txt{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (min-width:360px){
  .pv-nav-two-rows .pv-ntab{font-size:9.5px;padding:7px 5px;letter-spacing:0.12em;}
  .pv-nav-two-rows .pv-ntab-ico{font-size:13px;}
}
@media (min-width:420px){
  .pv-nav-two-rows .pv-ntab{font-size:10px;padding:7px 6px;}
}
.pv-nav-row{display:flex;flex:1;min-width:0;gap:4px;}
.pv-nav-row .pv-ntab{flex:1;min-width:0;}
.pv-nav::-webkit-scrollbar{display:none;}
/* [HdV] Barra de 2 pestañas (Inicio · Comunidad): compacta, bonita y ESTÁTICA —
   no se desliza (touch-action:none, sin overflow) y queda pegada bajo la cabecera
   (sticky). Pastillas tipo "segmented control". Anula los estilos finos previos. */
.pv-nav.pv-nav-two-rows{padding:6px 10px;background:var(--dark2);border-bottom:2px solid rgba(0,0,0,0.20);overflow:hidden;touch-action:none;position:-webkit-sticky;position:sticky;top:46px;z-index:90;}
.pv-nav-two-rows .pv-nav-trow{gap:7px;}
.pv-nav-two-rows .pv-ntab{
  /* [2026-06-18] Icono ENCIMA del texto: así la etiqueta usa todo el ancho de la pestaña y se lee
     completa (antes, en fila, "Cronograma" no cabía con el icono y se truncaba con elipsis). */
  flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 3px;border-radius:12px;font-size:10.5px;font-weight:700;letter-spacing:0.01em;
  text-transform:none;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.045);
  color:rgba(255,255,255,0.60);box-shadow:none;margin-bottom:0;line-height:1.15;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
}
.pv-nav-two-rows .pv-ntab:hover{color:rgba(255,255,255,0.85);}
.pv-nav-two-rows .pv-ntab:active{transform:scale(0.97);}
.pv-nav-two-rows .pv-ntab.active{
  background:linear-gradient(135deg,rgba(58,171,186,0.26),rgba(58,171,186,0.13));
  border-color:rgba(58,171,186,0.5);color:#fff;font-weight:800;
  box-shadow:0 3px 12px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.08);
}
.pv-nav-two-rows .pv-ntab .pv-ntab-ico{font-size:18px;opacity:1;}
.pv-nav-two-rows .pv-ntab .pv-ntab-txt{letter-spacing:0;text-transform:none;font-size:10.5px;max-width:100%;white-space:nowrap;overflow:visible;text-overflow:clip;}
/* Punto de aviso (p.ej. Comunidad): absoluto arriba-derecha para no descolocar el layout en columna. */
.pv-nav-two-rows .pv-ntab .pv-nav-dot{position:absolute;top:4px;right:6px;margin:0;}
/* La pestaña seleccionada lleva el nombre en BLANCO (anula .pv-ntab.active .pv-ntab-txt → --dark). */
.pv-nav-two-rows .pv-ntab.active .pv-ntab-txt{color:#fff;}
.pv-nav-two-rows .pv-ntab.active .pv-ntab-ico{color:#fff;}
.pv-hacts-btns{display:flex;align-items:center;gap:6px;}
.pv-hdr-btn{width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:rgba(255,255,255,0.94);transition:transform .2s ease,opacity .2s ease,color .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent;}
/* Botones-pastilla de la cabecera (⛪ Iglesia · 👥 Grupos): icono pequeño + nombre
   en horizontal ("alargado"), uniformes entre sí. */
.pv-hdr-btn-stack{width:auto;height:auto;min-height:30px;border-radius:999px;flex-direction:row;gap:5px;padding:5px 11px 5px 9px;position:relative;background:rgba(255,255,255,0.12)!important;border:1px solid rgba(255,255,255,0.26)!important;box-shadow:0 1px 6px rgba(0,0,0,0.16)!important;}
.pv-hdr-btn-ico{display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;}
.pv-hdr-btn-lbl{font-family:'Montserrat',sans-serif;font-size:6.5px;font-weight:800;letter-spacing:0.03em;line-height:1;text-transform:uppercase;white-space:nowrap;}
.pv-hdr-btn-stack .pv-hdr-btn-ico{font-size:14px;}
.pv-hdr-btn-stack .pv-hdr-btn-lbl{font-size:10.5px;letter-spacing:0.02em;}
/* La palabra "Iglesia" baja un punto y el icono ⛪ sube uno: quedan alineados. */
/* [2026-06-14] Botón "Iglesia" solo icono (sin etiqueta) para dar más espacio al título de la
   cabecera; se vuelve un botón redondo como los demás. */
.pv-hdr-btn-iglesia .pv-hdr-btn-lbl{display:none;}
/* [2026-07-25] Botón ⛪ (volver al lobby): un poco MÁS GRANDE, con más presencia de botón (fondo/borde/sombra),
   y SIEMPRE a la DERECHA de su fila (order alto en el contenedor flex .pv-hacts-btns). */
.pv-hdr-btn-stack.pv-hdr-btn-iglesia{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:12px;background:rgba(255,255,255,0.17)!important;border:1px solid rgba(255,255,255,0.34)!important;box-shadow:0 2px 9px rgba(0,0,0,0.20)!important;}
.pv-hacts-btns .pv-hdr-btn-iglesia{order:9;}
.pv-hdr-btn-iglesia .pv-hdr-btn-ico{position:relative;top:0;font-size:20px;}
/* Botón ⛪ Iglesia (volver al lobby): misma pastilla que Grupos (uniforme), con un
   ligero hover. Es la salida del "modo función" y el atajo al lobby desde HdV.
   El :active da una pulsación clara ("se siente más real al volver"). */
.pv-hdr-btn-iglesia:hover{transform:translateY(-1px);background:rgba(255,255,255,0.20)!important;color:#fff;}
.pv-hdr-btn-iglesia:active{transform:scale(0.92);background:rgba(255,255,255,0.30)!important;transition:transform .08s ease,background .08s ease;}
/* En "modo función" la única salida es este botón: lo resaltamos un poco más. */
body.iglesia-feature .pv-hdr-btn-iglesia{background:rgba(255,255,255,0.18)!important;border-color:rgba(255,255,255,0.40)!important;}
.pv-hdr-btn-logout{color:rgba(255,255,255,0.94);}
.pv-hdr-btn-logout:hover{transform:translateY(-1px);opacity:1;}
/* 👥 Grupos: solo icono (sin nombre), chip cuadrado como estaba antes. */
/* [2026-07-25] 👥 Grupos y ⚙️ admin: MISMO tamaño y forma que ⛪ (fila uniforme y simétrica). */
.pv-hdr-btn-grupos{position:relative;color:rgba(255,255,255,0.94);width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.28);box-shadow:0 2px 9px rgba(0,0,0,0.18);}
.pv-hdr-btn-grupos .pv-hdr-btn-ico{font-size:18px;}
.pv-nav-dot{display:none;margin-left:3px;font-size:10px;line-height:1;font-weight:800;vertical-align:middle;flex-shrink:0;}
.pv-nav-dot-oracion{color:#ef4444;}
.pv-nav-dot-estudio{color:#d97706;}
.pv-nav-dot-eventos{color:#6366f1;}
.pv-nav-dot-sod{color:#0891b2;}
.pv-nav-dot-paradoja{color:#dc2626;}
.pv-nav-dot-hdr{position:absolute;top:1px;right:5px;margin:0;font-size:8px;color:#fbbf24;text-shadow:none;}
.pv-hdr-btn-grupos:hover{color:#fff;transform:translateY(-1px);opacity:1;}
.pv-hdr-btn-grupos.pv-hdr-active{color:#99f6e4;border-color:rgba(153,246,228,0.55)!important;box-shadow:0 0 0 1px rgba(153,246,228,0.25)!important;}
.pv-hdr-btn-perfil{color:rgba(255,255,255,0.94);}
.pv-hdr-btn-perfil:hover{transform:translateY(-1px);color:#fff;opacity:1;}
.pv-hdr-btn-perfil.pv-hdr-active{box-shadow:0 0 0 1px rgba(153,246,228,0.25)!important;color:#99f6e4;border-color:rgba(153,246,228,0.55)!important;}
.pv-hdr-btn-info{color:rgba(255,255,255,0.94);}
.pv-hdr-btn-info:hover{transform:translateY(-1px);color:#fde68a;opacity:1;}
.pv-hdr-btn-info.pv-hdr-active{box-shadow:0 0 0 1px rgba(253,224,71,0.35)!important;color:#fde68a;border-color:rgba(253,224,71,0.55)!important;}
/* Lobby: botones Perfil/Info — círculos simétricos, pequeños y elegantes. */
.lobby-act-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #e6ebf2;box-shadow:0 2px 10px rgba(15,23,42,.08);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-size:16px;line-height:1;color:var(--text2);transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent;}
/* El emoji queda centrado en el círculo: el span ocupa todo el botón y centra su caja de línea. */
.lobby-act-btn>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;text-align:center;}
.lobby-act-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.13);}
.lobby-act-btn:active{transform:translateY(0);}
/* Entrada a modo admin: tinte dorado sutil para que destaque entre los accesos del lobby. */
.lobby-act-btn--admin{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fcd34d;}

/* [Roles del miembro] Controles con estado claro (activo/inactivo) y feedback táctil. */
.role-block{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px;background:#fff;}
.role-block-title{font-weight:800;font-size:13.5px;color:#0f172a;}
.role-block-desc{font-size:11.5px;color:#64748b;margin:2px 0 10px;line-height:1.4;}
.role-toggle{display:flex;align-items:center;gap:12px;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px;background:#fff;transition:border-color .18s ease,background .18s ease;}
.role-toggle.on{border-color:rgba(15,118,110,.42);background:linear-gradient(180deg,rgba(15,118,110,.06),#fff);}
.role-toggle-info{flex:1;min-width:0;}
.role-toggle-title{font-weight:800;font-size:13.5px;color:#0f172a;}
.role-toggle-desc{font-size:11.5px;color:#64748b;margin-top:2px;line-height:1.4;}
.role-sw{flex:0 0 auto;width:50px;height:29px;border-radius:999px;border:none;background:#cbd5e1;position:relative;cursor:pointer;transition:background .2s ease;-webkit-tap-highlight-color:transparent;}
.role-sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:left .2s cubic-bezier(.4,1.35,.55,1),width .12s ease;}
.role-sw.on{background:#0f766e;}
.role-sw.on::after{left:24px;}
.role-sw:active::after{width:27px;}
.role-seg{display:flex;gap:7px;flex-wrap:wrap;}
.role-opt{font-size:12px;font-weight:700;padding:9px 13px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#475569;cursor:pointer;transition:transform .1s ease,background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;}
.role-opt:active{transform:scale(.93);}
.role-opt--off{color:#b91c1c;border-color:rgba(239,68,68,.3);}
.role-state{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;}
.role-state--on{background:rgba(15,118,110,.12);color:#0f766e;border:1px solid rgba(15,118,110,.3);}
.role-state--off{background:rgba(148,163,184,.16);color:#64748b;border:1px solid rgba(148,163,184,.35);}
/* Lobby: tarjetas de sección — diseño pro (icono en cuadro tintado, barra de acento, lift). */
.lobby-sec-card{display:flex;align-items:center;gap:14px;width:100%;border:1px solid #eaeef3;border-radius:18px;padding:15px 16px;margin-bottom:13px;background:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(15,23,42,.07);position:relative;overflow:hidden;font-family:inherit;text-align:left;transition:transform .16s ease,box-shadow .16s ease;-webkit-tap-highlight-color:transparent;}
.lobby-sec-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc,var(--teal));border-radius:18px 0 0 18px;}
.lobby-sec-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.13);}
.lobby-sec-card:active{transform:translateY(0);box-shadow:0 6px 20px rgba(15,23,42,.07);}
.lobby-sec-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;flex-shrink:0;}
.lobby-sec-arrow{color:#cbd5e1;font-size:24px;font-weight:300;flex-shrink:0;line-height:1;}
/* Lobby: navegación de funciones de la Iglesia (Estudios/Eventos/Forjados/Paradoja).
   Pestañas en una barra, al estilo de la barra de pestañas de Hombres de Verdad
   (icono sobre etiqueta), pero en versión clara para el fondo del lobby. Cada pestaña
   lleva su color de acento (--acc / --acc-bg) y puede mostrar un punto de aviso. */
.lobby-feat-nav{display:flex;gap:6px;width:100%;background:#fff;border:1px solid #eaeef3;border-radius:16px;padding:6px;box-shadow:0 4px 14px rgba(15,23,42,.06);}
.lobby-feat-tab{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:12px;padding:10px 4px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease,transform .12s ease;}
.lobby-feat-tab:hover{background:var(--acc-bg,#f1f5f9);border-color:var(--acc-bg,#eaeef3);}
.lobby-feat-tab:active{transform:scale(.96);}
.lobby-feat-tab-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;background:var(--acc-bg,#f1f5f9);}
.lobby-feat-tab-lbl{font-size:11.5px;font-weight:800;color:var(--text);letter-spacing:.2px;line-height:1.1;}
.lobby-feat-tab-dot{display:none;position:absolute;top:5px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--acc,#ef4444);box-shadow:0 0 0 2px #fff;}
.lobby-feat-tab-dot.on{display:block;}
/* [Iglesia app] "Modo función": una función de la Iglesia abierta desde el lobby. Oculta el
   chrome de Hombres de Verdad (barra de pestañas, hero, grupos/finanzas) y muestra el nombre
   de la función en la cabecera; el botón ⛪ Iglesia vuelve al lobby. */
.hbrand-feature-name{display:none;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;letter-spacing:.3px;color:#fff;line-height:1.1;}
body.iglesia-feature .hbrand-feature-name{display:block;}
body.iglesia-feature .h-title,
body.iglesia-feature .h-sub{display:none;}
body.iglesia-feature .pv-nav,
body.iglesia-feature .pv-hero,
body.iglesia-feature #pv-btn-grupos,
body.iglesia-feature #pv-btn-finanzas{display:none !important;}
/* Icono del acceso rápido: en "modo función" reemplaza a la espada (decorativo).
   Para volver al lobby está el botón ⛪ Iglesia. */
.hbrand-feature-ico{display:none;align-items:center;justify-content:center;width:30px;height:30px;font-size:19px;line-height:1;flex-shrink:0;}
body.iglesia-feature .hbrand-feature-ico{display:flex;}
body.iglesia-feature .hbrand-icon{display:none;}
/* La cabecera del modo función es más compacta (ocupaba demasiado). */
body.iglesia-feature .app-header{padding:calc(3px + env(safe-area-inset-top,0px)) 14px 3px 14px;min-height:36px;}
body.iglesia-feature .hbrand-feature-name{font-size:14px;}
body.iglesia-feature .hbrand-feature-ico{width:26px;height:26px;font-size:17px;}
/* El acceso al admin (⚙️) solo en el lobby: dentro de un acceso rápido no aparece. */
body.iglesia-feature #pv-btn-hdv-admin{display:none !important;}
/* Estudios: el selector de arriba ya indica el estudio; el título es redundante. */
#pv-estudio-titulo{display:none;}

/* ──────── App Info / Donaciones ──────── */
.app-info-wrap{display:flex;flex-direction:column;gap:9px;padding:0 0 2px;}
.app-info-hero{background:linear-gradient(135deg,#0f766e 0%,#0e7490 50%,#1e3a8a 100%);color:#fff;border-radius:14px;padding:12px 15px 11px;box-shadow:0 8px 24px rgba(15,118,110,0.25);position:relative;overflow:hidden;}
.app-info-hero::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);pointer-events:none;}
.app-info-hero-title{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:900;letter-spacing:0.04em;text-transform:uppercase;line-height:1.2;display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.app-info-hero-sub{font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.85);line-height:1.45;}
.app-info-hero-body{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,0.95);margin-top:0;position:relative;}
.app-info-hero-body strong{color:#fde68a;font-weight:800;}
.app-info-verse{font-family:'Caveat',cursive;font-size:16px;color:#fde68a;margin-top:7px;line-height:1.2;text-align:center;font-weight:600;position:relative;}
.app-info-card{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1.5px solid #e2e8f0;border-radius:14px;padding:11px 13px;box-shadow:0 2px 8px rgba(15,23,42,0.05);}
.app-info-card-h{display:flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;}
.app-info-card-h .app-info-ico{font-size:18px;}
.app-info-card-body{font-size:12.5px;color:#334155;line-height:1.4;}
.app-info-creator{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.app-info-creator-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 3px 10px rgba(245,158,11,0.35);overflow:hidden;}
.app-info-creator-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:#0f172a;line-height:1.2;}
.app-info-creator-role{font-size:11.5px;color:#64748b;font-weight:600;margin-top:2px;}
.app-info-contact-row{display:flex;gap:8px;margin-top:8px;}
.app-info-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:10px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:800;text-decoration:none;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;}
.app-info-btn:hover{transform:translateY(-2px);}
.app-info-btn-call{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,0.35);}
.app-info-btn-wa{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;box-shadow:0 4px 12px rgba(34,197,94,0.35);}
.app-info-donate{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1.5px solid #f59e0b;border-radius:14px;padding:11px 13px;box-shadow:0 4px 14px rgba(245,158,11,0.18);position:relative;overflow:hidden;}
.app-info-donate::before{content:"💛";position:absolute;top:-8px;right:-4px;font-size:54px;opacity:0.1;pointer-events:none;}
.app-info-donate-h{display:flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:900;color:#78350f;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:5px;position:relative;}
.app-info-donate-msg{font-size:12.5px;color:#78350f;line-height:1.4;margin-bottom:7px;font-weight:500;position:relative;}
.app-info-donate-msg strong{color:#92400e;font-weight:800;}
.app-info-bizum-row{display:flex;flex-direction:column;gap:6px;margin-top:6px;position:relative;}
.app-info-bizum{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1.5px dashed #d97706;border-radius:10px;padding:8px 12px;}
.app-info-bizum-lbl{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:#92400e;text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;gap:5px;}
.app-info-bizum-num{font-family:'Montserrat',sans-serif;font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;color:#0f172a;letter-spacing:0.06em;}
.app-info-copy{background:#f59e0b;color:#fff;border:none;border-radius:8px;padding:5px 10px;font-size:11px;font-weight:800;cursor:pointer;font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:0.04em;transition:background .15s ease;}
.app-info-copy:hover{background:#d97706;}
.app-info-copy.copied{background:#22c55e;}
.app-info-thanks{text-align:center;font-family:'Caveat',cursive;font-size:17px;color:#92400e;margin-top:6px;font-weight:700;position:relative;}

.pv-ntab{padding:12px 6px;font-size:11px;letter-spacing:0.3px;text-transform:uppercase;color:rgba(255,255,255,0.55);cursor:pointer;text-align:center;border-radius:10px 10px 0 0;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;font-family:'Montserrat',sans-serif;font-weight:700;white-space:nowrap;line-height:1.2;-webkit-tap-highlight-color:transparent;border:1px solid transparent;border-bottom:none;margin-bottom:-1px;}
.pv-ntab:hover{color:rgba(255,255,255,0.78);}
/* Activa: texto oscuro sobre chip claro (evita “pestaña blanca ilegible” si el teal se pierde o hay poco contraste) */
.pv-ntab.active{
  color:var(--dark);
  background:#fff;
  border-color:rgba(15,23,42,0.12);
  border-bottom:2px solid #fff;
  font-weight:800;
  box-shadow:0 -4px 14px rgba(0,0,0,0.12),inset 0 2px 0 rgba(58,171,186,0.18);
}
.pv-ntab.active .pv-ntab-txt{color:var(--dark);}
.pv-ntab.active .pv-ntab-ico{opacity:1;filter:none;}
.pv-ntab.active .pv-nav-dot-oracion{color:#ef4444;}
.pv-ntab.active .pv-nav-dot-estudio{color:#d97706;}
.pv-ntab.active .pv-nav-dot-eventos{color:#6366f1;}
.pv-ntab.active .pv-nav-dot-sod{color:#0e7490;}
.pv-ntab.active .pv-nav-dot-paradoja{color:#b91c1c;}
.pv-tab{display:none;flex-shrink:0;}
.pv-tab.active{display:block;}
/* Rendimiento: pestañas personales ocultas sin layout/paint */
.pv-tab:not(.active){content-visibility:hidden;contain-intrinsic-size:auto 600px;}
.forjados-shell-pg{max-width:1120px;}
.forjados-shell-note{margin:0 0 14px;color:var(--text3);font-size:13px;line-height:1.5;}
.forjados-shell-body{padding:0 0 18px;}
.forjados-shell-card{display:contents;}
.forjados-shell-card--pv{display:contents;}
/* Forjados nativo: layout en el mismo documento. */
.forjados-native-root{display:block;width:100%;min-height:0;background:transparent;overflow:visible;}
#pvtab-forjados{height:auto;overflow:visible;}
/* Mismo padding que los demás tabs del personal y safe-area para que nada quede
   oculto por la navegación inferior del sistema (iOS home bar, Android gesture). */
#pvtab-forjados .forjados-shell-body{
  display:block;overflow:visible;
  /* [2026-06-11] Menos padding lateral para aprovechar todo el ancho en Forjados. */
  padding:14px 6px calc(28px + env(safe-area-inset-bottom,0px));
}
#pvtab-forjados .forjados-native-root{
  border:0;border-radius:0;box-shadow:none;background:var(--white);
}
#t-forjados-admin{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#t-forjados-admin .forjados-shell-pg{display:block;padding-bottom:20px;}
#t-forjados-admin .forjados-native-root{border:1px solid rgba(58,171,186,0.2);border-radius:14px;box-shadow:0 4px 18px rgba(15,23,42,0.06);}
@media(max-width:640px){
  #t-forjados-admin .forjados-native-root{border-radius:12px;}
}
.cgc{background:white;border:1px solid rgba(30,41,59,0.08);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-pro);}
.cgc-ttl{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--dark);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f3f4f6;}
#photo-input-pv{display:none;}
#photo-input-modal{display:none;}
@media(min-width:600px){.stats-grid{grid-template-columns:repeat(4,1fr);}.pg{padding:20px;}.pv-body{padding:20px 20px 40px;}}
.ntab{font-size:11px;padding:11px 10px;}
@media(min-width:400px){.pv-nav:not(.pv-nav-two-rows) .pv-ntab{font-size:11px;padding:12px 8px;}}
@media(min-width:500px){.pv-nav:not(.pv-nav-two-rows) .pv-ntab{font-size:12px;padding:12px 10px;}}
/* ─── Visor de material: UI minimalista (solo iframe + botón "✕" flotante) ─── */
/* [2026-07-03] z-index 1600 (>.overlay/sheet 1400 y .adm-window 1300): el visor de material se abre DESDE
   el sheet del detalle de estudio; con z-index 300 quedaba DETRÁS. Ahora va a pantalla completa por delante. */
.material-viewer-wrap{position:fixed;inset:0;background:#fff;z-index:1600;display:flex;flex-direction:column;overflow:hidden;}
.material-viewer-wrap:not([style*="display: none"]){display:flex;}
.material-viewer-inner{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
.material-viewer-iframe{flex:1;width:100%;border:none;min-height:0;display:block;}

/* Botón flotante "✕" — única vía de salida. Diseño pro:
   • Glass / blur translúcido oscuro sobre cualquier contenido.
   • Tap target 44x44 (recomendación iOS/Android).
   • Hover scale 1.05; active scale 0.88 (feedback táctil claro al pulsar).
   • Pulso de bienvenida al abrir (1.4s) para que el usuario lo localice. */
.material-viewer-close-floating{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top,0px));
  right:12px;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(15,23,42,0.82); /* sólido en vez de backdrop-filter blur (coste GPU en móvil) */
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
  cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.32),
    0 2px 6px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transition:background .2s ease, transform .12s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  animation:material-viewer-close-pop 1.4s ease-out 1;
}
.material-viewer-close-icon{
  font-size:18px;font-weight:600;line-height:1;display:inline-block;
  margin-top:-1px;letter-spacing:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
.material-viewer-close-floating:hover{
  background:rgba(15,23,42,0.78);
  border-color:rgba(255,255,255,0.32);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.4),
    0 3px 8px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transform:scale(1.05);
}
.material-viewer-close-floating:active{
  background:rgba(15,23,42,0.92);
  transform:scale(0.88);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .08s ease, background .08s ease, box-shadow .12s ease;
}
.material-viewer-close-floating:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,0.6);
  box-shadow:
    0 6px 22px rgba(0,0,0,0.32),
    0 0 0 3px rgba(58,171,186,0.55);
}
@keyframes material-viewer-close-pop{
  0%{transform:scale(.4);opacity:0;}
  55%{transform:scale(1.12);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .material-viewer-close-floating{animation:none;}
  .material-viewer-close-floating:hover,.material-viewer-close-floating:active{transform:none;}
}

/* ── PV / RESPONSIVE ── */
.pv-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pv-hname{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;}
.pv-ntabs{display:flex;border-radius:999px;background:#e5e7eb;padding:2px;gap:2px;}
.pv-ntabs .pv-ntab{flex:1;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:700;font-family:'Montserrat',sans-serif;color:#6b7280;border:none;background:transparent;cursor:pointer;white-space:nowrap;}
.pv-ntabs .pv-ntab.active{background:#fff;color:var(--dark);box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid rgba(58,171,186,0.35);}
.pv-sec-ttl{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;margin-bottom:10px;}
.pv-sec-sub{font-size:11px;color:#6b7280;margin-bottom:12px;}

/* Ajustes responsive / tipografías */
.pg{padding-bottom:26px;}
.sec-ttl{align-items:flex-end;}
.sec-ttl .tag{margin-top:6px;}
.pv-nav:not(.pv-nav-two-rows) .pv-ntab{font-size:12px;padding:13px 8px;}
.cab-nm,.cl-nm,.gr-nm,.gr-rname,.gname{font-size:15px;}
.cab-mt,.cl-mt,.sh-sub,.gr-rdist{font-size:13px;}
.chip{font-size:12px;padding:7px 14px;}
.chk-lbl{font-size:14px;}
.btn{font-size:13px;}
.bfull{font-size:15px;}
.dtable{font-size:13px;}
.sec-ttl{font-size:15px;}
.lf input,.lf select,.fr input,.fr select,.fr textarea,.search-wrap input,.sc-inp{font-size:16px;}

/* ── UTILITIES (extraídas de index.html) ── */

.hint-text{
  font-size:12px;
  color:var(--teal2);
  font-weight:700;
  margin:6px 0 8px;
}
.hint-text-center{
  text-align:center;
}

.textarea{
  width:100%;
  padding:10px 12px;
  background:#f9fafb;
  border:1.5px solid #e9edf2;
  border-radius:10px;
  color:var(--text);
  font-family:'Lato',sans-serif;
  font-size:14px;
  outline:none;
  resize:none;
  transition:border-color .2s;
  line-height:1.5;
}
.textarea:focus{
  border-color:#8b5cf6;
}

.pet-anon-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  background:#f9fafb;
  border:1.5px solid #e9edf2;
  border-radius:10px;
  cursor:pointer;
  flex-shrink:0;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pet-anon-box{
  width:16px;
  height:16px;
  border:2px solid #d1d5db;
  border-radius:4px;
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:background-color .15s ease, border-color .15s ease;
}
.pet-anon-label{
  font-size:12px;
  color:#4b5563;
  font-weight:600;
}

.pet-card{
  padding:13px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  position:relative;
  overflow:hidden;
}

.panel{
  background:white;
  border:1px solid rgba(30,41,59,0.08);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  box-shadow:var(--shadow-pro);
}
.panel-lg{
  padding:18px 20px;
  box-shadow:var(--shadow-pro);
}
.panel-inicio{
  background:linear-gradient(135deg,#f9fafb,#e5f3f6);
  border:1px solid rgba(58,171,186,0.35);
}
.panel-soft-teal{
  background:var(--teal-bg);
  border-color:var(--border2);
}
.panel-soft-green{
  background:var(--green-bg);
  border-color:rgba(22,163,74,0.35);
}
.panel-soft-gold{
  background:var(--gold-bg);
  border-color:rgba(212,168,0,0.35);
}
.panel-title{
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--dark);
  margin-bottom:6px;
}
.panel-desc{
  font-size:12px;
  color:var(--text2);
  margin-bottom:12px;
}

/* ── TÍTULOS DE EVALUACIONES (una sola línea, legibles) ── */
.evq-titulo{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:15px;
  color:var(--dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0.3px;
  line-height:1.3;
}

/* ── PRAYER BANNER (Mi Perfil · Oración) ── */

.prayer-banner{
  background:linear-gradient(135deg,var(--dark) 0%,#2e1d47 60%,#4c1d95 100%);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:14px;
  border:1px solid rgba(139,92,246,0.35);
  box-shadow:0 4px 20px rgba(139,92,246,0.2);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.prayer-banner-glow-right{
  position:absolute;
  right:-20px;
  top:-20px;
  width:110px;
  height:110px;
  background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 70%);
  pointer-events:none;
}
.prayer-banner-glow-left{
  position:absolute;
  left:-10px;
  bottom:-15px;
  width:80px;
  height:80px;
  background:radial-gradient(circle,rgba(245,197,24,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.prayer-banner-content{
  display:flex;
  align-items:flex-start;
  gap:14px;
  position:relative;
}
/* Reutilizado en el banner de Comunidad para el icono principal (🤝). */
.prayer-banner-emoji{
  font-size:30px;
  flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(139,92,246,0.6));
}
.prayer-banner-main{
  flex:1;
  padding-right:88px;
}
.prayer-banner-kicker{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.45);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:3px;
}
.prayer-banner-title{
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:900;
  color:white;
  line-height:1.3;
}
.prayer-banner-quote{
  font-family:'Caveat',cursive;
  font-size:13px;
  color:#a78bfa;
  margin-top:3px;
}
.prayer-banner-types{
  font-family:'Montserrat',sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.5px;
}
.prayer-banner-tap-indicator{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid rgba(196,181,253,0.45);
  background:rgba(124,58,237,0.2);
  color:#ede9fe;
  font-family:'Montserrat',sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:0.1px;
  white-space:nowrap;
  animation:prayerTapHintPulse 1.8s ease-in-out 8;
}
/* [Split Peticiones/SOD] Variante verde del banner para el modo SOD (lo activa
   applyComuMode con la clase prayer-banner--sod). Mismo tamaño que Peticiones;
   como en SOD no hay temporizador, el texto aprovecha todo el ancho. */
/* [2026-06-14] Por variables: HdV = verde (defaults). En un comité, body.seccion-<key> redefine
   --com-* para que el banner tome la gama del comité (jóvenes naranja, mujeres rosa, …). */
.prayer-banner--sod{
  background:var(--com-grad, linear-gradient(135deg,#0a1f1a 0%,#0d3b2e 55%,#047857 100%));
  border-color:var(--com-border, rgba(16,185,129,0.38));
  box-shadow:0 4px 20px var(--com-shadow, rgba(16,185,129,0.20));
}
.prayer-banner--sod .prayer-banner-glow-right{ background:radial-gradient(circle,var(--com-glow, rgba(16,185,129,0.22)) 0%,transparent 70%); }
.prayer-banner--sod .prayer-banner-emoji{ filter:drop-shadow(0 0 8px var(--com-emoji-glow, rgba(16,185,129,0.6))); }
.prayer-banner--sod .prayer-banner-types{ color:var(--com-types, #6ee7b7); }
.prayer-banner--sod .prayer-banner-quote{ color:var(--com-quote, #a7f3d0); }
.prayer-banner--sod .prayer-banner-tap-indicator{ border-color:var(--com-tap-border, rgba(110,231,183,0.45)); background:var(--com-tap-bg, rgba(5,150,105,0.22)); color:var(--com-tap-text, #d1fae5); }
/* Gama de Comunidad por comité (la del tema): jóvenes (azul cielo) y mujeres (rosa suave).
   El banner es oscuro con tinte del comité; los textos van en tonos claros para leerse bien. */
body.seccion-jovenes{
  --com-grad:linear-gradient(135deg,#06283d 0%,#075985 55%,#0ea5e9 100%);
  --com-border:rgba(14,165,233,0.40);--com-shadow:rgba(14,165,233,0.22);
  --com-glow:rgba(14,165,233,0.24);--com-emoji-glow:rgba(14,165,233,0.6);
  --com-types:#7dd3fc;--com-quote:#bae6fd;
  --com-tap-border:rgba(125,211,252,0.5);--com-tap-bg:rgba(2,132,199,0.22);--com-tap-text:#e0f2fe;
}
body.seccion-misiones{
  --com-grad:linear-gradient(135deg,#2a1505 0%,#7c2d12 55%,#f59e0b 100%);
  --com-border:rgba(245,158,11,0.40);--com-shadow:rgba(245,158,11,0.22);
  --com-glow:rgba(245,158,11,0.24);--com-emoji-glow:rgba(245,158,11,0.6);
  --com-types:#fcd34d;--com-quote:#fde68a;
  --com-tap-border:rgba(252,211,77,0.5);--com-tap-bg:rgba(217,119,6,0.22);--com-tap-text:#fffbeb;
}
body.seccion-alabanza{
  --com-grad:linear-gradient(135deg,#1e1135 0%,#4c1d95 55%,#8b5cf6 100%);
  --com-border:rgba(139,92,246,0.40);--com-shadow:rgba(139,92,246,0.22);
  --com-glow:rgba(139,92,246,0.24);--com-emoji-glow:rgba(139,92,246,0.6);
  --com-types:#c4b5fd;--com-quote:#ddd6fe;
  --com-tap-border:rgba(196,181,253,0.5);--com-tap-bg:rgba(124,58,237,0.22);--com-tap-text:#ede9fe;
}
body.seccion-recepcion{
  --com-grad:linear-gradient(135deg,#06231a 0%,#065f46 55%,#10b981 100%);
  --com-border:rgba(16,185,129,0.40);--com-shadow:rgba(16,185,129,0.22);
  --com-glow:rgba(16,185,129,0.24);--com-emoji-glow:rgba(16,185,129,0.6);
  --com-types:#6ee7b7;--com-quote:#a7f3d0;
  --com-tap-border:rgba(110,231,183,0.5);--com-tap-bg:rgba(5,150,105,0.22);--com-tap-text:#d1fae5;
}
body.seccion-comunicaciones{
  --com-grad:linear-gradient(135deg,#14133a 0%,#3730a3 55%,#6366f1 100%);
  --com-border:rgba(99,102,241,0.40);--com-shadow:rgba(99,102,241,0.22);
  --com-glow:rgba(99,102,241,0.24);--com-emoji-glow:rgba(99,102,241,0.6);
  --com-types:#a5b4fc;--com-quote:#c7d2fe;
  --com-tap-border:rgba(165,180,252,0.5);--com-tap-bg:rgba(79,70,229,0.22);--com-tap-text:#e0e7ff;
}
body.seccion-obrasocial{
  --com-grad:linear-gradient(135deg,#2a0511 0%,#9f1239 55%,#f43f5e 100%);
  --com-border:rgba(244,63,94,0.40);--com-shadow:rgba(244,63,94,0.22);
  --com-glow:rgba(244,63,94,0.24);--com-emoji-glow:rgba(244,63,94,0.6);
  --com-types:#fda4af;--com-quote:#fecdd3;
  --com-tap-border:rgba(253,164,175,0.5);--com-tap-bg:rgba(190,18,60,0.22);--com-tap-text:#ffe4e6;
}
body.seccion-intercesion{
  --com-grad:linear-gradient(135deg,#04211f 0%,#115e59 55%,#0d9488 100%);
  --com-border:rgba(13,148,136,0.40);--com-shadow:rgba(13,148,136,0.22);
  --com-glow:rgba(13,148,136,0.24);--com-emoji-glow:rgba(13,148,136,0.6);
  --com-types:#5eead4;--com-quote:#99f6e4;
  --com-tap-border:rgba(94,234,212,0.5);--com-tap-bg:rgba(15,118,110,0.22);--com-tap-text:#ccfbf1;
}
body.seccion-mantenimiento{
  --com-grad:linear-gradient(135deg,#0b1220 0%,#334155 55%,#64748b 100%);
  --com-border:rgba(100,116,139,0.40);--com-shadow:rgba(100,116,139,0.22);
  --com-glow:rgba(100,116,139,0.24);--com-emoji-glow:rgba(100,116,139,0.6);
  --com-types:#cbd5e1;--com-quote:#e2e8f0;
  --com-tap-border:rgba(203,213,225,0.5);--com-tap-bg:rgba(71,85,105,0.22);--com-tap-text:#f1f5f9;
}
body.seccion-limpieza{
  --com-grad:linear-gradient(135deg,#052e16 0%,#15803d 55%,#22c55e 100%);
  --com-border:rgba(34,197,94,0.40);--com-shadow:rgba(34,197,94,0.22);
  --com-glow:rgba(34,197,94,0.24);--com-emoji-glow:rgba(34,197,94,0.6);
  --com-types:#86efac;--com-quote:#bbf7d0;
  --com-tap-border:rgba(134,239,172,0.5);--com-tap-bg:rgba(21,128,61,0.22);--com-tap-text:#dcfce7;
}
body.seccion-mujeres{
  --com-grad:linear-gradient(135deg,#2a0a1a 0%,#9d174d 55%,#ec4899 100%);
  --com-border:rgba(236,72,153,0.40);--com-shadow:rgba(236,72,153,0.22);
  --com-glow:rgba(236,72,153,0.24);--com-emoji-glow:rgba(236,72,153,0.6);
  --com-types:#f9a8d4;--com-quote:#fbcfe8;
  --com-tap-border:rgba(249,168,212,0.5);--com-tap-bg:rgba(190,24,93,0.22);--com-tap-text:#fce7f3;
}
body.seccion-escuela{
  --com-grad:linear-gradient(135deg,#1f1228 0%,#4a2545 55%,#b56fae 100%);
  --com-border:rgba(181,111,174,0.40);--com-shadow:rgba(181,111,174,0.22);
  --com-glow:rgba(181,111,174,0.24);--com-emoji-glow:rgba(181,111,174,0.6);
  --com-types:#e3c4e6;--com-quote:#f0ddf0;
  --com-tap-border:rgba(230,179,222,0.5);--com-tap-bg:rgba(181,111,174,0.22);--com-tap-text:#f5e6f3;
}
.prayer-banner--sod .prayer-banner-main{ padding-right:0; }
.prayer-banner-timer{
  position:absolute;
  top:2px;
  right:0;
  flex-shrink:0;
  text-align:center;
  z-index:2;
}
.prayer-timer-badge{
  background:linear-gradient(160deg,rgba(30,41,59,0.82),rgba(51,65,85,0.78));
  border:1px solid rgba(148,163,184,0.42);
  border-radius:12px;
  padding:5px 8px;
  min-width:74px;
  max-width:80px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 6px 14px rgba(15,23,42,0.28);
  transition:transform 120ms ease, box-shadow 120ms ease, background 180ms ease, border-color 180ms ease;
  cursor:pointer;
  user-select:none;
}
.prayer-timer-badge:active{
  transform:translateY(1px) scale(0.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 3px 8px rgba(15,23,42,0.22);
}
.prayer-timer-display{
  font-family:'Montserrat',sans-serif;
  font-size:15px;
  font-weight:800;
  color:#e2e8f0;
  letter-spacing:0.4px;
  line-height:1.05;
}
.prayer-timer-label{
  font-size:8px;
  color:rgba(226,232,240,0.82);
  letter-spacing:0.7px;
  margin-top:2px;
  font-weight:700;
}
.prayer-timer-badge.running{
  background:linear-gradient(160deg,rgba(109,40,217,0.92),rgba(37,99,235,0.85));
  border-color:rgba(191,219,254,0.48);
}
.prayer-timer-badge.paused{
  background:linear-gradient(160deg,rgba(30,64,175,0.9),rgba(71,85,105,0.85));
  border-color:rgba(147,197,253,0.52);
}
.prayer-timer-badge.completed{
  background:linear-gradient(160deg,rgba(22,163,74,0.92),rgba(21,128,61,0.86));
  border-color:rgba(134,239,172,0.58);
}
@keyframes prayerTapHintPulse{
  0%,100%{opacity:0.78;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-1px);}
}

/* ── PV: INFORME EN PDF CTA ── */

.pv-report-cta{
  margin-top:24px;
  padding:16px;
  background:linear-gradient(135deg,rgba(58,171,186,0.08),rgba(58,171,186,0.15));
  border-radius:14px;
  border:1.5px solid rgba(58,171,186,0.25);
}
.pv-report-cta-title{
  font-family:Montserrat,sans-serif;
  font-size:12px;
  font-weight:800;
  color:var(--dark);
  margin-bottom:8px;
}
.pv-report-cta-text{
  font-size:11px;
  color:#6b7280;
  margin-bottom:12px;
  line-height:1.5;
}
.pv-report-cta-btn{
  width:100%;
  padding:12px 16px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:white;
  border:none;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:Montserrat,sans-serif;
  box-shadow:0 3px 12px rgba(58,171,186,0.3);
}

/* ── Mejora de interacción global ── */

.panel:hover{
  box-shadow:0 4px 16px rgba(15,23,42,0.12);
  transform:translateY(-1px);
  transition:box-shadow .18s ease,transform .18s ease;
}

.pet-anon-toggle:hover{
  border-color:#8b5cf6;
  box-shadow:0 0 0 1px rgba(139,92,246,0.22);
}

.pv-report-cta-btn:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}

.prayer-banner:hover{
  box-shadow:0 6px 24px rgba(15,23,42,0.45);
}

.toast{
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  left:50%;
  transform:translateX(-50%);
  width:min(92vw,760px);
  max-height:48vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:11px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  font-family:'Montserrat',sans-serif;
  letter-spacing:0.3px;
  z-index:9999;
  pointer-events:auto;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
  animation:toast-in .3s ease;
}
.toast::-webkit-scrollbar{width:6px;height:6px;}
.toast::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.45);border-radius:8px;}
.toast.long{font-size:12.5px;}

/* ── TABLAS DE RANKING (Desafío, Forjados, Evaluaciones) ── */
.ranking-table-wrapper {
  max-height: 380px; /* Suficiente para aprox 10 filas */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  /* Anteriormente con `content-visibility:auto`. Lo retiramos por
   * consistencia con el resto: hacía que las filas inferiores se
   * "pintaran" visiblemente al scrollear dentro de la tabla. Con
   * solo ~44 filas no compensa el coste perceptivo. */
  /* Anteriormente con `content-visibility:auto`. Lo retiramos por
   * consistencia con el resto: hacía que las filas inferiores se
   * "pintaran" visiblemente al scrollear dentro de la tabla. Con
   * solo ~44 filas no compensa el coste perceptivo. */
  /* [2026-07-14] El scroll fino con inercia se logra SIN tocar este scroller (un transform aquí mata
   * el momentum de iOS) y SIN cambiar el diseño: se promueve a capa GPU la TARJETA con degradado
   * (.ranking-grad-card) para que el degradado se cachee y el scroller componga sobre esa capa. */
  contain: layout style;
}
.ranking-scroll-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  line-height:1;
  color:inherit;
  opacity:.6;
  user-select:none;
  pointer-events:none;
  flex:0 0 auto;
  margin-left:4px;
}
.ranking-scroll-icon--forjados{
  color:inherit;
}
.ranking-scroll-icon--eval{
  color:inherit;
}
.eval-rank-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.eval-rank-filter-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:190px;
  margin-left:auto;
}
.eval-rank-filter-kicker{
  font-size:10px;
  letter-spacing:.35px;
  text-transform:uppercase;
  font-weight:800;
  color:#0e7490;
  opacity:.9;
}
.eval-rank-filter{
  width:100%;
  border:1px solid rgba(14,116,144,0.28);
  border-radius:10px;
  background:linear-gradient(135deg,#ffffff 0%,#f0f9ff 100%);
  color:#0f172a;
  font-size:12px;
  font-weight:700;
  padding:8px 32px 8px 10px;
  line-height:1.2;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#0e7490 50%),linear-gradient(135deg,#0e7490 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% - 2px),calc(100% - 9px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.eval-rank-filter:hover{
  border-color:rgba(14,116,144,0.45);
}
.eval-rank-filter:focus{
  border-color:#0891b2;
  box-shadow:0 0 0 3px rgba(8,145,178,0.17);
}
.ranking-table-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
  display:none;
}
.ranking-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.ranking-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 10px;
}
.ranking-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.6);
}
@media (max-width:640px){
  .toast{
    width:calc(100vw - 14px);
    max-height:56vh;
    padding:12px;
    border-radius:12px;
    letter-spacing:0.1px;
  }
  .eval-rank-filter-wrap{
    min-width:100%;
  }
}
/* ── DESAFÍO MILLONARIO (trivia) ── */
.juego-mill-wrap{
  background:linear-gradient(160deg,#f8fafc 0%,#f1f5f9 50%,#e2e8f0 100%);
  border-radius:18px;
  padding:18px 16px 20px;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(30,41,59,0.08);
  box-shadow:0 4px 24px rgba(15,23,42,0.08),0 1px 3px rgba(0,0,0,0.04);
  position:relative;
  overflow:hidden;
}
.juego-mill-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal2) 55%,var(--gold) 100%);
  border-radius:18px 18px 0 0;
}
.juego-mill-progress{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text3);
}
.juego-mill-progress .score{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--teal-bg);
  border:1px solid var(--border2);
  color:var(--teal2);
  font-size:11px;
  letter-spacing:.3px;
  text-transform:none;
}
.juego-mill-bar{
  height:6px;
  background:rgba(30,41,59,0.08);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
  margin-bottom:18px;
}
.juego-mill-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--teal),var(--teal2),var(--gold));
  border-radius:999px;
  transition:width .35s ease;
}
.juego-mill-pregunta{
  position:relative;
  font-size:16px;
  font-weight:800;
  color:var(--dark);
  line-height:1.45;
  margin:6px 0 14px;
  padding:14px 16px;
  font-family:'Montserrat',sans-serif;
  background:#ffffff;
  border:1px solid var(--border);
  border-left:3px solid var(--teal);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(29,107,119,0.08);
}
.juego-mill-opciones{
  display:flex;
  flex-direction:column;
  gap:10px;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
}
.juego-mill-op{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:12px 14px 12px 10px;
  margin:0;
  border:2px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  font-size:14px;
  line-height:1.35;
  color:var(--text);
  cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  -webkit-tap-highlight-color:transparent;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.juego-mill-op::before{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--teal-bg);
  border:1px solid var(--border2);
  color:var(--teal2);
  font-size:13px;
  font-weight:900;
  letter-spacing:.5px;
  font-family:'Montserrat',sans-serif;
  box-shadow:0 1px 2px rgba(29,107,119,0.10);
}
.juego-mill-op[data-i="0"]::before{content:'A';}
.juego-mill-op[data-i="1"]::before{content:'B';}
.juego-mill-op[data-i="2"]::before{content:'C';}
.juego-mill-op[data-i="3"]::before{content:'D';}
.juego-mill-op[data-i="4"]::before{content:'E';}
.juego-mill-op[data-i="5"]::before{content:'F';}
.juego-mill-op:active:not([aria-disabled="true"]){
  -webkit-tap-highlight-color:transparent;
  transform:scale(0.985);
  background:var(--teal-bg);
  border-color:var(--border2);
}
@media (hover: hover) and (pointer: fine){
  .juego-mill-op:hover:not(:disabled):not([aria-disabled="true"]){
    border-color:var(--teal);
    background:rgba(58,171,186,0.06);
    box-shadow:0 2px 8px rgba(29,107,119,0.14);
  }
  .juego-mill-op:hover:not(:disabled):not([aria-disabled="true"])::before{
    background:rgba(58,171,186,0.18);
    border-color:var(--teal);
    color:var(--teal3);
  }
}
.juego-mill-op:focus,
.juego-mill-op:focus-visible{
  outline:none;
  border-color:#e2e8f0;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.juego-mill-op[aria-disabled="true"]{cursor:default;}
.juego-mill-result{
  background:linear-gradient(160deg,#f0fdf4 0%,#dcfce7 100%);
  border-radius:18px;
  padding:24px 22px;
  border:1px solid rgba(34,197,94,0.2);
  box-shadow:0 4px 24px rgba(15,23,42,0.06);
}
.juego-mill-result h3{
  font-family:'Montserrat',sans-serif;
  font-size:18px;
  font-weight:800;
  color:var(--dark);
  margin-bottom:12px;
}
.juego-mill-result .score-line{
  font-size:20px;
  font-weight:800;
  color:var(--green);
  margin-bottom:8px;
}
.juego-mill-result .hint{
  font-size:12px;
  color:var(--text2);
  margin-top:14px;
  line-height:1.5;
}
/* ── Result compacto (éxito y fallo del desafío) ── */
.juego-mill-result--compact{
  text-align:center;
  padding:18px 18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;
  box-sizing:border-box;
  max-height:min(68vh,560px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.juego-mill-result--compact .juego-mill-result-ico{
  font-size:34px;line-height:1;margin-bottom:2px;
  filter:drop-shadow(0 2px 6px rgba(29,107,119,0.22));
}
.juego-mill-result--compact h3{
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;
  color:var(--dark);margin:0 0 2px;letter-spacing:.3px;
}
.juego-mill-result--compact .score-line{
  font-family:'Montserrat',sans-serif;font-size:30px;font-weight:900;
  color:var(--teal3);margin:2px 0 4px;line-height:1;letter-spacing:.5px;
}
.juego-mill-result--compact .score-line .score-sep{
  color:var(--text3);font-weight:700;margin:0 2px;
}
.juego-mill-result--compact.juego-mill-result--pleno .score-line{
  color:var(--gold2);
  text-shadow:0 1px 0 rgba(245,197,24,0.18);
}
.juego-mill-result--fail{
  background:linear-gradient(160deg,#fff7ed 0%,#fee2e2 100%);
  border:1px solid rgba(239,68,68,0.22);
}
.juego-mill-result--fail h3{color:#991b1b;}
.juego-mill-result--fail .score-line{color:#b91c1c;}
.juego-mill-result-meta{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:4px 0 2px;font-size:12.5px;color:var(--text2);
}
.juego-mill-result-meta span{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,0.7);border:1px solid var(--border);
}
.juego-mill-result-meta span .k{color:var(--text3);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;}
.juego-mill-result-meta span strong{color:var(--dark);font-weight:800;}
.juego-mill-result-q{
  width:100%;margin-top:6px;padding:10px 12px;
  background:rgba(255,255,255,0.75);border:1px solid var(--border);
  border-radius:10px;text-align:left;
  font-size:12.5px;color:var(--text);line-height:1.45;
  display:flex;flex-direction:column;gap:3px;
}
.juego-mill-result-q-lbl{
  font-size:10px;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:.6px;
}
.juego-mill-result-q-txt{color:var(--text);font-weight:600;}
.juego-mill-result-ok{
  width:100%;padding:10px 12px;
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  border:1px solid rgba(34,197,94,0.35);border-radius:10px;
  text-align:left;font-size:13px;color:#166534;
  display:flex;flex-direction:column;gap:3px;
}
.juego-mill-result-ok-lbl{
  font-size:10px;font-weight:800;color:#15803d;
  text-transform:uppercase;letter-spacing:.6px;
}
.juego-mill-result-ok strong{color:#14532d;font-weight:800;}
.juego-mill-result-foot{
  margin-top:4px;font-size:11.5px;color:var(--text3);font-weight:600;
}
/* En la pantalla completa el close button queda pegado al resultado sin margen extra */
.juego-mill-fs-body .juego-mill-result--compact,
#pv-desafio-juego-interno .juego-mill-result--compact{
  margin-bottom:0;
  padding:18px 18px 16px;
  background:linear-gradient(160deg,#f0fdf4 0%,#dcfce7 100%);
  border:1px solid rgba(34,197,94,0.2);border-radius:18px;
  box-shadow:0 4px 18px rgba(15,23,42,0.06);
}
.juego-mill-fs-body .juego-mill-result--compact{
  max-height:none;
  overflow:visible;
}
@media (min-width: 769px){
  .juego-mill-result--compact{
    max-height:none;
    overflow-y:visible;
  }
  .juego-mill-fs-body .juego-mill-result--compact{
    max-height:none;
  }
}
.juego-mill-fs-body .juego-mill-result--fail,
#pv-desafio-juego-interno .juego-mill-result--fail{
  background:linear-gradient(160deg,#fff7ed 0%,#fee2e2 100%);
  border:1px solid rgba(239,68,68,0.22);
}
.juego-mill-fail-msg{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#fef2f2;
  border:1px solid #fecaca;
  font-size:13px;
  color:#b91c1c;
  font-weight:700;
}
.juego-mill-reintentar{
  margin-top:14px;
  width:100%;
  padding:14px 16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(58,171,186,0.35);
  transition:transform .2s,box-shadow .2s;
}
.juego-mill-reintentar:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(58,171,186,0.45);
}
.juego-mill-aviso{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#fffbeb;
  border:1px solid #fcd34d;
  font-size:13px;
  color:#92400e;
  line-height:1.45;
}
/* ── Bloque de inicio del desafío (reglas + botón) ── */
.juego-mill-inicio{
  padding:4px 2px 0;
  font-family:'Lato',sans-serif;
  color:var(--text);
}
.juego-mill-inicio-hero{
  text-align:center;
  padding:10px 8px 14px;
}
.juego-mill-inicio-ico{font-size:38px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 2px 6px rgba(29,107,119,0.28));}
.juego-mill-inicio-t{
  font-family:'Montserrat',sans-serif;
  font-size:20px;font-weight:900;color:var(--dark);letter-spacing:.4px;
  background:linear-gradient(135deg,var(--dark) 0%,var(--teal3) 55%,var(--teal) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-transform:uppercase;
}
.juego-mill-inicio-s{font-size:12px;color:var(--text2);margin-top:6px;font-weight:700;letter-spacing:.2px;}
.juego-mill-rules{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,var(--teal-bg) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  margin:6px 0 14px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(29,107,119,0.08);
}
.juego-mill-rules::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal2) 55%,var(--gold) 100%);
}
.juego-mill-rules-sum{
  display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;
  cursor:pointer;list-style:none;outline:none;
  font-family:'Montserrat',sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.juego-mill-rules-sum::-webkit-details-marker{display:none;}
.juego-mill-rules-sum::marker{content:'';}
.juego-mill-rules-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;border-radius:10px;font-size:17px;line-height:1;
  background:linear-gradient(135deg,var(--teal-bg),rgba(245,197,24,0.14));
  border:1px solid var(--border2);
}
.juego-mill-rules-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.juego-mill-rules-copy strong{color:var(--teal3);font-size:13.5px;font-weight:800;letter-spacing:.2px;}
.juego-mill-rules-hint{font-size:10px;color:var(--gold2);font-weight:800;letter-spacing:.6px;text-transform:uppercase;}
.juego-mill-rules-title-open,
.juego-mill-rules-hint-open{display:none;}
.juego-mill-rules[open] .juego-mill-rules-title-closed,
.juego-mill-rules[open] .juego-mill-rules-hint-closed{display:none;}
.juego-mill-rules[open] .juego-mill-rules-title-open,
.juego-mill-rules[open] .juego-mill-rules-hint-open{display:inline;}
.juego-mill-rules-chev{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--teal-bg);color:var(--teal2);font-size:12px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .22s ease;
}
.juego-mill-rules[open] .juego-mill-rules-chev{transform:rotate(180deg);}
.juego-mill-rules:not([open]) .juego-mill-rules-chev{animation:rulesNudgeMill 2.6s ease-in-out 1s 6;}
@keyframes rulesNudgeMill{0%,70%,100%{transform:translateY(0);}80%{transform:translateY(2px);}90%{transform:translateY(-1px);}}
.juego-mill-rules-body{
  padding:4px 14px 14px 18px;
  border-top:1px dashed var(--border);
  font-family:'Lato',sans-serif;
}
.juego-mill-rules-sec{margin-top:10px;}
.juego-mill-rules-sec:first-child{margin-top:6px;}
.juego-mill-rules-sec-t{
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--teal3);margin-bottom:5px;
}
.juego-mill-rules-body ul{margin:0;padding:0 0 0 18px;}
.juego-mill-rules-body li{font-size:12.5px;color:var(--text);line-height:1.5;margin-bottom:5px;font-weight:500;}
.juego-mill-rules-body li strong{color:var(--dark);font-weight:800;}
.juego-mill-rules-ayudas{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px;}
.juego-mill-rules-ayudas li{
  display:flex;align-items:flex-start;gap:10px;padding:8px 10px;
  background:#fff;border:1px solid rgba(15,23,42,0.06);border-radius:10px;margin:0;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);font-size:12.5px;line-height:1.45;
}
.juego-mill-rules-ayudas .ayuda-icon{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;font-size:15px;line-height:1;
}
.juego-mill-rules-ayudas .ayuda-icon--5050{background:linear-gradient(135deg,var(--teal-bg),rgba(58,171,186,0.22));color:var(--teal3);border:1px solid var(--border2);}
.juego-mill-rules-ayudas .ayuda-icon--call{background:linear-gradient(135deg,var(--gold-bg),rgba(245,197,24,0.22));color:var(--gold2);border:1px solid rgba(212,168,0,0.40);}
.juego-mill-rules-ayudas .ayuda-icon--ask{background:linear-gradient(135deg,rgba(26,31,46,0.08),rgba(36,43,61,0.12));color:var(--dark);border:1px solid rgba(26,31,46,0.22);}
.juego-mill-rules-tip{
  margin-top:10px;font-size:11px;color:var(--text3);font-weight:700;
  background:var(--teal-bg);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;line-height:1.45;
}
.juego-mill-start-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 16px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--dark) 0%,var(--teal3) 55%,var(--teal) 100%);
  color:#fff;font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:800;letter-spacing:.8px;
  box-shadow:0 3px 10px rgba(29,107,119,0.20),0 1px 0 rgba(255,255,255,0.18) inset;
  transition:transform .18s ease,box-shadow .18s ease,opacity .15s;
  text-transform:uppercase;
}
.juego-mill-start-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(29,107,119,0.28),0 1px 0 rgba(255,255,255,0.18) inset;}
.juego-mill-start-btn:active:not(:disabled){transform:translateY(0);}
.juego-mill-start-btn:disabled{cursor:not-allowed;}
.juego-mill-start-ico{font-size:16px;line-height:1;}
.juego-mill-start-warn{
  margin-top:10px;text-align:center;font-size:11px;color:var(--text3);font-weight:600;line-height:1.4;
  padding:0 8px;
}

/* ── Overlay fullscreen del desafío ── */
body.juego-mill-fs-open{overflow:hidden!important;}
.juego-mill-fs{
  position:fixed;top:0;left:0;z-index:9999;
  width:100%;height:100vh;height:100dvh;max-height:100dvh;
  background:radial-gradient(ellipse at 50% 0%,rgba(58,171,186,0.14) 0%,transparent 45%),
             radial-gradient(ellipse at 50% 100%,rgba(245,197,24,0.10) 0%,transparent 45%),
             var(--off);
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  display:flex;flex-direction:column;align-items:stretch;
  font-family:'Lato',sans-serif;
  animation:fsIn .22s cubic-bezier(.2,.8,.2,1);
  box-sizing:border-box;
}
@keyframes fsIn{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:scale(1);}}
.juego-mill-fs-card{
  flex:1;min-height:0;display:flex;flex-direction:column;
  width:100%;max-width:640px;margin:0 auto;
  background:transparent;
}
.juego-mill-fs-hd{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:8px 16px 7px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,0.99) 0%,rgba(244,247,250,0.99) 100%);
  position:relative;
}
.juego-mill-fs-hd::after{
  content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(58,171,186,0.55) 30%,rgba(45,143,156,0.55) 55%,rgba(245,197,24,0.55) 80%,transparent 100%);
  border-radius:2px;pointer-events:none;
}
.juego-mill-fs-hd-ico{font-size:22px;line-height:1;filter:drop-shadow(0 2px 4px rgba(29,107,119,0.28));}
.juego-mill-fs-hd-t{
  flex:1;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;
  background:linear-gradient(135deg,var(--dark) 0%,var(--teal3) 55%,var(--teal) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.3px;
}
.juego-mill-fs-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px max(18px, env(safe-area-inset-bottom, 0px));
}
.juego-mill-fs-close{
  position:relative;
  left:auto;
  transform:none;
  bottom:auto;
  z-index:12;
  display:block;
  width:100%;
  margin-top:0;
  padding:14px 16px;
  border:none;border-radius:0 0 14px 14px;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(29,107,119,0.38);
  transition:transform .18s ease,box-shadow .18s ease;
  opacity:1;
}
.juego-mill-fs-close:hover{transform:none;box-shadow:0 10px 24px rgba(29,107,119,0.48);}
.juego-mill-fs-close:active{transform:translateY(0);}

/* Botón fijo “Reportar” en desafío diario (fullscreen) */
.juego-mill-report-fab{
  position:fixed;
  right:max(6px, env(safe-area-inset-right));
  bottom:max(6px, env(safe-area-inset-bottom));
  z-index:10050;
  display:none;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(234,88,12,0.45);
  background:rgba(255,255,255,0.96);
  box-shadow:0 4px 14px rgba(15,23,42,0.12);
  font-family:'Montserrat',sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:#c2410c;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.juego-mill-report-fab--on{
  border-color:rgba(34,197,94,0.55);
  color:#15803d;
  background:rgba(220,252,231,0.96);
}
.juego-mill-report-fab-ico{font-size:11px;line-height:1;}
.juego-mill-report-fab-badge{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#ea580c;
  color:#fff;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

/* Resumen de lo marcado para reportar (pantalla final desafío) */
.juego-mill-rep-wrap{
  width:100%;
  margin-top:12px;
  padding:12px 12px 14px;
  border-radius:12px;
  background:rgba(255,247,237,0.95);
  border:1px solid rgba(251,146,60,0.35);
  text-align:left;
}
.juego-mill-rep-ttl{
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#c2410c;
  margin-bottom:8px;
}
.juego-mill-rep-item{
  display:flex;
  gap:10px;
  padding:8px 0;
  border-top:1px dashed rgba(148,163,184,0.45);
  font-size:12.5px;
  line-height:1.45;
  color:var(--text);
}
.juego-mill-rep-item:first-of-type{border-top:none;padding-top:0;}
.juego-mill-rep-item-n{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(234,88,12,0.12);
  color:#9a3412;
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.juego-mill-rep-item-body{min-width:0;}
.juego-mill-rep-item-q{font-weight:600;}
.juego-mill-rep-lbl{
  display:block;
  margin-top:10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text3);
}
.juego-mill-rep-ta{
  width:100%;
  margin-top:6px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:12px;
  font-family:'Lato',sans-serif;
  resize:vertical;
  min-height:64px;
  background:#fff;
}
.juego-mill-rep-send{
  margin-top:10px;
  width:100%;
  padding:11px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
  background:linear-gradient(135deg,#fb923c,#ea580c);
  color:#fff;
  box-shadow:0 4px 14px rgba(234,88,12,0.35);
}
.juego-mill-rep-send:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* En fullscreen el juego-mill-wrap ya no necesita su propio contenedor */
.juego-mill-fs-body .juego-mill-wrap{
  background:transparent;border:none;box-shadow:none;padding:0;margin:0;border-radius:0;
}
.juego-mill-fs-body .juego-mill-wrap::before{display:none;}

/* Enseñanza + ranking en resultado del millonario */
.juego-mill-teach{
  margin-top:12px;padding:12px 12px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(29,107,119,0.07),rgba(58,171,186,0.05));
  border:1px solid rgba(45,143,156,0.22);
  text-align:left;
}
.juego-mill-teach-ttl{
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal3);margin-bottom:8px;
}
.juego-mill-teach-ref,.juego-mill-teach-ex{
  display:flex;flex-direction:column;gap:4px;margin-bottom:8px;font-size:12px;line-height:1.45;color:var(--text2);
}
.juego-mill-teach-ref .lbl,.juego-mill-teach-ex .lbl{
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
}
.juego-mill-teach-hint{
  margin:0;font-size:11px;color:var(--text2);line-height:1.45;font-weight:600;
}
.juego-mill-result-meta--fail{
  justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.hdv-rank-delta-box{
  margin-top:12px;padding:12px 12px;border-radius:12px;
  background:rgba(15,23,42,0.04);border:1px solid rgba(30,41,59,0.12);
  display:flex;flex-direction:column;gap:4px;text-align:center;
}
.hdv-rank-delta-k{
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);
}
.hdv-rank-delta-pos{
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:900;color:var(--teal3);
}
.hdv-rank-delta-txt{font-size:12px;color:var(--text2);font-weight:600;line-height:1.35;}
.juego-mill-result--fail .hdv-rank-delta-pos{color:var(--teal3);}

/* Forjados: overlay en body (mismo patrón que .juego-mill-fs) — el nodo #forjados-native-pv se mueve aquí */
body.forjados-fs-open{overflow:hidden!important;}
.forjados-app-fs{
  position:fixed;top:0;left:0;z-index:9999;
  width:100%;height:100vh;height:100dvh;max-height:100dvh;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,131,10,0.14) 0%,transparent 45%),
             radial-gradient(ellipse at 50% 100%,rgba(45,143,156,0.10) 0%,transparent 45%),
             var(--off);
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  display:flex;flex-direction:column;align-items:stretch;
  box-sizing:border-box;
}
.forjados-app-fs-card{
  flex:1;display:flex;flex-direction:column;
  width:100%;max-width:720px;margin:0 auto;
  min-height:0;
  background:transparent;
}
/* Solo minijuego: sin segunda cabecera Caballeros encima del embed */
.forjados-app-fs-card--mini .forjados-app-fs-body{
  padding-top:max(10px,env(safe-area-inset-top,0px));
}
.forjados-app-fs-hd{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(180,83,9,0.22);
  background:linear-gradient(180deg,rgba(255,253,245,0.99) 0%,rgba(254,243,199,0.85) 100%);
  position:relative;
}
.forjados-app-fs-hd::after{
  content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(217,119,6,0.45) 35%,rgba(45,143,156,0.45) 65%,transparent 100%);
  border-radius:2px;pointer-events:none;
}
.forjados-app-fs-hd-ico{font-size:22px;line-height:1;}
.forjados-app-fs-hd-t{
  flex:1;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;
  background:linear-gradient(135deg,#92400e 0%,#b45309 55%,var(--teal3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.3px;
}
.forjados-app-fs-hd-lock{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:13px;
  background:rgba(217,119,6,0.12);color:#b45309;border:1px solid rgba(217,119,6,0.28);
  font-weight:900;
}
.forjados-app-fs-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:max(4px,env(safe-area-inset-top,0)) max(8px,env(safe-area-inset-right,0)) max(8px,env(safe-area-inset-bottom,0)) max(8px,env(safe-area-inset-left,0));
}
.forjados-app-fs-body #forjados-native-pv.forjados-native-root{
  width:100%!important;
  max-width:640px!important;
  margin:0 auto!important;
  min-height:min(100%,100dvh);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}
.forjados-app-fs-body #forjados-native-pv .w{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.forjados-app-fs-body #forjados-native-pv .w.w-game{
  justify-content:center;
}
body.forjados-fs-open #forjados-native-pv .page.page--game.page--prestart{
  flex:1;
  min-height:0;
  justify-content:center;
}
body.forjados-fs-open #forjados-native-pv .minijuego-prestart-shell{
  width:100%;
  justify-content:center;
}
.forjados-app-fs-body #forjados-native-pv .page{
  width:100%;
  max-width:640px;
  margin:0 auto;
  box-sizing:border-box;
}
/* Minijuego Empareja en overlay: más aire en pantalla y tipografía grande (−3 pt en los cuadros). */
body.forjados-fs-open #forjados-native-pv .game-board--empareja .em-chip{
  font-size:calc(clamp(14px,min(4.4vmin,5.5vh),34px) - 3pt);
}
body.forjados-fs-open #forjados-native-pv .game-board--empareja .em-col-lbl{
  font-size:clamp(11px,min(2.8vmin,4vh),17px);
}
body.forjados-fs-open #forjados-native-pv .page.page--playing.page--empareja{
  overflow:hidden;
  max-height:100%;
}
body.forjados-fs-open .forjados-app-fs-body:has(#forjados-native-pv .page--empareja){
  overflow:hidden;
}
body.forjados-fs-open.forjados-empareja-fs-lock .forjados-app-fs-body{
  overflow:hidden;
}
.hdv-forjados-rank-inject{margin-top:10px;}

/* Forjados embed: aviso «no perfecto» + repaso + CTA (override estilos del bundle) */
#forjados-native-pv .mismatch-box{
  background:linear-gradient(155deg,rgba(69,10,10,0.97) 0%,rgba(127,29,29,0.92) 42%,rgba(30,27,26,0.94) 100%);
  border:1px solid rgba(252,165,165,0.45);
  box-shadow:
    0 10px 32px rgba(69,10,10,0.42),
    inset 0 1px 0 rgba(255,255,255,0.07);
  color:#fecaca;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.5;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
}
#forjados-native-pv .mismatch-box strong,
#forjados-native-pv .mismatch-box b{
  color:#fff7ed;
  font-weight:900;
}
#forjados-native-pv .review-section{
  margin-top:20px;
  padding:14px 12px 16px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,253,245,0.92) 0%,rgba(254,243,199,0.22) 100%);
  border:1px solid rgba(180,83,9,0.22);
  box-shadow:0 6px 22px rgba(180,83,9,0.08);
}
#forjados-native-pv .review-title{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#9a3412;
  text-align:center;
  margin:0 0 12px;
}
#forjados-native-pv .review-item{
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(217,119,6,0.28);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
  box-shadow:0 2px 10px rgba(15,23,42,0.05);
}
#forjados-native-pv .review-item:last-child{margin-bottom:0;}
#forjados-native-pv .review-item-wrong{
  font-size:14px;
  color:#991b1b;
  font-weight:800;
  margin-bottom:6px;
  line-height:1.35;
}
#forjados-native-pv .review-item-right{
  font-size:13px;
  color:#0f766e;
  font-weight:800;
  letter-spacing:.02em;
}
#forjados-native-pv .review-item-ref{
  font-size:11px;
  color:#64748b;
  margin-top:6px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
}
#forjados-native-pv .btn-ghost{
  margin-top:10px;
  width:100%;
  padding:14px 16px;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  border-radius:12px;
  border:1px solid rgba(45,143,156,0.42);
  background:linear-gradient(135deg,rgba(45,143,156,0.14) 0%,rgba(217,119,6,0.12) 100%);
  color:#0f766e;
  box-shadow:0 4px 16px rgba(45,143,156,0.14);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
#forjados-native-pv .btn-ghost:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(45,143,156,0.22) 0%,rgba(217,119,6,0.16) 100%);
  border-color:rgba(45,143,156,0.58);
  box-shadow:0 8px 22px rgba(45,143,156,0.22);
}

.pv-desafio-card-interno{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:16px 14px 18px;
  border:1px solid var(--border);
  box-shadow:0 4px 18px rgba(29,107,119,0.08);
  margin-bottom:16px;
  overflow:hidden;
}
.pv-desafio-card-interno::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal2) 55%,var(--gold) 100%);
  pointer-events:none;
}
@media(min-width:520px){
  .pv-desafio-card-interno{padding:18px 20px;}
}
.pv-desafio-card-interno .titulo,
.pv-desafio-card-interno .instruccion,
.pv-desafio-card-interno .pv-desafio-meta{padding:0 4px;}
#pv-desafio-juego-interno .juego-mill-wrap{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:4px 0 0;
  border-radius:0;
  overflow:visible;
}
#pv-desafio-juego-interno .juego-mill-wrap::before{display:none;}
#pv-desafio-juego-interno .juego-mill-opciones{gap:8px;}
.pv-desafio-card-interno .titulo{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--dark);
  margin-bottom:4px;
  letter-spacing:0.3px;
}
.pv-desafio-card-interno .instruccion{
  font-size:12px;
  color:var(--text2);
  margin-bottom:14px;
  line-height:1.45;
}
.pv-desafio-btn-cumplido{
  width:100%;
  padding:14px 16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(58,171,186,0.35);
  transition:transform .2s,box-shadow .2s;
}
.pv-desafio-btn-cumplido:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(58,171,186,0.45);
}
.pv-desafio-aviso{
  background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  border:1px solid rgba(34,197,94,0.3);
  box-shadow:var(--shadow-pro);
  margin-bottom:14px;
}
.pv-desafio-aviso .pv-desafio-aviso-ttl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:#166534;margin-bottom:4px;}
.pv-desafio-aviso .pv-desafio-aviso-txt{font-size:12px;color:#15803d;}
/* Recordatorio «Después» — fila ancho completo bajo el bloque principal del banner azul */
.pv-cumple-banner-next{
  width:100%;
  box-sizing:border-box;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.24);
}
.pv-cumple-banner-next-line{display:block;width:100%;}
.pv-cumple-banner-next-name{
  font-size:11px;
  color:rgba(255,255,255,0.78);
  line-height:1.45;
}
.pv-cumple-banner-next-name strong{color:rgba(255,255,255,0.98);font-weight:800;}
.pv-cumple-banner-next-date{
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  color:rgba(191,219,254,0.98);
  line-height:1.4;
}
/* Resultado desafío completado — variantes por puntuación */
.pv-desafio-result{
  border-radius:18px;
  padding:0;
  overflow:hidden;
  margin-bottom:14px;
  border:none;
  background:linear-gradient(145deg,rgba(255,255,255,0.65) 0%,rgba(248,250,252,0.4) 100%);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 16px 48px rgba(15,23,42,0.07),
    0 0 0 1px rgba(255,255,255,0.85);
  font-family:'Lato',sans-serif;
}
.pv-desafio-result-inner{
  padding:18px 18px 16px;
  position:relative;
}
.pv-desafio-result--bajo .pv-desafio-result-inner{
  background:linear-gradient(165deg,#fff1f2 0%,#ffe4e6 45%,#fecdd3 100%);
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.92),inset 0 0 0 1px rgba(225,29,72,0.14);
}
.pv-desafio-result--regular .pv-desafio-result-inner{
  background:linear-gradient(165deg,#fffbeb 0%,#fef3c7 50%,#fde68a 100%);
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.88),inset 0 0 0 1px rgba(217,119,6,0.16);
}
.pv-desafio-result--bueno .pv-desafio-result-inner{
  background:linear-gradient(165deg,#ecfdf5 0%,#d1fae5 50%,#a7f3d0 100%);
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 0 0 1px rgba(5,150,105,0.14);
}
.pv-desafio-result--perfecto .pv-desafio-result-inner{
  background:linear-gradient(165deg,#fefce8 0%,#fef9c3 40%,#fde047 100%);
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),inset 0 0 0 1px rgba(202,138,4,0.22);
}
.pv-desafio-result-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.pv-desafio-result-badge{
  /* [2026-08-03] Fila flex: [icono] [texto]. El icono va en su PROPIA columna, centrado verticalmente
     (align-items:center) sobre las dos líneas del texto. El texto va en su columna centrado, así las dos
     palabras (p.ej. "RESULTADO"/"BAJO") quedan centradas ENTRE SÍ sin que el icono desplace la de arriba.
     El salto de línea de las etiquetas largas lo pone el JS con un <br> dentro de -txt (determinista, no
     depende del ancho de la fuente); "EN CAMINO" (corta) va sin <br> → una sola línea. */
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.3;
  padding:6px 10px;
  border-radius:14px;
  flex-shrink:0;
}
.pv-desafio-result-badge-ico{ flex:0 0 auto; font-size:12px; line-height:1; letter-spacing:0; }
.pv-desafio-result-badge-txt{ text-align:center; line-height:1.25; }
.pv-desafio-result--bajo .pv-desafio-result-badge{
  background:rgba(190,18,60,0.2);
  color:#9f1239;
  border:1px solid rgba(190,18,60,0.35);
}
.pv-desafio-result--regular .pv-desafio-result-badge{
  background:rgba(180,83,9,0.18);
  color:#92400e;
  border:1px solid rgba(180,83,9,0.3);
}
.pv-desafio-result--bueno .pv-desafio-result-badge{
  background:rgba(5,150,105,0.2);
  color:#047857;
  border:1px solid rgba(5,150,105,0.35);
}
.pv-desafio-result--perfecto .pv-desafio-result-badge{
  background:rgba(161,98,7,0.25);
  color:#854d0e;
  border:1px solid rgba(161,98,7,0.4);
}
.pv-desafio-result-ttl{
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  margin:0;
  letter-spacing:-0.02em;
}
.pv-desafio-result--bajo .pv-desafio-result-ttl{color:#881337;}
.pv-desafio-result--regular .pv-desafio-result-ttl{color:#78350f;}
.pv-desafio-result--bueno .pv-desafio-result-ttl{color:#065f46;}
.pv-desafio-result--perfecto .pv-desafio-result-ttl{color:#713f12;}
.pv-desafio-result-body{
  font-size:12px;
  line-height:1.55;
  margin:0 0 12px;
  opacity:0.95;
}
.pv-desafio-result--bajo .pv-desafio-result-body{color:#881337;}
.pv-desafio-result--regular .pv-desafio-result-body{color:#78350f;}
.pv-desafio-result--bueno .pv-desafio-result-body{color:#166534;}
.pv-desafio-result--perfecto .pv-desafio-result-body{color:#713f12;}
/* Resumen compacto: barra de aciertos + chips en una fila */
.pv-desafio-result-metrics{
  margin-bottom:10px;
}
.pv-desafio-result-metrics-bar-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text3);
  margin-bottom:6px;
}
.pv-desafio-result-metrics-bar-val{
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--dark);
}
.pv-desafio-result-metrics-bar-max{
  opacity:0.55;
  font-weight:700;
  font-size:12px;
}
.pv-desafio-result-metrics-track{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.55);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,0.05);
}
.pv-desafio-result-metrics-track > span{
  display:block;
  height:100%;
  border-radius:999px;
  transition:width .5s ease;
}
.pv-desafio-result--bajo .pv-desafio-result-metrics-track > span{background:linear-gradient(90deg,#fb7185,#e11d48);}
.pv-desafio-result--regular .pv-desafio-result-metrics-track > span{background:linear-gradient(90deg,#fbbf24,#d97706);}
.pv-desafio-result--bueno .pv-desafio-result-metrics-track > span{background:linear-gradient(90deg,#34d399,#059669);}
.pv-desafio-result--perfecto .pv-desafio-result-metrics-track > span{background:linear-gradient(90deg,#facc15,#ca8a04);}
.pv-desafio-result-metrics-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.pv-desafio-result-metrics-chip{
  flex:1 1 28%;
  min-width:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,0.5);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,0.06);
}
.pv-desafio-result-metrics-k{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text3);
  text-align:center;
}
.pv-desafio-result-metrics-v{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:800;
  color:var(--dark);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  max-width:100%;
}
.pv-desafio-result-metrics-sep{opacity:0.45;font-weight:600;}
.pv-desafio-result-foot{
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  padding-top:12px;
  margin:0;
  border-top:1px dashed rgba(15,23,42,0.12);
}
.pv-desafio-result--bajo .pv-desafio-result-foot{color:#9f1239;}
.pv-desafio-result--regular .pv-desafio-result-foot{color:#b45309;}
.pv-desafio-result--bueno .pv-desafio-result-foot{color:#047857;}
.pv-desafio-result--perfecto .pv-desafio-result-foot{color:#a16207;}
.pv-desafio-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:18px 20px;
  border:1px solid var(--border);
  box-shadow:0 4px 18px rgba(29,107,119,0.08);
  margin-bottom:16px;
  overflow:hidden;
}
.pv-desafio-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal2) 55%,var(--gold) 100%);
  pointer-events:none;
}
.pv-desafio-card .titulo{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:var(--dark);margin-bottom:6px;}
.pv-desafio-card .instruccion,.pv-desafio-card .texto{font-size:12px;color:var(--text2);margin-bottom:10px;line-height:1.45;}
.pv-desafio-card .pv-desafio-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;color:var(--text3);}
.pv-desafio-nota{width:100%;min-height:2.5em;padding:10px 12px;font-size:12px;border-radius:var(--radius);border:1px solid rgba(30,41,59,0.12);margin-bottom:10px;resize:none;overflow-y:hidden;box-sizing:border-box;font-family:'Lato',sans-serif;}
.pv-desafio-nota:focus{outline:none;border-color:var(--teal);}
.pv-desafio-btn-jugar{width:100%;padding:12px 16px;border:none;border-radius:var(--radius);background:linear-gradient(135deg,var(--dark) 0%,var(--teal3) 55%,var(--teal) 100%);color:white;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(29,107,119,0.35);margin-bottom:12px;transition:transform .2s,box-shadow .2s;}
.pv-desafio-btn-jugar:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(29,107,119,0.45);}
/* Recuento “Hoy: N” en rankings: mismo tamaño compacto (desafío teal / Forjados ámbar suave) */
.pv-ranking-hoy-pill{
  flex-shrink:0;
  font-family:'Montserrat',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--teal3);
  background:rgba(29,107,119,0.07);
  border:1px solid rgba(45,143,156,0.22);
  border-radius:999px;
  padding:4px 10px;
  line-height:1.25;
}
.pv-forjados-hoy-pill{
  flex-shrink:0;
  font-family:'Montserrat',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:#92400e;
  background:rgba(180,83,9,0.09);
  border:1px solid rgba(180,83,9,0.24);
  border-radius:999px;
  padding:4px 10px;
  line-height:1.25;
}
.pv-recordatorio-box{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1.5px solid #f59e0b;border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-pro);position:relative;}
.pv-recordatorio-close{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:18px;cursor:pointer;opacity:0.7;line-height:1;}
.pv-recordatorio-ttl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:#92400e;margin-bottom:6px;}
.pv-recordatorio-txt{font-size:13px;color:#78350f;margin-bottom:12px;line-height:1.4;}
@keyframes juego-mill-pulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}

.toast.ok{background:linear-gradient(135deg,var(--teal),var(--teal2));color:white;}
.toast.err{background:var(--red);color:white;}
.toast.info{background:var(--dark);color:white;}
@keyframes toast-in{
  from{opacity:0;transform:translateX(-50%) translateY(12px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

button:focus-visible,
.btn:focus-visible,
.btn-hdr:focus-visible{
  outline:2px solid rgba(58,171,186,0.9);
  outline-offset:2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(58,171,186,0.3);
}

/* [2026-06-15] Eliminado el CSS de .sod-banner* (banner del foro SOD en #sod-root, vista legacy
   retirada). El banner vivo de la Comunidad es .prayer-banner--sod. */
/* Modal leyenda SOD (z alto; centrado tipo “tarjeta editorial”; fuera de .screen vía JS) */
.sod-leyenda-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10050;
  align-items:center;
  justify-content:center;
  padding:max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing:border-box;
}
.sod-leyenda-modal.is-open{display:flex;}
.sod-leyenda-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.78);
}
.sod-leyenda-sheet{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:min(420px, 100%);
  max-height:min(78vh, calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
  max-height:min(78dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
  margin:0 auto;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid rgba(14,116,144,0.2);
  background:linear-gradient(165deg,#f0fdfa 0%,#fff 38%,#fafafa 100%);
  box-shadow:0 24px 64px rgba(15,23,42,0.28),0 0 0 1px rgba(255,255,255,0.65) inset;
  animation:sodLeyendaIn .32s cubic-bezier(.34,1.15,.64,1);
}
@keyframes sodLeyendaIn{from{transform:scale(.96) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.sod-leyenda-sheet-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:18px 22px 20px;
  padding-top:48px;
}
.sod-leyenda-close{
  position:absolute;
  top:12px;
  right:14px;
  z-index:6;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,0.07);
  color:var(--text2);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,color .15s,transform .15s;
}
.sod-leyenda-close:hover{background:rgba(14,116,144,0.14);color:#0e7490;transform:scale(1.05);}
.sod-leyenda-head{margin-bottom:16px;padding-right:40px;}
.sod-leyenda-eyebrow{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0d9488;
  margin:0 0 6px;
}
.sod-leyenda-title{
  font-family:'Montserrat',sans-serif;
  font-size:20px;
  font-weight:900;
  color:#0e7490;
  margin:0 0 6px;
  line-height:1.2;
  letter-spacing:.02em;
}
.sod-leyenda-kicker{font-size:13px;color:var(--text2);margin:0;line-height:1.4;}
.sod-leyenda-body{padding-bottom:4px;}
.sod-leyenda-p{font-size:14px;color:var(--text2);line-height:1.6;margin:0 0 14px;}
.sod-leyenda-p-muted{font-size:13px;color:var(--text3);margin-bottom:0;}
.sod-leyenda-foot{
  flex-shrink:0;
  padding:14px 22px calc(16px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,rgba(255,255,255,0.72) 0%,#fff 40%);
  border-top:1px solid rgba(14,116,144,0.1);
  box-shadow:0 -10px 28px rgba(14,116,144,0.05);
}
.sod-leyenda-cta{
  width:100%;
  padding:14px 18px;
  border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#0e7490,#0d9488);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(14,116,144,0.35);
  transition:transform .15s,box-shadow .15s;
}
.sod-leyenda-cta:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(14,116,144,0.42);}
.sod-leyenda-cta:active{transform:translateY(0);}
/* [Peticiones] Variante púrpura del modal de guía (Iglesia app, no HdV verde). */
.sod-leyenda-modal.leyenda--pet .sod-leyenda-eyebrow{color:#7c3aed;}
.sod-leyenda-modal.leyenda--pet .sod-leyenda-title{color:#6d28d9;}
.sod-leyenda-modal.leyenda--pet .sod-leyenda-close:hover{background:rgba(139,92,246,0.14);color:#6d28d9;}
.sod-leyenda-modal.leyenda--pet .sod-leyenda-foot{border-top-color:rgba(139,92,246,0.12);box-shadow:0 -10px 28px rgba(139,92,246,0.06);}
.sod-leyenda-modal.leyenda--pet .sod-leyenda-cta{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 6px 24px rgba(139,92,246,0.35);}
.sod-leyenda-modal.leyenda--pet .sod-leyenda-cta:hover{box-shadow:0 8px 28px rgba(139,92,246,0.42);}
@media (max-width:380px){
  .sod-leyenda-sheet{max-width:100%;border-radius:var(--radius-lg);}
  .sod-leyenda-sheet-scroll{padding-left:18px;padding-right:18px;}
}
.sod-btn-primary{
  width:100%;
  padding:12px 16px;
  border:none;
  border-radius:var(--radius);
  /* Botón primario del muro (Publicar/Enviar respuesta): color del COMITÉ (--sec-accent); fallback teal HdV. */
  background:linear-gradient(135deg,var(--sec-accent,#0e7490),var(--sec-accent,#0d9488));
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(14,116,144,0.35);
  margin-bottom:12px;
  transition:transform .15s,box-shadow .15s;
}
.sod-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,116,144,0.4);}
.sod-btn-primary.sod-btn-sm{width:auto;padding:9px 16px;font-size:12px;margin-bottom:0;}
.sod-btn-secondary{
  padding:9px 14px;
  border-radius:var(--radius);
  border:1px solid var(--border2);
  background:var(--white);
  color:var(--text2);
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.sod-btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  margin-top:8px;
  border:none;
  border-radius:999px;
  /* [2026-06-15] Botones "Me gusta"/"Responder": toman el acento de la sección (comité). Fuera de
     un comité (HdV/Peticiones) no hay --sec-accent → quedan en el teal HdV de siempre. */
  background:var(--sec-accent-soft,rgba(14,116,144,0.1));
  color:var(--sec-accent,#0f766e);
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
}
.sod-textarea{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  line-height:1.45;
  border-radius:var(--radius);
  border:1px solid rgba(30,41,59,0.14);
  font-family:'Lato',sans-serif;
  resize:vertical;
  min-height:100px;
  box-sizing:border-box;
  margin-bottom:10px;
}
.sod-textarea.sod-textarea-sm{min-height:72px;font-size:13px;}
.sod-modos{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.sod-modos-lbl{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;}
.sod-radio{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);cursor:pointer;}
.sod-feed{display:flex;flex-direction:column;gap:12px;}
/* Anteriormente aquí había `content-visibility:auto` para .sod-card,
 * .pet-card y cards de eventos. Eso indica al navegador que SALTE el
 * layout/paint de los elementos fuera del viewport y los renderice solo
 * al entrar al scroll. El efecto secundario es exactamente lo que el
 * usuario reporta: "carga progresiva al hacer scroll" y "se vuelve a
 * cargar" al volver hacia arriba (el navegador puede descartar el paint
 * cuando se aleja del viewport).
 * Lo retiramos y mantenemos solo `contain:layout style` para aislar
 * repaint dentro de cada card sin saltarse el primer pintado. */
.sod-card,.pet-card{
  contain:layout style;
}
#pv-eventos > div,
#pv-eventos-pasados > div{
  contain:layout style;
}
.sod-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid rgba(30,41,59,0.08);
  box-shadow:var(--shadow-pro);
  overflow:hidden;
}
.sod-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(248,250,252,0.9) 0%,rgba(255,255,255,0) 100%);
  border-bottom:1px solid rgba(30,41,59,0.06);
}
/* [2026-06-15] El nombre del autor toma el acento de la sección activa (--sec-accent: morado en
   alabanza, rosa en mujeres, azul en jóvenes…). Fuera de un comité (HdV/Peticiones) no hay
   --sec-accent → cae al verde HdV de siempre (#134e4a). Antes era verde fijo en todos lados. */
.sod-badge{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--sec-accent,#134e4a);max-width:100%;}
.sod-autor-with-thumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  vertical-align:middle;
}
.sod-autor-label{
  min-width:0;
  flex:1;
  line-height:1.3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.sod-reply-who .sod-autor-with-thumb{align-items:flex-start;}
/* Sublinea con el nombre de la iglesia del autor, bajo su nombre. Mismo estilo
   sutil que las tablas del inicio: tipografia fina, pequena y muteada. Se usa
   en comunidad (peticiones y SOD) y paradojas. */
.comunidad-iglesia-sub{
  display:block;
  font-family:'Lato',sans-serif;
  font-weight:300;
  font-size:10px;
  color:var(--text3);
  opacity:0.8;
  letter-spacing:0.2px;
  line-height:1.15;
  margin-top:1px;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.sod-time{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums;}
.sod-card-body{padding:14px 16px;font-size:14px;line-height:1.55;color:var(--text);word-break:break-word;}
.sod-card-foot{padding:0 14px 14px;}
.sod-replies-details{margin-top:10px;border-top:1px dashed rgba(30,41,59,0.1);padding-top:10px;}
.sod-replies-details summary{
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  color:#0e7490;
  list-style:none;
  padding:6px 0;
}
.sod-replies-details summary::-webkit-details-marker{display:none;}
.sod-reply-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.sod-reply-item{
  padding:10px 12px;
  border-radius:var(--radius);
  background:rgba(14,116,144,0.06);
  border:1px solid rgba(14,116,144,0.12);
}
.sod-reply-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.sod-reply-who{font-size:11px;font-weight:800;color:#0f766e;}
.sod-reply-when{font-size:10px;color:var(--text3);}
.sod-reply-txt{font-size:13px;color:var(--text2);line-height:1.45;word-break:break-word;}
.sod-reply-wrap{margin-top:12px;padding-top:12px;border-top:1px solid rgba(30,41,59,0.08);}
.sod-card-head-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;flex:1;}
.sod-card-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end;flex-shrink:0;}
.pet-card{width:100%;box-sizing:border-box;}
.pet-card .sod-card-head,.pet-card .sod-card-body,.pet-card .sod-card-foot{width:100%;box-sizing:border-box;}
.pet-card .sod-card-head{padding:12px 14px;}
.pet-card .sod-card-body{padding:14px 16px;}
.pet-card .sod-card-foot{padding:0 14px 14px;}
.sod-btn-inline{
  padding:3px 8px;
  min-width:72px;
  font-size:10px;
  font-weight:700;
  font-family:'Lato',sans-serif;
  border-radius:var(--radius);
  border:1px solid rgba(14,116,144,0.35);
  background:rgba(14,116,144,0.08);
  color:#0e7490;
  cursor:pointer;
  line-height:1.2;
  text-align:center;
}
.sod-btn-inline:hover{background:rgba(14,116,144,0.14);}
.sod-btn-inline.sod-btn-danger{
  border-color:rgba(185,28,28,0.35);
  background:rgba(185,28,28,0.08);
  color:#b91c1c;
}
.sod-btn-inline.sod-btn-danger:hover{background:rgba(185,28,28,0.14);}
.sod-inline-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
.sod-reply-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.sod-reply-view{min-width:0;}
.sod-card-edit{padding:0 14px 14px;border-top:1px dashed rgba(30,41,59,0.08);padding-top:12px;}
.sod-btn-xs{padding:6px 12px;font-size:11px;}
.sod-empty{
  text-align:center;
  padding:28px 16px;
  font-size:13px;
  color:var(--text3);
  background:rgba(248,250,252,0.8);
  border-radius:var(--radius-lg);
  border:1px dashed rgba(30,41,59,0.12);
}

/* ── PARADOJA (PV e Admin) ── */
.paradoja-layout{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.paradoja-sidebar{
  width:272px;
  max-width:100%;
  flex-shrink:0;
}
.paradoja-sidebar__ttl{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#0f766e;
  margin:0 0 12px;
}
.paradoja-nav{
  --par-current-1:#ecfeff;
  --par-current-2:#ccfbf1;
  --par-current-border:rgba(13,148,136,0.34);
  --par-arch-1:#fff8eb;
  --par-arch-2:#fef3c7;
  --par-arch-border:rgba(180,83,9,0.24);
  background:linear-gradient(166deg,rgba(255,255,255,0.99) 0%,rgba(236,253,245,0.86) 40%,rgba(255,247,237,0.9) 100%);
  border:1px solid rgba(14,116,144,0.2);
  border-radius:14px;
  padding:13px;
  box-shadow:0 10px 28px rgba(15,23,42,0.08),0 0 0 1px rgba(255,255,255,0.6) inset;
}
.paradoja-nav__lead{
  margin:-2px 0 12px;
  font-size:12px;
  line-height:1.45;
  color:#334155;
}
.paradoja-nav__section{margin-bottom:12px;}
.paradoja-nav__section:last-child{margin-bottom:0;}
.paradoja-nav__section-ttl{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0e7490;
  margin:0 0 8px;
}
.paradoja-nav__archive{
  border:1px solid rgba(14,116,144,0.16);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.90) 0%,rgba(248,250,252,0.82) 100%);
  overflow:hidden;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.paradoja-nav__archive:hover{
  border-color:rgba(14,116,144,0.28);
  box-shadow:0 9px 20px rgba(15,23,42,0.08);
}
.paradoja-nav__archive-sum{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.95) 0%,rgba(248,250,252,0.85) 100%);
}
.paradoja-nav__archive-sum::-webkit-details-marker{display:none;}
.paradoja-nav__archive-ttl{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0e7490;
}
.paradoja-nav__archive-count{
  margin-left:auto;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#0f172a;
  background:rgba(14,116,144,0.12);
}
.paradoja-nav__archive-chev{
  font-size:12px;
  color:#0e7490;
  transition:transform .2s ease,color .2s ease;
}
.paradoja-nav__archive[open] .paradoja-nav__archive-chev{
  transform:rotate(180deg);
  color:#0f766e;
}
.paradoja-nav__archive-body{
  padding:4px 10px 10px;
  border-top:1px solid rgba(148,163,184,0.16);
}
.paradoja-nav__empty{
  font-size:12px;
  color:var(--text3);
  border:1px dashed rgba(30,41,59,0.15);
  border-radius:10px;
  padding:10px;
  background:rgba(255,255,255,0.7);
}
.paradoja-main{
  flex:1;
  min-width:0;
}
/* [2026-06-08] Rediseño: contenido primero (paradoja-page = una columna),
   barra "volver a la actual" al abrir una archivada, y archivo como sección abajo. */
.paradoja-page{ display:block; }
.paradoja-backbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:11px 14px;
  background:linear-gradient(132deg,#fffbeb,#fef3c7);
  border:1px solid rgba(180,83,9,0.28); border-radius:14px;
  box-shadow:0 4px 14px rgba(146,64,14,0.08);
}
.paradoja-backbar__txt{ flex:1; min-width:140px; font-size:12.5px; color:#92400e; font-weight:600; line-height:1.35; }
.paradoja-backbar__btn{
  flex-shrink:0; border:none; cursor:pointer;
  background:linear-gradient(135deg,#b45309,#92400e); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px;
  padding:8px 14px; border-radius:999px; box-shadow:0 3px 10px rgba(146,64,14,0.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.paradoja-backbar__btn:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(146,64,14,0.38); }
.paradoja-form-resp__archived-note{
  margin:0 0 10px; padding:9px 12px; border-radius:10px;
  background:rgba(180,83,9,0.08); border:1px solid rgba(180,83,9,0.22);
  color:#92400e; font-size:12px; line-height:1.4;
}
.paradoja-archive{
  margin:26px 0 0; padding:18px 16px 16px;
  border-radius:var(--radius-xl);
  background:linear-gradient(132deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid rgba(148,163,184,0.22);
  box-shadow:0 8px 24px rgba(15,23,42,0.05);
}
.paradoja-archive__head{ display:flex; align-items:center; gap:9px; }
.paradoja-archive__icon{ font-size:18px; }
.paradoja-archive__ttl{ font-family:'Montserrat',sans-serif; font-size:14px; font-weight:800; color:#0f172a; }
.paradoja-archive__count{
  margin-left:auto; min-width:24px; height:24px; padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#0e7490; background:rgba(14,116,144,0.12);
}
.paradoja-archive__lead{ font-size:12.5px; color:var(--text3); margin:6px 0 14px; line-height:1.45; }
.paradoja-archive__list{ display:flex; flex-direction:column; gap:10px; }
.paradoja-archive__more{ margin-top:2px; }
.paradoja-archive__more-sum{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; border-radius:10px; border:1px dashed rgba(14,116,144,0.3);
  background:rgba(14,116,144,0.05); color:#0e7490;
  font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800;
}
.paradoja-archive__more-sum::-webkit-details-marker{ display:none; }
.paradoja-archive__more-chev{ transition:transform .2s ease; }
.paradoja-archive__more[open] .paradoja-archive__more-chev{ transform:rotate(180deg); }
.paradoja-archive__more-body{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
/* Invitación a comentar (cabecera cálida del formulario) */
.paradoja-form-resp__invite{
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:800;
  color:var(--teal3); margin-bottom:10px;
}
/* Hero: título = pregunta principal de la paradoja */
.paradoja-hero{
  margin:0 0 18px;
  padding:20px 20px 22px;
  border-radius:var(--radius-xl);
  background:linear-gradient(132deg,#ffffff 0%,#f0fdfa 36%,#ecfeff 62%,#f8fafc 100%);
  border:1px solid rgba(14,116,144,0.18);
  box-shadow:0 12px 34px rgba(15,23,42,0.07),0 0 0 1px rgba(255,255,255,0.82) inset;
  position:relative;
  overflow:hidden;
}
.paradoja-hero--current{
  background:linear-gradient(132deg,#ffffff 0%,#f8fafc 42%,#f2fbfb 72%,#f8fafc 100%);
  border-color:rgba(14,116,144,0.18);
}
.paradoja-hero--archived{
  background:linear-gradient(132deg,#fffdf9 0%,#fffcf2 46%,#fff9ef 76%,#fefce8 100%);
  border-color:rgba(180,83,9,0.22);
  box-shadow:0 10px 26px rgba(146,64,14,0.07),0 0 0 1px rgba(255,255,255,0.82) inset;
}
.paradoja-hero::after{
  content:'';
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  right:-40px;
  top:-64px;
  background:radial-gradient(circle at center,rgba(20,184,166,0.10) 0%,rgba(20,184,166,0) 74%);
  pointer-events:none;
}
.paradoja-hero--archived::after{
  background:radial-gradient(circle at center,rgba(245,158,11,0.12) 0%,rgba(245,158,11,0) 74%);
}
.paradoja-hero__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.paradoja-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#0d9488;
  margin:0;
}
.paradoja-hero--archived .paradoja-hero__eyebrow{
  color:#b45309;
}
.paradoja-hero__eyebrow-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),#0d9488);
  box-shadow:0 0 0 3px rgba(45,212,191,0.25);
  flex-shrink:0;
}
.paradoja-hero--archived .paradoja-hero__eyebrow-dot{
  background:linear-gradient(135deg,#f59e0b,#b45309);
  box-shadow:0 0 0 3px rgba(245,158,11,0.22);
}
.paradoja-hero__state{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.paradoja-hero__state--current{
  color:#0f766e;
  background:rgba(20,184,166,0.14);
  border-color:rgba(20,184,166,0.36);
}
.paradoja-hero__state--archived{
  color:#9a3412;
  background:rgba(251,146,60,0.14);
  border-color:rgba(251,146,60,0.38);
}
.paradoja-hero__title{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.2rem, 4.2vw, 1.55rem);
  font-weight:800;
  color:var(--dark);
  line-height:1.28;
  letter-spacing:-0.03em;
  text-wrap:balance;
  max-width:42rem;
}
/* Cita bíblica */
.paradoja-scripture{
  margin:0 0 18px;
  padding:0;
  background:linear-gradient(180deg,rgba(14,116,144,0.09) 0%,rgba(255,255,255,0.94) 100%);
  border-radius:var(--radius-lg);
  border:1px solid rgba(14,116,144,0.16);
  border-left:4px solid var(--teal);
  box-shadow:0 4px 20px rgba(14,116,144,0.07);
  overflow:hidden;
}
.paradoja-scripture__quote{
  margin:0;
  padding:16px 18px 10px;
  font-family:'Lato',Georgia,serif;
  font-size:15px;
  font-style:italic;
  font-weight:500;
  line-height:1.65;
  color:#334155;
  white-space:pre-wrap;
}
.paradoja-scripture__ref{
  display:block;
  padding:0 18px 16px;
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#0e7490;
}
/* Texto “Profundiza” cuando difiere del título */
.paradoja-context{
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(99,102,241,0.08) 0%,rgba(255,255,255,0.95) 100%);
  border:1px solid rgba(99,102,241,0.18);
  border-left:4px solid #6366f1;
  box-shadow:0 4px 18px rgba(79,70,229,0.06);
}
.paradoja-context__lbl{
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#4f46e5;
  margin-bottom:8px;
}
.paradoja-context__txt{
  font-size:15px;
  line-height:1.7;
  color:var(--text2);
  font-weight:400;
}
.paradoja-section-hr{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0 16px;
  color:var(--text3);
}
.paradoja-section-hr::before,
.paradoja-section-hr::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,41,59,0.12),transparent);
}
.paradoja-section-hr__txt{
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--dark2);
}
.paradoja-discuss{margin-top:12px;}
.paradoja-discuss__head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.paradoja-discuss__ttl{
  font-size:15px;
  font-weight:800;
  font-family:'Montserrat',sans-serif;
  color:var(--dark);
}
.paradoja-discuss__meta{
  margin-left:auto;
  font-size:12px;
  color:var(--text3);
  font-weight:500;
}
.paradoja-discuss__hint{
  font-size:12px;
  color:var(--text3);
  margin:0 0 12px;
  line-height:1.45;
}
.paradoja-resp-section{margin-top:20px;}
.paradoja-resp-section__ttl{
  font-size:15px;
  font-weight:800;
  font-family:'Montserrat',sans-serif;
  letter-spacing:0.01em;
  color:var(--teal3);
  margin:4px 0 14px;
  padding-bottom:8px;
  border-bottom:2px solid rgba(58,171,186,0.18);
}
.paradoja-sin-respuestas{
  color:var(--text3);
  font-size:13px;
  border:1px dashed rgba(30,41,59,0.14);
  border-radius:14px;
  padding:28px 16px;
  text-align:center;
  font-weight:400;
  line-height:1.55;
  background:rgba(248,250,252,0.6);
}
.paradoja-form-resp{
  background:linear-gradient(180deg,rgba(14,116,144,0.05) 0%,#fff 100%);
  border:1px solid rgba(14,116,144,0.16);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
  box-shadow:0 2px 12px rgba(14,116,144,0.05);
}
.paradoja-form-resp__ta{
  min-height:120px;
  max-height:260px;
  width:100%;
  box-sizing:border-box;
}
.paradoja-form-resp__foot{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:12px;
}
.paradoja-form-resp__chars{
  font-size:12px;
  color:var(--text3);
  font-weight:400;
}
.paradoja-form-resp__chars span:first-child{font-weight:700;color:var(--text2);}
.paradoja-form-resp__btn{
  font-size:13px;
  padding:10px 18px;
  font-weight:700;
}
.paradoja-resp{
  background:#fff;
  border:1px solid rgba(14,116,144,0.12);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:12px;
  box-shadow:0 2px 14px rgba(15,23,42,0.04);
}
.paradoja-resp__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.paradoja-resp__who{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  font-weight:700;
  color:var(--dark);
  font-size:13px;
  font-family:'Montserrat',sans-serif;
}
.paradoja-resp__when{
  margin-left:auto;
  font-size:11px;
  color:var(--text3);
  font-style:italic;
}
.paradoja-resp__body{
  font-size:14px;
  line-height:1.75;
  color:var(--text);
  white-space:pre-wrap;
}
.paradoja-revelada{
  background:linear-gradient(180deg,rgba(14,116,144,0.07) 0%,rgba(255,255,255,0.95) 100%);
  border:1px solid rgba(14,116,144,0.15);
  border-radius:16px;
  padding:18px 20px;
  margin:20px 0 0;
  box-shadow:0 4px 24px rgba(14,116,144,0.07);
}
.paradoja-revelada__head{
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#0e7490;
  margin-bottom:12px;
}
.paradoja-revelada__body{
  font-size:14px;
  line-height:1.78;
  color:var(--text);
  font-weight:400;
}
.paradoja-revelada__p{margin:0 0 14px;}
.paradoja-revelada__p:last-child{margin-bottom:0;}
.paradoja-archived-below{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(30,41,59,0.1);
}
.paradoja-feed-item{
  padding:12px 14px;
  border:1px solid rgba(30,41,59,0.08);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  margin-bottom:10px;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease,background .2s ease;
  box-shadow:0 2px 6px rgba(15,23,42,0.05);
}
.paradoja-feed-item:hover{
  border-color:rgba(14,116,144,0.32);
  box-shadow:0 8px 18px rgba(14,116,144,0.12);
  transform:translateY(-1px);
}
.paradoja-feed-item__title{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--dark);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.paradoja-feed-item__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.paradoja-feed-item__meta{
  margin-top:7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text3);
}
.paradoja-feed-item__meta--comments{
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#475569;
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.paradoja-read-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 6px;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  border:1px solid transparent;
  line-height:1;
}
.paradoja-read-badge.is-unread{
  color:#b45309;
  background:rgba(245,158,11,0.14);
  border-color:rgba(245,158,11,0.34);
}
.paradoja-read-badge.is-no-comment{
  color:#9a3412;
  background:rgba(251,146,60,0.14);
  border-color:rgba(251,146,60,0.32);
}
.paradoja-read-badge.is-commented{
  color:#166534;
  background:rgba(34,197,94,0.14);
  border-color:rgba(34,197,94,0.32);
}
.paradoja-read-badge.is-recent{
  color:#0f766e;
  background:rgba(20,184,166,0.14);
  border-color:rgba(20,184,166,0.34);
}
.paradoja-read-badge.is-seen{
  color:#475569;
  background:rgba(148,163,184,0.14);
  border-color:rgba(148,163,184,0.34);
}
.paradoja-feed-item.active{
  border-color:rgba(14,116,144,0.4)!important;
  box-shadow:0 0 0 2px rgba(14,116,144,0.14),0 8px 20px rgba(14,116,144,0.14);
}
.paradoja-feed-item--current{
  border-color:var(--par-current-border);
  background:linear-gradient(154deg,var(--par-current-1) 0%,var(--par-current-2) 100%);
}
.paradoja-feed-item--archived{
  border-color:var(--par-arch-border);
  background:linear-gradient(154deg,var(--par-arch-1) 0%,var(--par-arch-2) 100%);
}
.paradoja-feed-item--archived .paradoja-feed-item__title{
  color:#7c2d12;
}
.paradoja-feed-item--archived .paradoja-feed-item__meta{
  color:#9a3412;
}
/* Banner reflexión (caballero) */
.paradoja-reflect-banner{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:linear-gradient(135deg,rgba(14,116,144,0.12) 0%,rgba(45,143,156,0.08) 56%,rgba(245,197,24,0.08) 100%);
  border:1px solid rgba(14,116,144,0.24);
  border-radius:var(--radius-xl);
  padding:18px 18px 18px 16px;
  margin:4px 0 22px;
  box-shadow:0 8px 24px rgba(14,116,144,0.12);
}
.paradoja-reflect-banner__icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(14,116,144,0.15),rgba(13,148,136,0.1));
  border:1px solid rgba(14,116,144,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:#0e7490;
  line-height:1;
}
.paradoja-reflect-banner__inner{min-width:0;flex:1;}
.paradoja-reflect-banner__ttl{
  margin:0 0 6px;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--dark);
  letter-spacing:-0.02em;
}
.paradoja-reflect-banner__txt{
  margin:0;
  font-size:13.5px;
  line-height:1.62;
  color:var(--text2);
  font-weight:400;
}
.paradoja-reflect-banner p,
.paradoja-reflect-banner .paradoja-reflect-lead{
  margin:0 0 8px;
}
.paradoja-reflect-banner p:last-child,
.paradoja-reflect-banner .paradoja-reflect-lead:last-child{margin-bottom:0;}
.paradoja-reflect-banner .paradoja-reflect-lead{
  font-size:15px;
  line-height:1.45;
  color:#0f766e;
  font-weight:700;
  font-family:'Montserrat',sans-serif;
  letter-spacing:-0.02em;
}

.paradoja-main > *{
  animation:paradojaEnter .4s ease both;
}
.paradoja-main > *:nth-child(2){animation-delay:.03s;}
.paradoja-main > *:nth-child(3){animation-delay:.06s;}
.paradoja-main > *:nth-child(4){animation-delay:.09s;}

@keyframes paradojaEnter{
  from{opacity:.0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .paradoja-main > *{animation:none;}
  .paradoja-feed-item{transition:none;}
}

/* Admin paradojas: móvil primero */
.paradoja-admin{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.paradoja-admin__sidebar{
  width:100%;
  max-width:100%;
}
.paradoja-admin__list{
  max-height:min(42vh,280px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 8px 0;
  margin:0 -2px 0 0;
}
.paradoja-admin__main{
  width:100%;
  min-width:0;
}
.paradoja-admin-tabs{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  margin-bottom:4px;
  scrollbar-width:thin;
}
.paradoja-admin-tabs .btn{
  flex:0 0 auto;
  white-space:nowrap;
  font-weight:500;
}
.paradoja-admin-tabs .btn.paradoja-tab--active{
  font-weight:600;
}
.paradoja-prog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:640px){
  .paradoja-prog-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(min-width:900px){
  .paradoja-admin{
    flex-direction:row;
    align-items:flex-start;
    gap:20px;
  }
  .paradoja-admin__sidebar{
    width:280px;
    flex-shrink:0;
  }
  .paradoja-admin__list{
    max-height:min(70vh,520px);
  }
}

@media(max-width:768px){
  .paradoja-layout{
    flex-direction:column;
  }
  .paradoja-sidebar{
    width:100%;
  }
  .paradoja-nav{
    padding:10px;
  }
  .paradoja-feed-item{
    margin-bottom:8px;
  }
  .paradoja-read-badge{
    padding:2px 7px;
    font-size:8px;
  }
  .paradoja-hero{
    padding:16px 14px 18px;
  }
  .paradoja-nav__lead{
    font-size:11.5px;
  }
}

#admin-paradoja-root,
#paradoja-root{
  max-width:100%;
  overflow-x:hidden;
}

/* Peticiones de oración — panel nueva petición */
.pet-nueva-panel{
  animation:petPanelIn 0.2s ease-out;
}
@keyframes petPanelIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
/* ── Material Visual Editor ── */
.mvebtn{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border:1.5px solid #e2e8f0;border-radius:7px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;min-width:28px;height:30px;line-height:1;white-space:nowrap;color:#374151;transition:background .1s,border-color .1s,color .1s;user-select:none;-webkit-user-select:none;}
.mvebtn:hover{background:#f1f5f9;border-color:#94a3b8;}
.mvebtn.mve-active{background:rgba(58,171,186,0.12);border-color:var(--teal);color:var(--teal2);}
.mve-sep{width:1px;height:20px;background:#e2e8f0;flex-shrink:0;margin:0 2px;align-self:center;}

/* El banner inferior #hdv-update-banner se eliminó: ahora todas las
   actualizaciones disparan el overlay obligatorio a pantalla completa
   (#hdv-update-lock) definido en head-bootstrap.js. */

/* ═══════════════════════════════════════════════════════════════════════════
   [2026-06-15] Feedback táctil GLOBAL — "que se sienta al usar"
   Capa ADITIVA al final del archivo. Da una pulsación consistente (escala sutil
   0.97, en la línea de los :active ya presentes en la app: .96–.985) a los
   botones que aún NO definían su propio :active — el más importante, .btn (el
   primitivo de botón base usado en formularios, modales y admin), no tenía
   feedback de pulsación. Los botones que YA tienen un :active afinado
   (btn-enter, btn-google-cta, ntab, pv-ntab, lobby-*, juego-mill-*, cards…) NO
   están en esta lista, así que quedan intactos. Respeta prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .btn,
  .btn-ghost, .btn-hdr,
  .sod-btn-primary, .sod-btn-secondary, .sod-btn-ghost, .sod-btn-danger,
  .sod-btn-inline, .sod-btn-sm, .sod-btn-xs,
  .cl-material-btn,
  .mode-btn, .att-btn,
  .app-info-btn, .app-info-btn-call, .app-info-btn-wa,
  .mvebtn,
  .pv-report-cta-btn,
  .paradoja-form-resp__btn, .paradoja-backbar__btn{
    transition: transform .12s cubic-bezier(.2,.7,.3,1),
                box-shadow .15s ease, background-color .15s ease,
                color .15s ease, border-color .15s ease, opacity .15s ease;
  }
  .btn:active:not(:disabled):not([aria-disabled="true"]),
  .btn-ghost:active:not(:disabled), .btn-hdr:active:not(:disabled),
  .sod-btn-primary:active:not(:disabled), .sod-btn-secondary:active:not(:disabled),
  .sod-btn-ghost:active:not(:disabled), .sod-btn-danger:active:not(:disabled),
  .sod-btn-inline:active:not(:disabled), .sod-btn-sm:active:not(:disabled),
  .sod-btn-xs:active:not(:disabled),
  .cl-material-btn:active:not(:disabled),
  .mode-btn:active:not(:disabled), .att-btn:active:not(:disabled),
  .app-info-btn:active, .app-info-btn-call:active, .app-info-btn-wa:active,
  .mvebtn:active:not(:disabled),
  .pv-report-cta-btn:active:not(:disabled),
  .paradoja-form-resp__btn:active:not(:disabled), .paradoja-backbar__btn:active{
    transform: scale(.95);
    filter: brightness(.93);
  }
  /* [2026-06-20] Feedback de pulsado GLOBAL para CUALQUIER <button> (incluye los de estilo inline
     que no usan .btn): se hunde y oscurece al tocar. Las clases con :active propio (ntab/pv-ntab/
     lobby/juego-mill/btn-google-cta…) ganan por especificidad y conservan el suyo. */
  button{ -webkit-tap-highlight-color: transparent; transition: transform .1s ease, filter .1s ease, box-shadow .1s ease; }
  button:active:not(:disabled):not([aria-disabled="true"]){ transform: scale(.95); filter: brightness(.93); }
}
/* [2026-07-04] Hover GLOBAL sutil para CUALQUIER <button> sin :hover propio (complementa el button:active
   global de arriba). Especificidad (0,1,1) a propósito: cualquier `.clase:hover` (0,2,0) — .btn, .ntab,
   pv-ntab, etc. — GANA y conserva su hover; solo los botones «pelados» o con clases de utilidad sin hover
   (acciones inline de home/iglesia-registro, .sec-adj-del, .cl-material-btn…) reciben este oscurecido leve.
   Solo con puntero, no en táctil. */
@media (hover:hover){
  button:hover{ filter: brightness(.96); }
}
/* [2026-07-04] Hover GLOBAL para <summary> de <details> (nativos, siempre clicables para desplegar):
   subrayado al pasar el puntero → señal universal de interactividad, sin pelear con su color inline.
   Solo con puntero. */
@media (hover:hover){
  summary:hover{ text-decoration: underline; text-underline-offset: 2px; }
}

/* [2026-06-20] ESTADO VACÍO reutilizable (icono + mensaje centrado) para listas/tarjetas sin
   contenido — reemplaza los "Sin X" en texto plano por algo más cuidado y coherente. */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;padding:22px 16px;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;}
.empty-state__ico{font-size:30px;line-height:1;opacity:.65;}
.empty-state__txt{font-size:12.5px;font-weight:700;color:#64748b;}
.empty-state__sub{font-size:11px;color:#94a3b8;max-width:320px;}

/* [2026-06-20] Botón "mini" de acción para tarjetas/listas admin (Editar/Borrar/Ir/Registrar):
   unifica los muchos botones con estilo inline repetido. El feedback de pulsado es global (button). */
.btn-mini{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:5px 11px;
  border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--teal-bg);color:var(--teal2);
  line-height:1.2;white-space:nowrap;}
.btn-mini.del{background:var(--red-bg);border-color:rgba(239,68,68,0.3);color:var(--red);}
.btn-mini.go{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:transparent;color:#fff;}
.btn-mini.ok{background:linear-gradient(135deg,#22c55e,#15803d);border-color:transparent;color:#fff;}
.btn-mini.tight{padding:3px 7px;font-size:10px;}/* variante compacta para filas densas (✏️/🗑) */

/* ===========================================================================
   [2026-06-18] Ocultar TEXTOS EXPLICATIVOS / cajas y avisos de ayuda
   ---------------------------------------------------------------------------
   A petición: quitar las cajas/avisos de ayuda de la app (vistas de miembro,
   admin de cada comité y de la Iglesia). Se OCULTAN con CSS (no se borra el
   HTML del código), así es 100% reversible: para que VUELVAN a verse, basta
   con borrar o comentar este bloque. NO toca avisos de seguridad/acciones
   irreversibles (esos no usan estas clases) ni toasts ni textos de campo.
   Clases cubiertas:
     .info-box                          → caja 💡 de ayuda (p.ej. al crear estudio)
     .hint-text / .hint-text-center     → pistas de ayuda
     .forjados-shell-note               → nota explicativa del panel admin de Forjados
     .paradoja-form-resp__archived-note → aviso "esta es una paradoja anterior…"
     .app-desc                          → MARCA añadida a los subtítulos descriptivos
                                          de sección (admin de comité/Iglesia y vistas
                                          de miembro): "Crea estudios…", "Gestiona las
                                          iglesias…", "Compón una notificación…", "Modera
                                          la comunidad…", "Toca una entrada…", etc.
                                          (NO se tocaron estados vacíos, leyendas de
                                          datos, avisos de seguridad ni el login.)
     #registro-cultos-intro             → subtítulo de "Registro de Cultos" (el JS limpia
                                          su display inline, así que se oculta por id)
   =========================================================================== */
.info-box,
.hint-text,
.hint-text-center,
.forjados-shell-note,
.paradoja-form-resp__archived-note,
.app-desc,
#registro-cultos-intro{
  display: none !important;
}

/* ===========================================================================
   [2026-06-18] VISOR de canciones a pantalla completa ("modo músico") — comité
   Alabanza. Overlay oscuro para leer la letra desde el móvil mientras se canta:
   letra grande (A−/A+), anterior/siguiente (botón grande + swipe + teclado),
   lista para saltar de canción y wake-lock. Lógica en alabanza-cronograma.js.
   =========================================================================== */
.alab-visor-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;
  margin-top:10px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border:none;border-radius:12px;
  font-size:14px;font-weight:800;padding:12px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(109,40,217,0.35);}
.alab-visor-open:active{transform:scale(.98);}
/* [2026-06-20] Feedback de PULSADO para los botones de las tarjetas de programación (Registrar,
   Notificar, Editar, 🗑): se hunden y oscurecen al tocarlos. */
.alab-press{transition:transform .08s ease, filter .08s ease, box-shadow .08s ease;-webkit-tap-highlight-color:transparent;}
.alab-press:active{transform:scale(.94);filter:brightness(.92);box-shadow:0 1px 3px rgba(15,23,42,0.25) inset;}
.alab-visor{position:fixed;inset:0;z-index:100000;background:#0b0f17;color:#f1f5f9;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select:none;user-select:none;overscroll-behavior:contain;}
.alab-visor__top,.alab-visor__bottom{display:flex;align-items:center;gap:8px;padding:10px 12px;flex:0 0 auto;}
.alab-visor__top{border-bottom:1px solid rgba(255,255,255,0.08);}
.alab-visor__bottom{border-top:1px solid rgba(255,255,255,0.08);gap:10px;}
.alab-visor__title{flex:1;min-width:0;text-align:left;background:transparent;border:none;color:#f1f5f9;
  font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:6px 4px;}
.alab-visor__count{font-size:12px;color:#94a3b8;font-weight:700;margin-left:6px;}
.alab-visor__btn{flex:0 0 auto;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:#f1f5f9;
  border-radius:10px;font-size:15px;font-weight:800;padding:9px 12px;cursor:pointer;line-height:1;min-width:44px;}
.alab-visor__btn:active{transform:scale(.95);}
.alab-visor__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:18px 6px 28px;}
.alab-visor__lyrics{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.55;font-weight:600;max-width:100%;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
/* Con acordes: monospace (conserva la alineación de los acordes sobre la letra) PERO con
   `pre-wrap` (hereda de la base) para que las líneas largas ENVUELVAN en lugar de hacer
   scroll horizontal; así se puede ampliar/reducir sin desbordar a lo ancho. */
.alab-visor__lyrics--chords{font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.4;}
.alab-visor__nav{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:none;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-radius:14px;font-size:17px;font-weight:800;padding:16px 10px;cursor:pointer;}
.alab-visor__nav:active{transform:scale(.98);}
.alab-visor__nav--prev{flex:0 0 auto;min-width:64px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:#f1f5f9;padding:16px 18px;}
.alab-visor__nav:disabled{opacity:.35;}
.alab-visor__list{position:absolute;inset:0;z-index:5;background:rgba(11,15,23,0.98);overflow-y:auto;
  padding:14px 14px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;}
/* El atributo `hidden` debe ganar al display:flex de arriba (si no, el panel de lista
   tapa TODO el visor desde el inicio: fondo oscuro vacío y sin poder cerrar). */
.alab-visor__list[hidden]{display:none !important;}
.alab-visor__list-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:16px;font-weight:800;color:#f1f5f9;padding:4px 2px 6px;}
.alab-visor__list-item{text-align:left;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  color:#f1f5f9;border-radius:12px;font-size:16px;font-weight:700;padding:14px 16px;cursor:pointer;}
.alab-visor__list-item.is-cur{background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-color:transparent;}
.alab-visor__list-item:active{transform:scale(.99);}
/* [2026-06-20] Dos dominicales: selector 1ª/2ª en el visor → solo se ven las letras de la elegida. */
.alab-visor__doms{display:flex;gap:8px;padding:0 14px 8px;flex-shrink:0;}
/* [2026-07-11] El selector 1ª/2ª dominical SOLO en programaciones de dos dominicales; en el banco (una
   sola lista) NO debe salir. El atributo `hidden` no bastaba porque display:flex lo pisaba (mismo patrón
   que .alab-visor__list[hidden]). */
.alab-visor__doms[hidden]{display:none !important;}
.alab-visor__domsel{flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
  color:#cbd5e1;border-radius:999px;font-size:13px;font-weight:800;padding:9px 10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .12s,color .12s;}
.alab-visor__domsel.is-active{background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-color:transparent;color:#fff;}
.alab-visor__domsel:active{transform:scale(.98);}
/* Banco de canciones (desplegable admin/miembro): ocultar el marcador nativo del <details>. */
.alab-banco>summary{list-style:none;}
.alab-banco>summary::-webkit-details-marker{display:none;}
/* Banco de canciones — CATÁLOGO (admin y miembro): buscador + canciones que abren el visor. */
.alab-banco-search{width:100%;box-sizing:border-box;font-size:15px;padding:11px 13px;margin-bottom:12px;
  border:1px solid #d1d5db;border-radius:10px;background:#f8fafc;color:#0f172a;outline:none;}
.alab-banco-search:focus{border-color:#8b5cf6;background:#fff;}
.alab-cat-list{display:flex;flex-direction:column;gap:8px;}
.alab-cat-item{display:flex;align-items:center;gap:10px;cursor:pointer;
  background:#f8fafc;border:1px solid #e9edf2;border-radius:12px;padding:11px 13px;}
.alab-cat-item:active{transform:scale(.99);}
.alab-cat-main{flex:1;min-width:0;}
/* [2026-07-11] Título COMPLETO (no truncar): se permite que envuelva para leer el nombre entero. */
.alab-cat-ttl{font-size:14px;font-weight:800;color:#0f172a;white-space:normal;line-height:1.25;overflow-wrap:anywhere;}
.alab-cat-sub{font-size:12px;color:#94a3b8;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
/* [2026-07-11] Botón de editar MUCHO más pequeño para ganar espacio para el título. */
.alab-cat-edit{flex:0 0 auto;background:var(--teal-bg,#e6f7f9);border:1px solid var(--border,#cfe8ec);color:var(--teal2,#0e7490);
  border-radius:8px;font-size:12px;padding:3px 6px;cursor:pointer;line-height:1;}
.alab-cat-edit:active{transform:scale(.95);}
.alab-cat-go{flex:0 0 auto;color:#cbd5e1;font-size:16px;font-weight:800;padding-right:2px;}
.alab-cat-empty{font-size:13px;color:#94a3b8;padding:8px 2px;}

/* ===========================================================================
   [2026-06-18] CANASTA DE AYUDA (Obra Social) — catálogo de artículos. Inputs y
   textos GRANDES; donar/añadir con botón. Admin edita; el miembro dona (self-service).
   =========================================================================== */
.can-add{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:6px 0 4px;}
.can-inp-lg{flex:1 1 160px;min-width:120px;box-sizing:border-box;font-size:15px;padding:11px 13px;
  border:1px solid #d1d5db;border-radius:11px;background:#fff;color:#0f172a;outline:none;}
.can-inp-lg:focus{border-color:#16a34a;}
.can-inp-meta{flex:0 0 92px;min-width:80px;max-width:110px;text-align:center;font-weight:800;}
/* Botones que SE SIENTEN como botones (relleno sólido + sombra). */
.can-add-btn{flex:0 0 auto;font-size:14px;font-weight:800;padding:11px 16px;border-radius:11px;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.14);}
.can-add-btn:active{transform:scale(.97);}
.can-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.can-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:12px 14px;}
.can-card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;}
.can-card-ttl{font-size:15px;font-weight:800;color:#0f172a;}
.can-card-num{font-size:13.5px;font-weight:700;color:#475569;white-space:nowrap;}
.can-ok{color:#16a34a;font-weight:800;}
.can-falta{color:#b45309;font-weight:800;}
.can-bar{height:7px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:8px 0 10px;}
.can-bar-fill{height:100%;border-radius:999px;transition:width .25s ease;}
.can-card-acts{display:flex;flex-wrap:wrap;gap:7px;}
.can-don-add{flex:1 1 auto;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;border:none;
  border-radius:11px;font-size:14px;font-weight:800;padding:10px 14px;cursor:pointer;box-shadow:0 2px 6px rgba(21,128,61,0.3);}
.can-don-add:active{transform:scale(.98);}
.can-card-mini{flex:0 0 auto;background:var(--teal-bg,#e6f7f9);border:1px solid var(--border,#cfe8ec);
  color:var(--teal2,#0e7490);border-radius:11px;font-size:14px;font-weight:700;padding:10px 12px;cursor:pointer;line-height:1;}
.can-card-mini.can-card-del{background:var(--red-bg,#fee2e2);border-color:rgba(239,68,68,0.3);color:var(--red,#dc2626);}
.can-card-mini:active{transform:scale(.95);}
.can-donar-btn{display:block;width:100%;box-sizing:border-box;background:linear-gradient(135deg,#22c55e,#15803d);
  color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;padding:12px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(21,128,61,0.3);}
.can-donar-btn:active{transform:scale(.99);}
.can-entrega-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f8fafc;border:1px solid #e9edf2;border-radius:11px;padding:10px 12px;font-size:14px;color:#0f172a;}
.can-empty{font-size:13.5px;color:#94a3b8;padding:10px 2px;}
.can-sub{font-size:14px;color:#0f172a;}
/* Tabla de conteo de donaciones. */
.can-tally{margin-top:14px;}
.can-tally-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;}
.can-tally-ttl{font-size:13px;font-weight:800;color:#0f172a;margin-bottom:6px;}
.can-tally-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.can-tally-tbl th{text-align:left;font-size:11px;font-weight:800;color:#64748b;padding:4px 6px;border-bottom:1px solid #e2e8f0;}
.can-tally-tbl td{padding:6px 6px;border-bottom:1px solid #f1f5f9;vertical-align:top;}
.can-tally-nm{font-weight:700;color:#0f172a;white-space:nowrap;}
.can-tally-det{color:#475569;}
.can-tally-tot{text-align:right;font-weight:800;color:#0f172a;}
/* Repartir en canastas. */
.can-repartir-btn{display:block;width:100%;box-sizing:border-box;margin-top:14px;background:linear-gradient(135deg,#7c3aed,#5b21b6);
  color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;padding:13px;cursor:pointer;box-shadow:0 2px 8px rgba(91,33,182,0.3);}
.can-repartir-btn:active{transform:scale(.99);}
.can-rep-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:11px 13px;margin-bottom:10px;}
.can-rep-hd{font-size:15px;font-weight:800;color:#7a4878;margin-bottom:6px;}
.can-rep-arts{display:flex;flex-wrap:wrap;gap:5px;}
.can-rep-chip{display:inline-block;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;font-size:12.5px;font-weight:700;color:#334155;padding:3px 9px;}
/* "Tú diste ×N · Quitar" en la tarjeta del miembro (corregir un aporte por error). */
.can-mio{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;font-size:13px;color:#334155;}
.can-mio span{font-weight:700;}
.can-quitar{background:var(--red-bg,#fee2e2);border:1px solid rgba(239,68,68,0.3);color:var(--red,#dc2626);
  border-radius:9px;font-size:12.5px;font-weight:800;padding:6px 11px;cursor:pointer;}
.can-quitar:active{transform:scale(.96);}
/* +/- de a uno en "Tú diste ×N" (añadir/quitar parcial). */
.can-mio-step{display:inline-flex;align-items:stretch;border:1px solid #cbd5e1;border-radius:9px;overflow:hidden;}
.can-mio-btn{width:38px;border:none;background:#f1f5f9;color:#0f172a;font-size:18px;font-weight:800;line-height:1;cursor:pointer;}
.can-mio-btn:first-child{border-right:1px solid #e2e8f0;}
.can-mio-btn:active{background:#e2e8f0;}
.can-quitar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f8fafc;border:1px solid #e9edf2;border-radius:10px;padding:9px 12px;font-size:14px;color:#0f172a;}
/* Stepper +/- (cantidad, meta): botones grandes para añadir/quitar sin teclear. */
.can-step{display:inline-flex;align-items:stretch;gap:0;border:1px solid #d1d5db;border-radius:11px;overflow:hidden;background:#fff;}
.can-step-btn{flex:0 0 auto;width:42px;border:none;background:#f1f5f9;color:#0f172a;font-size:20px;font-weight:800;line-height:1;cursor:pointer;}
.can-step-btn:active{background:#e2e8f0;}
.can-step-inp{flex:1 1 auto;width:64px;min-width:48px;border:none;outline:none;text-align:center;font-size:16px;font-weight:800;color:#0f172a;background:#fff;padding:11px 2px;-moz-appearance:textfield;}
.can-step-inp::-webkit-outer-spin-button,.can-step-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* [2026-06-18] Finanzas del Comité: textos/inputs MÁS GRANDES (los textos informativos se ocultan
   vía .app-desc). Scoped a #t-finanzas para no afectar otros formularios. El !important en
   font-size es para vencer los `font-size:12px` inline de los campos "…o escribe un nombre". */
#t-finanzas .fr label{font-size:12.5px;font-weight:700;color:#0f172a;}
#t-finanzas .fr input,#t-finanzas .fr select{font-size:14.5px !important;padding:10px 12px;border-radius:10px;}
#t-finanzas .panel-title{font-size:16px;}

/* ═══════════════════════════════════════════════════════════════
   [Administración Local 2026-07] Hub «Secretaría» (réplica IPUE) + Censo.
   Estilos del hub de áreas (#t-secretaria) y del cuadro de censo.
   ═══════════════════════════════════════════════════════════════ */
.sec-hub-head{margin:4px 0 14px;}
.sec-hub-title{font-size:19px;font-weight:800;color:#0f172a;margin:0;}
.sec-hub-sub{font-size:13px;color:#64748b;margin:2px 0 0;}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.sec-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:16px 12px;border:1.5px solid #e5e7eb;border-radius:14px;background:#fff;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;font-family:inherit;}
.sec-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.10);border-color:#cbd5e1;}
.sec-tile-ico{font-size:30px;line-height:1;}
.sec-tile-lbl{font-size:14px;font-weight:800;color:#0f172a;}
.sec-tile-desc{font-size:11px;color:#64748b;line-height:1.25;}
.sec-tile-soon{opacity:.72;}
.sec-tile-badge{margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;padding:2px 8px;}
.sec-sub{margin-top:18px;border-top:1px dashed #e5e7eb;padding-top:14px;}
.sec-back{background:none;border:none;color:#2563eb;font-size:13px;font-weight:700;cursor:pointer;padding:4px 0;margin-bottom:8px;font-family:inherit;}
.sec-back:hover{text-decoration:underline;}
.sec-sub-title{font-size:17px;font-weight:800;color:#0f172a;margin:0 0 2px;}
.sec-sub-note{font-size:12.5px;color:#64748b;margin:0 0 14px;}
.sec-soon{text-align:center;padding:30px 16px;color:#64748b;}
.sec-soon-ico{font-size:44px;margin-bottom:8px;}
.sec-soon h3{margin:0 0 6px;color:#0f172a;font-size:17px;}
.sec-censo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.sec-censo-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px 10px;text-align:center;}
.sec-censo-click{cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease;}
.sec-censo-click:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.10);border-color:#c7d2fe;}
.sec-censo-click:active{transform:translateY(0);}
.sec-censo-card-main.sec-censo-click:hover{box-shadow:0 6px 20px rgba(37,99,235,.35);}
.sec-censo-card-main{grid-column:1/-1;background:linear-gradient(135deg,#1e3a8a,#2563eb);border:none;color:#fff;}
.sec-censo-num{font-size:26px;font-weight:800;color:#0f172a;line-height:1;}
.sec-censo-card-main .sec-censo-num{color:#fff;font-size:34px;}
.sec-censo-lbl{font-size:11.5px;color:#64748b;margin-top:4px;font-weight:600;}
.sec-censo-card-main .sec-censo-lbl{color:rgba(255,255,255,.9);font-size:13px;}

/* [Administración Local 2026-07] Historial de Secretaría (Reseña, Documentación) */
.sec-hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;}
.sec-add-btn{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;}
.sec-add-btn:hover{background:#1d4ed8;}
.sec-empty{text-align:center;color:#64748b;padding:26px 14px;font-size:13px;background:#f8fafc;border:1px dashed #e2e8f0;border-radius:12px;}
.sec-hist-list{display:flex;flex-direction:column;gap:10px;}
.sec-hist-item{border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;background:#fff;}
.sec-hist-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.sec-hist-item-head>div{min-width:0;}
.sec-hist-item-title{font-size:14.5px;font-weight:800;color:#0f172a;overflow-wrap:anywhere;}
.sec-hist-item-sub{font-size:12px;color:#2563eb;font-weight:700;margin-top:1px;}
.sec-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:999px;vertical-align:middle;white-space:nowrap;}
.sec-badge-green{color:#166534;background:#dcfce7;border:1px solid #bbf7d0;}
.sec-badge-amber{color:#b45309;background:#fef3c7;border:1px solid #fde68a;}
.sec-hist-item-date{font-size:12px;color:#64748b;text-align:right;flex-shrink:0;max-width:42%;}
.sec-hist-item-body{font-size:13px;color:#334155;margin-top:8px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.sec-hist-link{display:inline-block;margin-top:8px;font-size:12.5px;color:#2563eb;font-weight:700;text-decoration:none;overflow-wrap:anywhere;}
.sec-hist-link:hover{text-decoration:underline;}
.sec-hist-item-acts{display:flex;gap:8px;margin-top:10px;}
.sec-mini{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;color:#334155;font-family:inherit;}
.sec-mini:hover{background:#e2e8f0;}
.sec-mini-del{color:#b91c1c;background:#fef2f2;border-color:#fecaca;}
.sec-mini-del:hover{background:#fee2e2;}
.sec-form{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;min-width:0;}
.sec-fr{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sec-fr label{font-size:12.5px;font-weight:700;color:#334155;}
/* width:100% + box-sizing NO basta para input[type=date]: en iOS/Safari tiene un
   ancho intrínseco (min-content) que desborda el contenedor y provoca scroll
   horizontal. min-width:0 + max-width:100% + appearance:none lo neutraliza. */
.sec-inp{width:100%;max-width:100%;min-width:0;padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;font-family:inherit;box-sizing:border-box;}
input.sec-inp[type=date]{-webkit-appearance:none;appearance:none;}
.sec-inp:focus{outline:none;border-color:#2563eb;}
textarea.sec-inp{resize:vertical;}
.sec-form-acts{display:flex;gap:10px;}
.sec-btn{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;color:#334155;font-family:inherit;}
.sec-btn:hover{background:#e2e8f0;}
.sec-btn-primary{background:#2563eb;color:#fff;border-color:#2563eb;}
.sec-btn-primary:hover{background:#1d4ed8;}

/* [Administración Local 2026-07] Inventario */
.sec-inv-totals{font-size:12.5px;color:#334155;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;margin:2px 0 12px;}
.sec-inv-totals b{color:#0f172a;}
.sec-inv-list{display:flex;flex-direction:column;gap:8px;}
.sec-inv-item{display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;background:#fff;}
.sec-inv-main{min-width:0;flex:1;}
.sec-inv-nom{font-size:14px;font-weight:800;color:#0f172a;overflow-wrap:anywhere;}
.sec-inv-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;}
.sec-inv-ref{font-size:10.5px;font-weight:800;color:#4f46e5;background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.25);border-radius:999px;padding:1px 7px;}
.sec-inv-ubi{font-size:10.5px;font-weight:700;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:1px 7px;}
.sec-inv-num{text-align:right;flex-shrink:0;}
.sec-inv-unid{font-size:12px;color:#64748b;}
.sec-inv-val{font-size:13.5px;font-weight:800;color:#0f766e;}
.sec-inv-acts{display:flex;gap:5px;flex-shrink:0;}

/* [Directivas 2026-07] Filas de nombramiento (cargo → miembro) + filas de directiva */
.dir-row{width:100%;text-align:left;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dir-row:hover{border-color:#cbd5e1;background:#f8fafc;}
.dir-nom-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;min-width:0;}
.dir-nom-row .dir-nom-cargo{flex:0 0 38%;min-width:0;}
.dir-nom-row .dir-nom-mi{flex:1;min-width:0;}
.dir-nom-row .dir-nom-del{flex:0 0 auto;padding:8px 10px;}
.dir-role{display:inline-block;font-size:10.5px;font-weight:700;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:1px 8px;}

/* [Administración Local 2026-07] Adjuntos de Secretaría (chips en formulario + miniaturas en listado) */
.sec-adj-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.sec-adj-empty{font-size:12px;color:#94a3b8;}
.sec-adj-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:4px 6px 4px 4px;}
.sec-adj-thumb{width:38px;height:38px;object-fit:cover;border-radius:7px;flex-shrink:0;background:#eef2f7;}
.sec-adj-ico{font-size:24px;width:38px;text-align:center;flex-shrink:0;}
.sec-adj-name{font-size:12px;color:#2563eb;text-decoration:none;overflow-wrap:anywhere;max-width:150px;}
.sec-adj-name:hover{text-decoration:underline;}
.sec-adj-del{border:none;background:#fee2e2;color:#b91c1c;border-radius:6px;width:22px;height:22px;cursor:pointer;font-size:12px;flex-shrink:0;}
.sec-adj-add{display:inline-block;font-size:12.5px;font-weight:700;color:#334155;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:10px;padding:8px 14px;cursor:pointer;}
.sec-adj-add:hover{background:#e2e8f0;}
.sec-adj-filelink{font-size:12.5px;color:#2563eb;text-decoration:none;background:#eff6ff;border:1px solid #dbeafe;border-radius:8px;padding:4px 8px;overflow-wrap:anywhere;}

/* [Directivas 2026-07] Vista de comité: directiva vigente derivada + integrantes + editor acotado */
.dir-board{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px;}
.dir-board-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(135deg,#ffffff,#f6f8fc);border:1px solid #e6ebf3;border-left:4px solid #6366f1;border-radius:12px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:box-shadow .12s ease,transform .08s ease;}
.dir-board-row:hover{box-shadow:0 4px 14px rgba(15,23,42,.09);transform:translateY(-1px);}
.dir-board-ico{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;text-align:center;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;background:#eef2ff;border:1px solid #e0e7ff;border-radius:50%;overflow:hidden;}
.dir-board-cargo{font-weight:800;color:#0f172a;font-size:12px;letter-spacing:.02em;text-transform:uppercase;flex:0 0 34%;min-width:88px;}
.dir-board-quien{color:#1e293b;font-size:13.5px;font-weight:600;min-width:0;overflow-wrap:anywhere;flex:1;}
.dir-add{display:flex;gap:8px;align-items:center;margin-top:12px;}
.dir-add input[type=text]{flex:1;min-width:0;}
.dir-add .sec-add-btn{flex:0 0 auto;}
.dir-roles{display:flex;flex-wrap:wrap;gap:10px;}
.dir-rolechk{font-size:12px;color:#3730a3;display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.dir-chk{font-size:13px;color:#334155;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;}
.dir-note{font-size:12.5px;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;line-height:1.4;}
.dir-note b{color:#0f172a;}

/* [Secretaría/Directivas 2026-07] «Ventana» modal para las sub-vistas (no debajo del hub) */
/* [2026-07-16] overscroll-behavior:contain — SIN esto, en iOS el overscroll del contenedor fijo se propagaba al
   documento (rubber-band) y la "ventana" se despegaba dejando ver la app de debajo (cabecera + rejilla). Igual
   que .sheet. overscroll-behavior:none refuerza que ni siquiera haga el rebote local. */
.adm-window{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.5);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.adm-window-inner{background:#f8fafc;max-width:900px;margin:0 auto;min-height:100%;box-shadow:0 0 80px rgba(0,0,0,.35);}
@media(min-width:940px){ .adm-window-inner{margin:26px auto;min-height:auto;border-radius:16px;overflow:hidden;} }
.adm-window-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid #e5e7eb;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px 14px;}
/* [2026-07-03] Botón «volver» de las ventanas admin (Secretaría/Directivas): antes era solo texto azul
   sin fondo (no parecía botón). Ahora es un botón pill, consistente con el ✕ de cierre. */
.adm-back{display:inline-flex;align-items:center;gap:5px;background:#eef2f7;border:1px solid #d7dee8;color:#334155;font-size:13px;font-weight:700;cursor:pointer;padding:7px 14px;border-radius:10px;font-family:inherit;line-height:1;transition:background .15s,border-color .15s;}
.adm-back:hover{background:#e2e8f0;border-color:#c3cddb;}
.adm-back:active{background:#d7dee8;}
.adm-window-x{border:none;background:#f1f5f9;color:#334155;border-radius:9px;width:34px;height:34px;font-size:16px;cursor:pointer;flex-shrink:0;line-height:1;}
.adm-window-x:hover{background:#e2e8f0;}
.adm-window-body{padding:16px 18px 34px;}

/* ══════════════════════════════════════════════════════════════
   ESTADÍSTICAS DE LA IGLESIA (pestaña Informes) — [2026-07-20]
   Gráficos hechos a mano (el proyecto no lleva librería de charts):
   .ist-bars = barras horizontales · .ist-cols = columnas por mes.
   ══════════════════════════════════════════════════════════════ */
.ist-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.ist-head-main{flex:1;min-width:0;}
.ist-head-ttl{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.2px;}
.ist-head-sub{font-size:12px;color:var(--text3);font-weight:600;margin-top:2px;}
.ist-head-btn{flex:0 0 auto;padding:9px 16px;font-size:12.5px;}
.ist-chips{margin-bottom:14px;}
.ist-kpis{margin-bottom:14px;}
.ist-kpis .stat-num{font-size:24px;}
.ist-panel{margin-bottom:14px;}
.ist-desc{font-size:12px;color:var(--text3);line-height:1.45;margin:-4px 0 12px;}
.ist-sub{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--text3);margin:16px 0 8px;}
.ist-panel .ist-sub:first-of-type{margin-top:4px;}
.ist-empty{font-size:12.5px;color:var(--text3);background:var(--off);border-radius:10px;padding:10px 12px;}
.ist-note{font-size:12px;color:var(--text3);margin-top:8px;}

/* Barras horizontales */
.ist-bars{display:flex;flex-direction:column;gap:7px;}
.ist-bar-row{display:flex;align-items:center;gap:9px;font-size:12.5px;}
.ist-bar-lbl{width:38%;max-width:180px;flex-shrink:0;color:var(--text2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ist-bar-track{flex:1;min-width:0;height:9px;background:var(--off);border-radius:999px;overflow:hidden;}
.ist-bar-fill{height:100%;border-radius:999px;transition:width .35s ease;}
.ist-bar-val{flex:0 0 auto;min-width:56px;text-align:right;font-weight:800;color:var(--text);font-size:12px;font-variant-numeric:tabular-nums;}

/* Columnas por mes (scroll horizontal en móvil) */
.ist-cols{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;padding:4px 2px 0;-webkit-overflow-scrolling:touch;}
.ist-col{flex:1 0 34px;min-width:34px;display:flex;flex-direction:column;align-items:center;}
.ist-col-num{font-size:10.5px;font-weight:800;color:var(--text2);height:14px;line-height:14px;font-variant-numeric:tabular-nums;}
.ist-col-stack{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:96px;width:100%;background:linear-gradient(to top,var(--off) 0 1px,transparent 1px);}
.ist-col-bar{width:11px;border-radius:4px 4px 0 0;min-height:0;transition:height .35s ease;}
.ist-col-one{width:18px;background:var(--teal);}
.ist-col-in{background:var(--green);}
.ist-col-out{background:var(--red);}
.ist-col-lbl{font-size:9.5px;color:var(--text3);font-weight:700;margin-top:5px;white-space:nowrap;}

/* Reparto (barra segmentada) + leyenda */
.ist-split{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--off);margin-bottom:8px;}
.ist-split-seg{height:100%;}
.ist-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--text2);font-weight:600;}
.ist-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle;}
.ist-legend-c{justify-content:center;margin-top:8px;}

/* Cifras en línea + etiquetas */
.ist-inline{display:flex;flex-wrap:wrap;gap:8px;}
.ist-mini{flex:1 1 90px;background:var(--off);border-radius:12px;padding:9px 11px;text-align:center;}
.ist-mini b{display:block;font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.2px;}
.ist-mini span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:700;margin-top:2px;}
.ist-pos{color:var(--green)!important;}
.ist-neg{color:var(--red)!important;}
.ist-chipswrap{display:flex;flex-wrap:wrap;gap:6px;}
.ist-tag{font-size:12px;font-weight:600;color:var(--text2);background:var(--teal-bg);border:1px solid var(--border);border-radius:999px;padding:4px 10px;}

@media(max-width:520px){
  .ist-bar-lbl{width:44%;}
  .ist-head-ttl{font-size:16px;}
  .ist-kpis .stat-num{font-size:21px;}
}

/* [2026-07-21] Registro de Iglesia: aprovechar más el ancho + texto un punto más grande (petición
   del usuario, capturas IMG_1731). El margen del contenedor baja de 16px a 8px por lado; los textos
   de las TARJETAS (.igl-culto-item) suben +1px. Selectores por subcadena del `font-size` en línea +
   !important porque las tarjetas usan estilos en línea (que ganan a una regla normal). Los pares
   12px/12.5px y 11px/11.5px NO se solapan (la subcadena "font-size:12px" no está en "12.5px"). */
#t-iglesia-cultos .pg{ padding-left:8px; padding-right:8px; }
.igl-culto-item [style*="font-size:11px"]{ font-size:12px !important; }
.igl-culto-item [style*="font-size:11.5px"]{ font-size:12.5px !important; }
.igl-culto-item [style*="font-size:12px"]{ font-size:13px !important; }
.igl-culto-item [style*="font-size:12.5px"]{ font-size:13.5px !important; }
.igl-culto-item [style*="font-size:14.5px"]{ font-size:14px !important; }

/* [2026-07-21] Admin: el título de la marca (nombre del ámbito) es redundante con el selector de
   ámbito → se oculta el texto de la marca; queda el logo + el selector. Al liberar ese espacio, el
   selector puede ser más ancho (el nombre del comité ya no se corta) y los botones del header dejan
   de salirse del cuadro en móvil (petición del usuario, capturas IMG_1735-1737). */
/* [2026-07-21] El título de la marca solo se oculta cuando el SELECTOR de ámbito está visible (super
   "viendo como" admin de iglesia/comité). El SUPER PURO no tiene selector → debe ver «IGLESIA APP». */
body.admin-scope-switcher-on #screen-admin .hbrand-text{ display:none; }
#screen-admin #admin-scope-switcher{ max-width:none; min-width:0; flex:1 1 auto; }
/* [2026-07-21] Botón "volver a Iglesia" del MISMO tamaño que el engranaje (petición): ambos = cuadrado
   idéntico en la cabecera del admin. */
#screen-admin .hacts .pv-hdr-btn-iglesia,
#screen-admin .hacts .admin-perfil-btn{
  width:34px; height:34px; min-height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:15px; line-height:1; box-sizing:border-box;
}
#screen-admin .hacts .pv-hdr-btn-iglesia .pv-hdr-btn-ico{ font-size:15px; }

/* [2026-07-25] SCRIM DE LA BARRA DE ESTADO (iOS PWA). Con `black-translucent` el reloj y los iconos del
   sistema (cobertura/wifi/batería) son BLANCOS y el contenido llega hasta el borde. Sobre fondos claros
   (lobby) ese texto blanco se perdía. Este velo oscuro sutil cubre SOLO la franja del safe-area superior
   para dar contraste al texto del sistema en cualquier pantalla, con degradado que se desvanece hacia abajo
   (sin línea dura). En navegador normal el inset es 0 → invisible. pointer-events:none → nunca bloquea toques. */
body::before{
  content:"";
  position:fixed; top:0; left:0; right:0;
  /* Se extiende bastante MÁS ALLÁ del safe-area para que el desvanecimiento sea largo y no se note el corte. */
  height:calc(env(safe-area-inset-top, 0px) + 34px);
  background:linear-gradient(180deg,
    rgba(12,17,28,0.50) 0%,
    rgba(12,17,28,0.42) 24%,
    rgba(12,17,28,0.30) 44%,
    rgba(12,17,28,0.18) 62%,
    rgba(12,17,28,0.08) 80%,
    rgba(12,17,28,0.02) 92%,
    rgba(12,17,28,0) 100%);
  pointer-events:none;
  z-index:2147483000;
}
/* [2026-08-01] En la APP NATIVA iOS (html.ios-shell, build ≥4) la barra de estado se ADAPTA sola al fondo
   (texto oscuro sobre claro, claro sobre oscuro), así que el velo sobra y se veía como una banda gris. Se
   oculta SOLO ahí; en la PWA de Safari (barra blanca fija black-translucent) el velo se conserva. */
html.ios-shell body::before{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   [2026-07-29] BASE RESPONSIVE GLOBAL — «columna centrada + grids que crecen»
   ───────────────────────────────────────────────────────────────────────────
   La app es mobile-first: cabecera (.app-header), barras de pestañas (.app-nav /
   .pv-nav) y contenido (.pv-body / .pg) ocupaban TODO el ancho, así que en tablet
   y escritorio se estiraban de borde a borde. Aquí se define UNA columna de
   contenido común (--shell-max) a la que se alinean todas esas piezas.

   Técnica: fondo a todo el ancho (full-bleed) + contenido centrado mediante
   padding lateral AUTO-CALCULADO:
       padding-inline: max(base, (100% - --shell-max)/2)
   · En móvil / anchos < --shell-max, el segundo término es menor que la base →
     `max()` elige la BASE → NADA cambia respecto al diseño actual.
   · En pantallas anchas, el padding crece y centra el contenido.
   · Como el `100%` es el ancho del PROPIO elemento, si un .pg va anidado dentro
     de un .pv-body ya centrado, su fórmula da 0 y NO se estrecha dos veces.
   No toca el DOM. Las secciones que quieren MÁS ancho (Forjados) solo redefinen
   la variable --shell-max en su contenedor.
   ═══════════════════════════════════════════════════════════════════════════ */
/* [2026-07-31] Ancho de contenido UNIFICADO a 1120px (el más ancho de la app: admin/recaudador). Antes 960
   dejaba muchas secciones más angostas que el panel de admin; ahora todas usan la misma columna. */
:root{ --shell-max:1120px; }

/* Cabecera: conserva su safe-area lateral como base mínima. */
.app-header{
  padding-left:max(calc(16px + env(safe-area-inset-left,0px)), calc((100% - var(--shell-max)) / 2));
  padding-right:max(calc(16px + env(safe-area-inset-right,0px)), calc((100% - var(--shell-max)) / 2));
}
/* En «modo función» (body.iglesia-feature: Estudios/Eventos/Peticiones… abiertos desde el
   lobby) la cabecera usaba padding 14px fijo, dejando el título pegado a la izquierda. Se
   alinea a la misma columna que el contenido (misma especificidad que la regla de 2075, gana
   por orden). */
body.iglesia-feature .app-header{
  padding-left:max(14px, calc((100% - var(--shell-max)) / 2));
  padding-right:max(14px, calc((100% - var(--shell-max)) / 2));
}
/* Barra de pestañas del admin (sin padding lateral base propio). */
.app-nav{
  padding-left:max(0px, calc((100% - var(--shell-max)) / 2));
  padding-right:max(0px, calc((100% - var(--shell-max)) / 2));
}
/* Barra de pestañas de la vista de miembro (base 8px). */
.pv-nav{
  padding-left:max(8px, calc((100% - var(--shell-max)) / 2));
  padding-right:max(8px, calc((100% - var(--shell-max)) / 2));
}
/* Variante de dos filas (base 10px; gana a `.pv-nav.pv-nav-two-rows` por orden). */
.pv-nav.pv-nav-two-rows{
  padding-left:max(10px, calc((100% - var(--shell-max)) / 2));
  padding-right:max(10px, calc((100% - var(--shell-max)) / 2));
}
/* Cuerpo de contenido (base 16px). */
.pv-body,
.pg{
  padding-left:max(16px, calc((100% - var(--shell-max)) / 2));
  padding-right:max(16px, calc((100% - var(--shell-max)) / 2));
}
/* Forjados (tablero de juego «Pruebas Bíblicas»): su contenido vive en un
   .pv-body.forjados-shell-body con padding 6px propio que pisaba la base, así que en
   pantallas anchas se estiraba de borde a borde (minijuegos gigantes). Se centra en una
   columna cómoda de 1080px. */
.forjados-shell-pg,
.forjados-shell-body{ --shell-max:1120px; }
.pv-body.forjados-shell-body{ max-width:1120px !important; margin-left:auto !important; margin-right:auto !important; }

/* ───────────────────────────────────────────────────────────────────────────
   ARREGLOS RESPONSIVE POR SECCIÓN (tablet/escritorio)
   El markup lo pinta el JS con estilos inline y sin clases, así que se apunta por
   los `id` estables de cada contenedor. En móvil todas las rejillas colapsan a 1
   columna (minmax con mínimo ≥ ancho de móvil).
   ─────────────────────────────────────────────────────────────────────────── */

/* Varias pestañas de la vista de miembro (Registro/cronograma, Listado, etc.) pintan su
   contenido en un `.pg` con max-width:680px inline que quedaba PEGADO A LA IZQUIERDA en
   pantallas anchas. Se centran todos de una vez. */
.pv-tab > .pg{ margin-left:auto !important; margin-right:auto !important; }
/* [2026-07-31 FIX doble-sangrado] Los .pg de las pestañas de miembro/comité YA están centrados por la regla de
   arriba (margin:auto) y la mayoría trae un max-width propio. Pero la regla general `.pg{padding-inline:max(16px,
   (100%-shell-max)/2)}` (pensada para .pg a todo el ancho, full-bleed) les añadía ADEMÁS ~160px de padding
   calculado sobre el padre (1280), estrechando el contenido a ~640px (comité «Registro»/«Jóvenes» salían como una
   columna angosta). Al estar ya capados+centrados, su padding lateral debe ser la BASE (16px). */
.pv-tab > .pg{ padding-left:16px !important; padding-right:16px !important; }
/* [2026-07-31] Unificar el ANCHO de todas las pestañas de miembro/comité a --shell-max (1120). Muchas traen un
   max-width inline menor (680/960) que las dejaba más angostas que el admin; se igualan todas a la columna común. */
.pv-tab > .pg{ max-width:var(--shell-max) !important; }

/* Listado de miembros del comité (pestaña «Caballeros»/«Listado», #pvtab-secmiembros):
   además de centrar, se ensancha a 960 y las tarjetas se reparten en rejilla. */
#pvtab-secmiembros > .pg{ max-width:var(--shell-max) !important; }
/* [2026-07-31] El «Registro» del comité (pvtab-cronograma) y el listado se igualan al ancho común (--shell-max). */
#pvtab-cronograma > .pg{ max-width:var(--shell-max) !important; }
#pv-secmiembros-list{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px 12px; width:100%; align-items:start; }
#pv-secmiembros-list > div{ margin-bottom:0 !important; }
/* Los encabezados de grupo (Directiva / Integrantes) no llevan onclick → fila completa. */
#pv-secmiembros-list > div:not([onclick]){ grid-column:1 / -1; }

/* Finanzas de la vista de miembro (#pvtab-finanzas): su .pv-body trae max-width:1200
   inline (pensado para el libro ancho del admin); en el resumen del miembro son 4
   columnas, así que se alinea a la columna estándar para no dispersar KPIs y tabla. */
#pvtab-finanzas > .pv-body{ max-width:var(--shell-max) !important; margin-left:auto !important; margin-right:auto !important; padding-left:16px !important; padding-right:16px !important; }

/* ── PANEL ADMIN (#screen-admin) ──────────────────────────────────────────────
   El admin es un tablero de gestión: se le da una columna algo MÁS ancha (1120px)
   para tablas y listas, centrada. Nav de pestañas propia (.app-nav-admin, padding 7px)
   y contenido en `.tab > .pg`. El padding explícito neutraliza la regla @media de .pg. */
#screen-admin .app-nav-admin{
  padding-left:max(7px, calc((100% - 1120px) / 2));
  padding-right:max(7px, calc((100% - 1120px) / 2));
}
#screen-admin .tab > .pg{
  max-width:1120px !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:20px !important; padding-right:20px !important;
}
/* [2026-07-31] Varias pestañas de admin traían un max-width INLINE menor (680/700/760/800/900/1050) que dejaba su
   contenido más angosto que el resto; el `!important` de arriba lo vence y las unifica todas a 1120. */

/* ── RECAUDADOR / Junta Local (#screen-recaudador) ────────────────────────────
   Pantalla construida íntegramente con estilos inline (sin clases). Sus filas de
   primer nivel (cabecera, pestañas Registros/Miembros/Finanzas y contenido) iban a
   todo el ancho. Se centran a la misma columna que el admin (1120px). El contenido
   interno (tablas, tarjetas) queda más profundo y no se ve afectado por `> div > div`. */
#screen-recaudador > div > div{ max-width:1120px !important; margin-left:auto !important; margin-right:auto !important; }
/* [2026-07-31] La columna de contenido (.pg, max-width:1280 inline) NO estaba centrada: en pantallas anchas
   (>1280px) quedaba pegada a la izquierda mientras las pestañas (arriba) sí se centran → el contenido no alineaba
   con las pestañas (queja del usuario). Se centra a la MISMA columna (1120) que las pestañas. */
#screen-recaudador > .pg{ max-width:1120px !important; margin-left:auto !important; margin-right:auto !important; }

/* ── LOBBY responsive (escritorio / iPad) ─────────────────────────────────────────
   [2026-07-31] El lobby era mobile-first: sus bloques iban a max-width 420-480px, así que
   en pantallas anchas quedaba una columna angosta con enormes márgenes. Ahora sus bloques
   (#lobby-comun, #lobby-junta, #lobby-secciones) usan max-width:960px (inline) — el MISMO
   ancho de contenido que el resto de la app (Estudios/Eventos/Miembros/Finanzas). Una sola
   columna que se ensancha con la pantalla; en móvil (<960px) llena el ancho como antes. */