/* ============================================================
   ESTILOS GENERALES - Sitio de la iglesia
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primario: #1e3a5f;
    --primario-oscuro: #152a47;
    --primario-claro: #2e5d96;
    --dorado: #c9a227;
    --texto: #2d2d3a;
    --texto-suave: #6b6b7a;
    --fondo: #ffffff;
    --fondo-suave: #f4f6f9;
    --borde: #e2e8f0;
    --peligro: #dc3545;
    --exito: #1e7e34;
    --radio: 12px;
    --sombra: 0 4px 16px rgba(21, 42, 71, .08);
    --tarjeta: #ffffff;
    --sombra-fuerte: rgba(21, 42, 71, .14);
    --texto-suave-2: #6b6b7a;
    --titulo: var(--primario-oscuro);
}

/* ============ MODO OSCURO ============ */
html[data-tema="oscuro"] {
    --primario: #7ea6d9;
    --primario-oscuro: #0d1f38;
    --primario-claro: #35689e;
    --dorado: #e0b64a;
    --texto: #e6e8f0;
    --texto-suave: #a7adc0;
    --texto-suave-2: #8b92a5;
    --fondo: #101722;
    --fondo-suave: #182231;
    --borde: #2c3a50;
    --peligro: #ef6a6a;
    --exito: #54c06c;
    --sombra: 0 4px 16px rgba(0,0,0,.4);
    --sombra-fuerte: rgba(0,0,0,.55);
    --tarjeta: #182231;
    --titulo: #9fc1ef;
    color-scheme: dark;
}
html[data-tema="oscuro"] body { background: var(--fondo); color: var(--texto); }
html[data-tema="oscuro"] a { color: var(--primario-claro); }

/* Ajustes finos del modo oscuro */
html[data-tema="oscuro"] .aviso-ok { background: rgba(46, 125, 50, .22); color: #86d89a; }
html[data-tema="oscuro"] .aviso-info { background: rgba(23, 162, 184, .2); color: #8fd8e6; }
html[data-tema="oscuro"] .aviso-err { background: rgba(220, 53, 69, .22); color: #f5a1a1; }
html[data-tema="oscuro"] .aviso-aviso { background: rgba(180, 137, 20, .22); color: #e9d08a; }
html[data-tema="oscuro"] input,
html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] select {
    background: var(--fondo-suave);
    color: var(--texto);
    border-color: var(--borde);
}
html[data-tema="oscuro"] .compositor textarea { background: transparent; }
html[data-tema="oscuro"] textarea::placeholder,
html[data-tema="oscuro"] input::placeholder { color: var(--texto-suave-2); }

/* Tipografías: consistencia de títulos y etiquetas */
.encabezado-seccion h2, .pagina-titulo h1 { letter-spacing: -0.5px; }
.pagina-titulo p, .subtitulo-seccion { font-family: "Inter", system-ui, sans-serif; }
.etiqueta, .btn, button, input, select, textarea, .filtros a { font-family: "Inter", system-ui, sans-serif; }

html { scroll-behavior: smooth; }

/* Animación de aparición al hacer scroll */
.animar-al-ver { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.animar-al-ver.animado { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .animar-al-ver { opacity: 1; transform: none; transition: none; }
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .pagina-titulo h1, .encabezado-seccion h2 {
    font-family: "Playfair Display", "Georgia", serif;
    letter-spacing: -0.3px;
}

img { max-width: 100%; display: block; }
a { color: var(--primario); text-decoration: none; }
a:hover { opacity: .85; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.contenedor-estrecho { max-width: 760px; }

/* ============================================================
   CABECERA Y NAVEGACIÓN
   ============================================================ */
.cabecera {
    background: var(--primario-oscuro);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 400;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    transform: translate3d(0,0,0);
    transition: transform .22s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.cabecera.cabecera-oculta {
    transform: translate3d(0,-110%,0);
}
body.overlay-abierto .cabecera {
    transform: translate3d(0,0,0);
}
.cabecera-hueco {
    height: var(--cabecera-h, 58px);
    width: 100%;
    pointer-events: none;
}

/* Botón "volver arriba" estilo Facebook (aparece al bajar) */
.boton-subir {
    position: fixed; left: 18px; bottom: 18px; z-index: 120;
    width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--primario); color: #fff; padding: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    display: grid; place-items: center; font-size: 20px; line-height: 1;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s, transform .2s, visibility .2s, background .2s;
}
.boton-subir:hover { background: var(--primario-claro); opacity: 1; }
.boton-subir.visible { opacity: 1; visibility: visible; transform: none; }
.boton-subir svg { width: 22px; height: 22px; }

/* Botón modo oscuro */
.boton-tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2); cursor: pointer; color: #fff;
    flex-shrink: 0; transition: background .2s, transform .2s;
}
.boton-tema:hover { background: rgba(255,255,255,.22); transform: rotate(20deg) scale(1.05); }
.boton-tema-icono { font-size: 15px; line-height: 1; }
html[data-tema="oscuro"] .boton-tema-icono.sol { display: none; }
html:not([data-tema="oscuro"]) .boton-tema-icono.luna { display: none; }

.barra-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px; gap: 14px; flex-wrap: nowrap; position: relative; }

.nav-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.nav { display: flex; align-items: center; }

.logo {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    color: #fff; flex-shrink: 0; line-height: 1.15; text-decoration: none;
}
.logo-imagen {
    display: block; height: 42px; width: auto; flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.logo-letra {
    display: block; height: 22px; width: auto; max-width: 40vw;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.logo-texto { display: flex; align-items: center; text-align: left; }

/* Botón tres puntos (⋮) */
.boton-mas {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    cursor: pointer; flex-shrink: 0; transition: background .2s;
}
.boton-mas span { display: block; width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff; }
.boton-mas:hover { background: rgba(255,255,255,.25); }
.boton-mas.activo { background: rgba(255,255,255,.32); }

/* Desplegable con las secciones */
.menu-mas {
    position: absolute; top: calc(100% + 10px); right: 20px; z-index: 110;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    min-width: 230px; padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.menu-mas.abierto { opacity: 1; visibility: visible; transform: none; }
.menu-mas-enlaces { display: flex; flex-direction: column; gap: 2px; }
.menu-mas-enlace {
    display: flex; align-items: center; gap: 10px;
    color: var(--texto); padding: 10px 12px; border-radius: 9px;
    font-size: 14.5px; font-weight: 500; transition: background .15s, color .15s;
}
.menu-mas-enlace svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--primario); }
.menu-mas-enlace:hover { background: var(--fondo-suave); color: var(--titulo); opacity: 1; }
.menu-mas-enlace.activo { background: var(--primario); color: #fff; }
.menu-mas-enlace.activo svg { color: #fff; }

.nav-acceso { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

.enlace-perfil {
    display: inline-flex; align-items: center; gap: 0;
    color: #fff; padding: 2px; border-radius: 50%;
    transition: background .2s; text-decoration: none; min-height: auto; line-height: 0;
}
.enlace-perfil:hover { background: rgba(255,255,255,.12); opacity: 1; }
.avatar-nav { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-nav-letra {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primario-claro); color: #fff; font-weight: 700; font-size: 13px; line-height: 30px;
}

/* Botón de cuenta (avatar / silueta) + desplegable */
.usuario-nav-boton {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; font-family: inherit;
    width: 36px; height: 36px; line-height: 0; padding: 0;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    transition: background .2s;
    flex-shrink: 0;
}
.usuario-nav-boton:hover { background: rgba(255,255,255,.24); opacity: 1; }
.usuario-nav-boton svg { width: 22px; height: 22px; color: #fff; }
.usuario-nav-boton svg * { fill: currentColor; stroke: none; }
.usuario-nav-wrap { position: relative; flex-shrink: 0; }
.usuario-nav-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 115;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    min-width: 230px; padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.usuario-nav-panel:not(.oculto) { opacity: 1; visibility: visible; transform: none; }
.usuario-nav-cabecera {
    padding: 10px 12px; border-bottom: 1px solid var(--borde); margin-bottom: 6px;
    display: flex; flex-direction: column; gap: 2px; line-height: 1.3;
}
.usuario-nav-cabecera strong { font-size: 14.5px; color: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-nav-cabecera span { font-size: 12.5px; color: var(--texto-suave-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-nav-opcion {
    display: flex; align-items: center; gap: 10px;
    color: var(--texto); padding: 10px 12px; border-radius: 9px;
    font-size: 14.5px; font-weight: 500; transition: background .15s, color .15s; text-decoration: none;
}
.usuario-nav-opcion:hover { background: var(--fondo-suave); color: var(--titulo); opacity: 1; }
.usuario-nav-opcion.salir { color: #e0245e; }
.usuario-nav-opcion.salir:hover { background: rgba(224,36,94,.08); color: #e0245e; }

.campana {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; text-decoration: none; flex-shrink: 0;
    background: rgba(255,255,255,.1); transition: background .15s;
    border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.campana svg { width: 18px; height: 18px; color: #e9e4ff; }
.campana:hover { background: rgba(255,255,255,.22); opacity: 1; }
.btn-admin-circulo {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; text-decoration: none; flex-shrink: 0;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    transition: background .15s, transform .15s; color: #e9e4ff;
}
.btn-admin-circulo svg { width: 18px; height: 18px; color: #e9e4ff; }
.btn-admin-circulo:hover { background: rgba(255,255,255,.22); color: #fff; transform: scale(1.05); }
.campana-badge {
    position: absolute; top: -3px; right: -3px;
    background: #e0245e; color: #fff; font-size: 11px; font-weight: 700;
    min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--primario-oscuro);
}
.campana-wrap { position: relative; flex-shrink: 0; }

/* Panel desplegable de notificaciones (estilo Facebook) */
.campana-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 400;
    width: 360px; max-width: 92vw; background: var(--tarjeta);
    border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 16px 46px rgba(10, 18, 30, .22); overflow: hidden;
}
.campana-panel-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.campana-panel-cabecera strong { color: var(--titulo); font-size: 15px; }
.campana-panel-cabecera a { font-size: 12.5px; color: var(--primario); text-decoration: none; }
.campana-panel-cabecera a:hover { text-decoration: underline; }
.campana-lista { max-height: 360px; overflow-y: auto; padding: 6px; }
.notif-item {
    display: flex; align-items: center; gap: 11px; padding: 10px;
    border-radius: 10px; text-decoration: none; color: var(--texto);
    transition: background .15s;
}
.notif-item:hover { background: var(--fondo-suave); }
.notif-item.no-leida { background: #eef4fc; }
.notif-item.no-leida:hover { background: #e3eefa; }
.notif-cuerpo { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.notif-texto { font-size: 13.5px; }
.notif-texto strong { color: var(--titulo); }
.notif-cuerpo small { color: var(--texto-suave); font-size: 12px; }
.campana-ver-todas {
    display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 600;
    color: var(--primario); border-top: 1px solid var(--borde); text-decoration: none;
}
.campana-ver-todas:hover { background: var(--fondo-suave); }
.campana-vacia { text-align: center; color: var(--texto-suave); padding: 28px 16px; font-size: 14px; }

/* Avatar con icono de tipo encima (insignia estilo Facebook) */
.notif-avatar { position: relative; }
.notif-icono-badge {
    position: absolute; right: -5px; bottom: -3px; width: 21px; height: 21px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; line-height: 1; border: 2px solid var(--tarjeta);
}
.notif-icono-badge.azul   { background: #1877f2; }
.notif-icono-badge.violeta{ background: #8b5cf6; }
.notif-icono-badge.naranja{ background: #f2994a; }
.notif-icono-badge.verde  { background: #31a24c; }
.notif-icono-badge.rojo   { background: #e0245e; }

.form-buscar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 0; position: relative; }
.boton-buscar-toggle {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; padding: 0; flex-shrink: 0;
}
.boton-buscar-toggle:hover { background: rgba(255,255,255,.25); }
.boton-buscar-toggle .form-buscar-icono { width: 18px; height: 18px; color: #fff; }
.form-buscar-panel {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12); border-radius: 22px; padding: 4px 6px 4px 14px;
    flex-shrink: 1; min-width: 0;
}
.form-buscar-icono { width: 16px; height: 16px; color: #b9aee0; flex-shrink: 0; }
.form-buscar input {
    border: none; background: transparent; color: #fff; font-size: 13.5px; width: 110px;
    outline: none; font-family: inherit;
}
.form-buscar input::placeholder { color: #b9aee0; }
.btn-buscar {
    border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
    padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; font-family: inherit;
}
.btn-buscar:hover { background: rgba(255,255,255,.3); }
.form-buscar-grande { display: flex; gap: 10px; margin-bottom: 30px; }
.form-buscar-grande input {
    flex: 1; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 10px;
    font-size: 15px; font-family: inherit;
}
.form-buscar-grande input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.1); }
.encabezado-seccion h2 small { font-size: 13px; color: var(--texto-suave); font-weight: 500; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    background: linear-gradient(135deg, var(--primario-oscuro) 0%, var(--primario) 55%, var(--primario-claro) 100%);
    color: #fff; padding: 110px 0; position: relative; overflow: hidden;
    display: flex; align-items: center; min-height: 82vh;
}
.hero-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    /* Modo claro (día): iluminación cálida, sin quemar el video para que las letras se lean */
    filter: brightness(1.08) saturate(1.15) contrast(1.02);
    transition: filter .6s ease;
}
.hero-sombra {
    position: absolute; inset: 0; z-index: 2;
    /* Modo claro (día): oscurece el centro (detrás de las letras), deja ver el video en los bordes */
    background:
        radial-gradient(70% 52% at 50% 42%, rgba(14, 9, 3, .58), rgba(14, 9, 3, .26) 60%, rgba(14, 9, 3, .08) 88%),
        linear-gradient(180deg, rgba(24, 18, 34, .22) 0%, rgba(24, 18, 34, .30) 45%, rgba(24, 18, 34, .62) 100%);
}
html[data-tema="oscuro"] .hero-video {
    filter: none; /* Modo oscuro (noche): el video original */
}
html[data-tema="oscuro"] .hero-sombra {
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,26,43,.55) 0%, rgba(15,26,43,.30) 50%, rgba(15,26,43,.68) 100%);
}
.hero-contenido { position: relative; z-index: 2; text-align: center; }
.hero::before {
    content: ''; position: absolute; right: -120px; top: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    border: 40px solid rgba(255,255,255,.06);
}
.hero::after {
    content: ''; position: absolute; left: -80px; bottom: -100px;
    width: 260px; height: 260px; border-radius: 50%;
    border: 30px solid rgba(255,255,255,.05);
}
.hero-contenido { position: relative; z-index: 2; text-align: center; }
.boton-sonido {
    position: absolute; right: 20px; bottom: 24px; z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: rgba(18, 14, 30, .45); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .25s ease, transform .2s ease;
}
.boton-sonido:hover { background: rgba(18, 14, 30, .7); transform: scale(1.06); }
.boton-sonido svg { width: 22px; height: 22px; }
.boton-descarga { right: 78px; text-decoration: none; }
.boton-descarga:hover { text-decoration: none; color: #fff; }
.boton-sonido .icono-mudo { display: none; }
.boton-sonido.sonido-off .icono-sonido { display: none; }
.boton-sonido.sonido-off .icono-mudo { display: block; }
.boton-sonido.sonido-off { animation: pulso-sonido 2.2s ease-in-out infinite; }
@keyframes pulso-sonido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 150, .5); }
    50% { box-shadow: 0 0 0 10px rgba(255, 214, 150, 0); }
}
html[data-tema="oscuro"] .boton-sonido { background: rgba(10, 16, 30, .55); }
.hero-bienvenida { text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #dcc9ff; }
html:not([data-tema="oscuro"]) .hero-bienvenida { color: #fff; text-shadow: 0 2px 10px rgba(10, 6, 0, .85), 0 1px 3px rgba(10, 6, 0, .7); }
.hero-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-logo { width: auto; height: clamp(36px, 3.4vw, 52px); border-radius: 50%; object-fit: cover; box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }
.hero-logo-titulo { font-size: clamp(13px, 1.5vw, 18px); font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #f3c96b; text-align: left; line-height: 1.3; font-family: 'Inter', system-ui, sans-serif; opacity: .95; }
html:not([data-tema="oscuro"]) .hero-logo-titulo { text-shadow: 0 1px 6px rgba(10, 6, 0, .7); }
.hero-cabecera::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--dorado), transparent); opacity: .7; }
@media (max-width: 560px) {
    .hero-cabecera { flex-direction: column; gap: 6px; text-align: center; }
    .hero-logo-titulo { text-align: center; }
}
.hero h1 { font-size: clamp(34px, 6vw, 56px); margin: 10px 0 6px; }
html:not([data-tema="oscuro"]) .hero h1 { text-shadow: 0 3px 16px rgba(8, 5, 0, .9), 0 0 45px rgba(30, 15, 0, .45); }
.hero-lema { font-size: clamp(18px, 3vw, 24px); font-weight: 600; color: var(--dorado); }
html:not([data-tema="oscuro"]) .hero-lema { text-shadow: 0 2px 10px rgba(10, 6, 0, .85), 0 1px 3px rgba(10, 6, 0, .7); }
.hero-descripcion { max-width: 620px; margin: 16px auto 28px; color: #e9e4ff; font-size: 17px; }
html:not([data-tema="oscuro"]) .hero-descripcion { color: #fff; text-shadow: 0 2px 12px rgba(10, 6, 0, .8); }
.hero-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }

.hero-scroll {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
    color: #e9e4ff; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .9;
    text-decoration: none;
}
html:not([data-tema="oscuro"]) .hero-scroll { color: #3a2808; filter: drop-shadow(0 1px 6px rgba(255,255,255,.5)); }
.hero-scroll svg { width: 22px; height: 22px; animation: hero-flecha 1.6s ease-in-out infinite; }
@keyframes hero-flecha {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* Barra de versículo del día */
.barra-versiculo {
    background: linear-gradient(90deg, var(--primario-oscuro), var(--primario-claro));
    color: #fff; padding: 16px 0;
}
.barra-versiculo .contenedor {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
}
.barra-versiculo-icono { font-size: 26px; }
.barra-versiculo-texto { font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-style: italic; }
.barra-versiculo-ref { color: var(--dorado); font-weight: 700; font-size: 14px; }

/* Widget próximo culto con cuenta regresiva */
.widget-proximo-culto { padding: 34px 0; }
.widget-proximo-inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: 18px; background: linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    color: #fff; border-radius: var(--radio); padding: 34px 26px;
    box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.widget-proximo-inner::after {
    content: '⛪'; position: absolute; right: -30px; bottom: -40px; font-size: 150px;
    opacity: .08; transform: rotate(-12deg);
}
.widget-proximo-info { position: relative; z-index: 1; }
.widget-proximo-etiqueta {
    display: inline-block; background: rgba(255,255,255,.16); border-radius: 20px;
    padding: 5px 14px; font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.widget-proximo-info h2 { font-size: clamp(22px, 4vw, 32px); margin-bottom: 6px; }
.widget-proximo-detalle { color: #e9e4ff; margin: 0 auto 4px; max-width: 640px; }
.widget-proximo-cuenta { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; justify-content: center; }
.cuenta-caja {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px; padding: 12px 16px; text-align: center; min-width: 70px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.cuenta-num {
    display: block; font-size: clamp(26px, 5vw, 34px); font-weight: 800;
    color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.cuenta-lbl { font-size: 11px; letter-spacing: .8px; color: #d9d4f0; margin-top: 6px; display: block; text-transform: uppercase; }
@media (max-width: 600px) {
    .widget-proximo-cuenta { gap: 8px; }
    .cuenta-caja { min-width: 56px; padding: 10px 12px; }
    .cuenta-num { font-size: 22px; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 22px; border-radius: 10px;
    background: var(--primario); color: #fff;
    border: 2px solid transparent; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all .2s; text-align: center; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--primario-oscuro); opacity: 1; }
.btn-claro { background: #fff; color: var(--titulo); }
.btn-claro:hover { background: #f0eaff; }
.btn-vacio { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-vacio:hover { background: rgba(255,255,255,.15); }
.btn-secundario { background: var(--fondo-suave); color: var(--titulo); }
.btn-secundario:hover { background: #d8cff0; }
.btn-bloque { width: 100%; }
.btn-peligro { background: var(--peligro); }
.btn-peligro:hover { background: #b52b3a; }
.btn-pequeno { padding: 8px 16px; font-size: 13.5px; }
.btn:focus-visible { outline: 3px solid rgba(30,58,95,.35); outline-offset: 2px; }

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion { padding: 64px 0; }
.seccion-gris { background: var(--fondo-suave); }
.pagina-titulo {
    background: linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    color: #fff; padding: 48px 0; text-align: center;
}
.pagina-titulo h1 { font-size: clamp(28px, 4vw, 40px); }
.pagina-titulo p { color: #e0d5ff; margin-top: 6px; }

.encabezado-seccion {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 10px;
}
.encabezado-seccion h2 { font-size: 28px; color: var(--titulo); }

/* Encabezado centrado (p. ej. la sección de eventos del inicio) */
.encabezado-seccion.centrado {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}

section[id] { scroll-margin-top: 84px; }

.sin-resultados { text-align: center; color: var(--texto-suave); padding: 30px 0; }

/* ============================================================
   TARJETAS DE EVENTOS
   ============================================================ */
.rejilla-eventos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tarjeta-evento {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 22px; display: flex; gap: 16px; box-shadow: var(--sombra);
    transition: transform .2s;
}
.tarjeta-evento:hover { transform: translateY(-4px); }

.fecha-evento {
    background: var(--primario); color: #fff; border-radius: 10px;
    min-width: 64px; height: 64px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.1; flex-shrink: 0;
}
.fecha-evento .dia { font-size: 24px; font-weight: 800; }
.fecha-evento .mes { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

.info-evento h3 { margin: 6px 0 4px; font-size: 17px; color: var(--texto); }
.info-evento .detalle { font-size: 13px; color: var(--texto-suave); }

.etiqueta { display: inline-block; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }

.lista-eventos { display: flex; flex-direction: column; gap: 18px; max-width: 860px; margin: 0 auto; }
.tarjeta-evento-grande {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 26px; display: flex; gap: 20px; box-shadow: var(--sombra);
}
.tarjeta-evento-grande h2 { color: var(--titulo); margin: 8px 0 4px; font-size: 22px; }
.tarjeta-evento-grande .detalle { color: var(--texto-suave); font-size: 14px; }
.tarjeta-evento-grande .descripcion { margin-top: 10px; color: var(--texto); }

.tarjeta-evento-desplegable { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tarjeta-evento-desplegable[open] { border-color: var(--primario); }
.tarjeta-evento-desplegable summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
    padding: 20px 22px; flex: 1;
}
.tarjeta-evento-desplegable summary::-webkit-details-marker { display: none; }
.tarjeta-evento-desplegable summary:hover { background: var(--fondo-suave); }
.tarjeta-evento-desplegable[open] summary { border-bottom: 1px dashed var(--borde); }
.tarjeta-evento-desplegable .info-evento { flex: 1; min-width: 0; }
.tarjeta-evento-desplegable .chevron {
    color: var(--texto-suave); font-size: 13px; flex-shrink: 0;
    transition: transform .2s;
}
.tarjeta-evento-desplegable[open] .chevron { transform: rotate(180deg); }
.asistentes-titulo { font-size: 13px; font-weight: 700; color: var(--titulo); margin: 12px 0 8px; }
.asistentes-lista {
    position: relative; display: flex; align-items: center; flex-wrap: nowrap;
    min-height: 40px; padding: 4px 0 8px;
}
.circ-asist {
    position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; margin-right: -10px; flex-shrink: 0;
    background: var(--primario); color: #fff; font-weight: 700; font-size: 14px;
    border: 3px solid var(--tarjeta); box-shadow: var(--sombra);
    text-decoration: none; overflow: hidden;
}
.circ-asist:first-child { margin-left: 0; }
.circ-asist img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circ-asist:hover { z-index: 8; }
.circ-asist.circ-mas {
    z-index: 6; cursor: pointer; padding: 0; margin-right: 0;
    background: var(--fondo-suave); color: var(--texto-suave); border-color: var(--borde);
}
.circ-asist.circ-mas:hover { background: var(--primario); color: #fff; }
.circ-asist.circ-mas.activo { background: var(--primario); color: #fff; border-color: var(--primario); }
.circ-asist { animation: asistEntrada .3s ease backwards; }
.circ-asist.circ-mini { animation: none; }
@keyframes asistEntrada { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.circ-asist.circ-mini { width: 28px; height: 28px; font-size: 12px; margin-right: 0; border-width: 2px; }
.asistentes-pop {
    position: absolute; top: calc(100% - 2px); left: 0; z-index: 40; display: none;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: var(--sombra-fuerte); min-width: 240px; max-width: 340px;
    max-height: 280px; overflow-y: auto; padding: 6px; text-align: left;
}
.asistentes-pop.visible { display: block; }
.asistentes-pop .pop-titulo {
    margin: 0 0 4px; padding: 4px 9px 6px; font-size: 12.5px; font-weight: 600;
    color: var(--texto-suave); border-bottom: 1px solid var(--borde);
}
.pop-asist {
    display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px;
    font-size: 13.5px; color: var(--texto); white-space: nowrap;
}
.pop-asist:hover { background: var(--fondo-suave); }
.asistente-chip {
    display: inline-flex; align-items: center; gap: 7px; background: var(--tarjeta);
    border: 1px solid var(--borde); border-radius: 20px; padding: 3px 12px 3px 4px;
    font-size: 13px; color: var(--texto);
}
.asistente-chip img,
.asistente-chip > span {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: var(--primario); color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 11px;
}

/* ============================================================
   TARJETAS DE NOTICIAS
   ============================================================ */
.rejilla-noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tarjeta-noticia {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; display: flex; flex-direction: column; color: var(--texto);
    box-shadow: var(--sombra); transition: transform .2s;
}
.tarjeta-noticia:hover { transform: translateY(-4px); }
.imagen-noticia { height: 180px; background-size: cover; background-position: center; }
.cuerpo-noticia { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cuerpo-noticia h3 { font-size: 18px; color: var(--titulo); line-height: 1.3; }
.cuerpo-noticia p { color: var(--texto-suave); font-size: 14px; }
.fecha-noticia { font-size: 12.5px; color: var(--dorado); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* Artículo individual */
.articulo { background: var(--tarjeta); padding: 30px; border-radius: var(--radio); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.articulo h1 { font-size: 30px; color: var(--titulo); margin: 8px 0 18px; }
.imagen-articulo { border-radius: 10px; margin: 0 0 22px; max-height: 420px; object-fit: cover; width: 100%; }
.contenido-articulo { margin-bottom: 26px; font-size: 16.5px; }

/* ============================================================
   GALERÍA
   ============================================================ */
.rejilla-galeria {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.item-galeria { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4/3; }
.item-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.item-galeria:hover img { transform: scale(1.06); }
.item-galeria figcaption {
    position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px;
    background: linear-gradient(transparent, rgba(20,10,40,.85)); color: #fff;
}
.item-galeria .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dorado); font-weight: 700; }
.item-galeria .tit { font-size: 15px; font-weight: 600; }
.item-galeria .stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; opacity: .9; margin-top: 4px; }
.item-galeria-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-galeria-media video { width: 100%; height: 100%; object-fit: cover; }
.item-galeria-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(15, 10, 35, .55); color: #fff; font-size: 20px; pointer-events: none;
    border: 2px solid rgba(255,255,255,.6);
}
.item-galeria-eliminar {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(10, 12, 20, .6); color: #fff; font-size: 16px; line-height: 1;
    transition: background .15s;
}
.item-galeria-eliminar:hover { background: var(--peligro); }
.galeria-admin-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.panel-subir-galeria {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; margin-bottom: 20px; box-shadow: var(--sombra);
}
.galeria-datos-oculto { display: none; }

/* ═══════ VISOR DE GALERÍA (reacciones, comentarios y compartir) ═══════ */
.galeria-ligero {
    position: fixed; inset: 0; z-index: 460; background: rgba(8, 12, 22, .92);
    display: none; align-items: center; justify-content: center; padding: 20px;
    animation: aparicion .18s ease;
}
.galeria-ligero.abierto { display: flex; }
.galeria-ligero-caja {
    position: relative; width: 100%; max-width: 1150px; max-height: 94vh;
    display: grid; grid-template-columns: 2fr 1fr; overflow: hidden;
    background: var(--fondo); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.galeria-ligero-cerrar {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    background: rgba(10, 12, 20, .55); color: #fff; border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1;
    font-family: inherit; transition: background .15s;
}
.galeria-ligero-cerrar:hover { background: var(--peligro); }
.galeria-ligero-media {
    display: grid; place-items: center; background: #0a0d16; min-height: 0;
    overflow: hidden; position: relative;
}
.galeria-ligero-media img, .galeria-ligero-media video {
    width: auto; height: auto; max-width: 100%; max-height: 94vh; object-fit: contain; display: block;
}
.galeria-ligero-panel {
    background: var(--tarjeta); display: flex; flex-direction: column; min-height: 0;
    border-left: 1px solid var(--borde);
}
.galeria-encabezado { padding: 16px 18px 0; }
.galeria-cat {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--dorado); font-weight: 700; margin: 0 0 4px;
}
.galeria-encabezado h3 { font-size: 18px; color: var(--titulo); margin: 0; }
.galeria-reacciones { display: contents; }
.galeria-resumen-resp { padding: 10px 18px 0; min-height: 26px; }
.galeria-acciones {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 18px; border-top: 1px solid var(--borde); margin-top: 10px;
}
.galeria-emojis { display: flex; gap: 4px; }
.galeria-emoji {
    border: none; background: var(--fondo-suave); cursor: pointer; font-size: 22px;
    padding: 6px; border-radius: 50%; line-height: 1; width: 38px; height: 38px;
    transition: transform .12s, background .12s;
}
.galeria-emoji:hover { transform: scale(1.18); background: var(--borde); }
.galeria-emoji.activo { background: #fdecef; box-shadow: inset 0 0 0 2px var(--peligro); }
.btn-compartir-galeria { flex: none; padding: 9px 14px; font-size: 13.5px; }
.galeria-comentarios {
    flex: 1; overflow-y: auto; padding: 4px 18px 8px; display: flex;
    flex-direction: column; gap: 10px; min-height: 0;
}
.form-comentar-galeria { padding: 10px 18px 14px; border-top: 1px solid var(--borde); }
.reacciones-vacio { text-align: center; color: var(--texto-suave); padding: 20px 0; font-size: 13.5px; }

@media (max-width: 820px) {
    .galeria-ligero { padding: 0; align-items: stretch; }
    .galeria-ligero-caja {
        grid-template-columns: 1fr; grid-template-rows: minmax(0, 48dvh) 1fr;
        width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
        border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .galeria-ligero-cerrar { position: fixed; top: 10px; right: 10px; z-index: 30; }
    .galeria-ligero-media {
        min-height: 180px; max-height: none; height: 100%;
        background: #000; display: flex; align-items: center; justify-content: center;
    }
    .galeria-ligero-media img, .galeria-ligero-media video {
        width: auto; height: auto; max-width: 100%; max-height: 48vh; max-height: 48dvh;
        object-fit: contain; object-position: center;
    }
    .galeria-ligero-panel { border-left: none; }

    /* Reacciones y compartir envuelven en fila: nunca se cortan por la pantalla */
    .galeria-ligero-caja .galeria-acciones {
        flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 12px;
    }
    .galeria-ligero-caja .galeria-emojis { flex-wrap: wrap; justify-content: center; }
    .btn-compartir-galeria {
        flex: 1 1 auto; text-align: center; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }

    /* Comentarios y formulario sin desbordes horizontales */
    .galeria-comentarios { padding: 4px 12px 8px; word-break: break-word; }
    .form-comentar-galeria { padding: 8px 12px 12px; }
    .form-comentar-fila { flex-wrap: wrap; }
    .form-comentar-fila input[type="text"] { flex: 1 1 140px; min-width: 0; width: auto; }

    /* Cabecera del visor más compacta */
    .visor-publicacion-cabecera { padding: 12px 14px 0; }
    .visor-publicacion-contenido { padding: 8px 14px 0; word-break: break-word; }
}

/* ═══════ VISOR DE PUBLICACIONES (fotos del feed, estilo Facebook) ═══════ */
.publicacion-imagen { position: relative; display: block; }
.visor-publicacion-media img {
    max-width: 100%; max-height: 94vh; object-fit: contain; display: block;
    cursor: zoom-in; transition: transform .25s ease;
}
.visor-publicacion-media.zoom img {
    transform: scale(1.65); cursor: zoom-out;
}
.visor-publicacion-cabecera {
    padding: 14px 18px 0; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.visor-publicacion-cabecera-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.visor-publicacion-cabecera-fila .publicacion-autor { display: flex; flex-direction: column; gap: 2px; }
.visor-publicacion-cabecera-fila .fecha { font-size: 12px; }
.visor-publicacion-opciones { display: flex; gap: 6px; }
.visor-publicacion-contenido {
    padding: 10px 18px 0; color: var(--texto); font-size: 14.5px; line-height: 1.5;
    word-break: break-word;
}
.visor-publicacion-titulo-comentarios {
    padding: 10px 18px 2px; font-size: 13px; font-weight: 700; color: var(--titulo);
}
.publicacion-video { position: relative; }
.video-abrir-fb {
    position: absolute; right: 10px; top: 10px; z-index: 2;
    border: 0; border-radius: 999px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700;
    background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
}
.visor-publicacion.galeria-ligero { background: #000; padding: 0; }
.visor-publicacion .galeria-ligero-caja {
    display: flex; flex-direction: column;
    width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; background: #000; grid-template-columns: 1fr;
}
.visor-publicacion .galeria-ligero-media {
    flex: 1; min-height: 0; height: auto; max-height: none;
    background: #000;
}
.visor-publicacion .galeria-ligero-media img,
.visor-publicacion .galeria-ligero-media video {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.visor-publicacion .galeria-ligero-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.82) 28%, rgba(0,0,0,.94));
    border: 0; color: #fff; max-height: 42%;
}
.visor-publicacion .visor-publicacion-cabecera,
.visor-publicacion .visor-publicacion-contenido { color: #fff; }
.visor-publicacion .visor-publicacion-contenido { max-height: 4.5em; overflow: hidden; }
.visor-fb-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 14px 8px;
}
.visor-fb-iconos { display: flex; align-items: center; gap: 8px; }
.visor-fb-ico {
    border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 999px;
    padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.visor-fb-reaccionar { border: 0; margin: 0; padding: 0 12px 10px; background: transparent; }
.visor-fb-sheet { display: none; }
.visor-publicacion.comentarios-abiertos .galeria-ligero-panel {
    position: relative; max-height: 58dvh; background: var(--tarjeta); color: var(--texto);
}
.visor-publicacion.comentarios-abiertos .visor-publicacion-cabecera,
.visor-publicacion.comentarios-abiertos .visor-publicacion-contenido { color: inherit; }
.visor-publicacion.comentarios-abiertos .visor-publicacion-contenido { max-height: none; }
.visor-publicacion.comentarios-abiertos .visor-fb-sheet {
    display: flex; flex-direction: column; flex: 1; min-height: 160px;
}
.visor-publicacion.comentarios-abiertos .visor-fb-ico { background: var(--fondo-suave); color: var(--texto); }
.btn-accion-peligro { color: #f87171; }
.btn-accion-peligro:hover { background: rgba(248, 113, 113, .12); }

/* ============================================================
   MIEMBROS
   ============================================================ */
.rejilla-miembros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tarjeta-miembro {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    text-align: center; padding: 24px 16px; box-shadow: var(--sombra); transition: transform .2s;
}
.tarjeta-miembro:hover { transform: translateY(-4px); }
.foto-miembro { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; border: 3px solid var(--fondo-suave); }
.foto-miembro img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-miembro h3 { font-size: 17px; color: var(--titulo); }
.tarjeta-miembro .cargo { color: var(--primario); font-weight: 600; font-size: 14px; }
.tarjeta-miembro .departamento { color: var(--texto-suave); font-size: 13px; }
.tarjeta-miembro .enlace-miembro { font-size: 13px; display: block; margin-top: 6px; }
.tarjeta-miembro .telefono { font-size: 13px; color: var(--texto-suave); }
.tarjeta-miembro { text-decoration: none; color: inherit; display: block; }
.tarjeta-miembro h3 { margin-top: 0; }
.foto-miembro-iniciales {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 30px; font-weight: 700;
    background: var(--fondo-suave); color: var(--primario);
}

/* ============================================================
   INVENTARIO / ESTADÍSTICAS DE LA IGLESIA
   ============================================================ */
.rejilla-inventario { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.tarjeta-inventario {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 22px 16px; text-align: center; box-shadow: var(--sombra);
    display: flex; flex-direction: column; gap: 4px;
    text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.tarjeta-inventario:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.tarjeta-inventario-primaria {
    background: linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    border-color: transparent;
}
.tarjeta-inventario-primaria .inventario-etiqueta { color: #dcc9ff; }
.tarjeta-inventario .inventario-valor {
    font-size: 34px; font-weight: 800; color: var(--titulo); line-height: 1;
}
.tarjeta-inventario-primaria .inventario-valor { color: var(--dorado); }
.tarjeta-inventario .inventario-etiqueta { font-size: 13px; color: var(--texto-suave); font-weight: 500; }

.navegacion-miembros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.navegacion-miembros a {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; padding: 8px 16px;
    font-size: 14px; font-weight: 600; color: var(--titulo); text-decoration: none;
    box-shadow: var(--sombra); transition: background .15s, transform .15s;
}
.navegacion-miembros a:hover { background: var(--primario); color: #fff; transform: translateY(-2px); }

.tabla-inventario {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; box-shadow: var(--sombra);
}
.tabla-inventario table { width: 100%; border-collapse: collapse; }
.tabla-inventario th, .tabla-inventario td { padding: 13px 18px; text-align: left; font-size: 14px; }
.tabla-inventario thead th {
    background: var(--fondo-suave); color: var(--texto-suave); font-size: 12px;
    text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
.tabla-inventario tbody tr { border-top: 1px solid var(--borde); }
.tabla-inventario tbody tr:hover { background: var(--fondo-suave); }
.celda-ministerio { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--texto); }
.minist-burbuja {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; color: #fff; font-size: 17px; flex-shrink: 0;
}

/* Filas de ministerio desplegables (acordeón) */
.fila-ministerio { cursor: pointer; }
.tabla-inventario tbody tr.fila-ministerio.abierto { background: var(--fondo-suave); }
.fila-flecha {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 6px; border-radius: 50%;
    background: var(--fondo-suave); color: var(--texto-suave);
    font-size: 12px; line-height: 1; flex-shrink: 0;
    transition: transform .2s, background .2s, color .2s;
}
.fila-ministerio.abierto .fila-flecha,
.nodo-ministerio.abierto .fila-flecha { transform: rotate(90deg); background: var(--primario); color: #fff; }
.fila-ministerio-miembros { display: none; }
.fila-ministerio-miembros.abierto { display: table-row; }
.fila-ministerio-miembros.abierto td { background: var(--fondo-suave); padding: 8px 18px 18px; }
.miniembros-wrap { padding: 6px 4px 2px; }
.miniembros-titulo { font-weight: 700; color: var(--titulo); margin-bottom: 12px; font-size: 14px; }
.miniembros-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.miniembro-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 30px;
    padding: 5px 14px 5px 5px; text-decoration: none; color: var(--texto);
    font-size: 13.5px; font-weight: 600; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.miniembro-chip:hover { border-color: var(--primario); transform: translateY(-2px); box-shadow: var(--sombra); opacity: 1; }
.miniembro-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.miniembro-iniciales {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primario-claro); color: #fff; font-weight: 700; font-size: 12px;
}

/* Nodo del organigrama como botón desplegable */
.nodo-ministerio-enlace {
    display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;
    width: 100%; border: none; background: none; font-family: inherit; padding: 0; margin: 0; cursor: pointer;
}
.nodo-ministerio-enlace h3 { font-size: 15.5px; color: var(--titulo); margin: 10px 0 6px; line-height: 1.3; }
.nodo-ministerio-lista { display: none; margin-top: 14px; text-align: left; }
.nodo-ministerio.abierto .nodo-ministerio-lista { display: block; }
.celda-numero { font-weight: 700; color: var(--titulo); }
.barra-proporcion { width: 100%; max-width: 150px; height: 8px; border-radius: 6px; background: var(--fondo-suave); overflow: hidden; }
.barra-proporcion span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primario), var(--primario-claro)); }

/* ============================================================
   MAPA CONCEPTUAL / ORGANIGRAMA
   ============================================================ */
.mapa-organigrama { position: relative; }

.nivel-liderazgo { display: flex; flex-direction: column; align-items: center; }
.nodos-liderazgo { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; position: relative; }
.nodos-liderazgo::before {
    content: ''; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 34px; background: var(--primario-claro);
}

.nodo-lider { text-align: center; max-width: 220px; position: relative; }
.nodo-anillo {
    width: 118px; height: 118px; margin: 0 auto 12px; border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, var(--dorado) 0%, #a8821f 60%, var(--primario) 100%);
    box-shadow: 0 8px 20px rgba(21,42,71,.18);
}
.nodo-foto {
    display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: var(--fondo-suave); border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.nodo-foto img { width: 100%; height: 100%; object-fit: cover; }
.nodo-iniciales { font-size: 40px; font-weight: 800; color: var(--primario); }
.nodo-lider-nombre { font-size: 17px; margin: 2px 0 2px; }
.nodo-lider-nombre a { color: var(--titulo); text-decoration: none; }
.nodo-lider-nombre a:hover { color: var(--primario); text-decoration: underline; }
.nodo-lider-cargo {
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
    color: var(--dorado); background: rgba(201,162,39,.12); display: inline-block;
    padding: 3px 10px; border-radius: 12px;
}

.conector-flecha {
    width: 2px; height: 46px; margin: 6px auto 0; background: var(--primario-claro); position: relative;
}
.conector-flecha::after {
    content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--primario-claro);
}
.conector-flecha::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--primario-claro);
}

.nivel-ministerios { margin-top: 8px; }
.nodos-ministerios {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    position: relative; padding-top: 40px;
}
.nodos-ministerios::before {
    content: ''; position: absolute; top: 0; left: 12.5%; right: 12.5%;
    height: 2px; background: var(--primario-claro);
}

.nodo-ministerio {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 20px 16px 18px; box-shadow: var(--sombra); text-align: center;
    position: relative; transition: transform .2s, box-shadow .2s;
}
.nodo-ministerio:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(21,42,71,.14); }
.nodo-conector-ministerio {
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 40px; background: var(--primario-claro);
}
.nodo-ministerio-enlace { display: block; text-decoration: none; color: inherit; }
.nodo-ministerio-enlace h3 { font-size: 15.5px; color: var(--titulo); margin: 10px 0 6px; line-height: 1.3; }
.nodo-ministerio-lider { font-size: 13px; color: var(--texto-js); color: var(--texto-suave); margin: 4px 0; }
.nodo-ministerio-lider a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texto); text-decoration: none; }
.nodo-ministerio-lider a:hover { color: var(--primario); text-decoration: underline; }
.nodo-ministerio-lider img, .nodo-ministerio-lider .avatar-nav { vertical-align: middle; }
.nodo-ministerio-conteo {
    font-size: 12px; font-weight: 700; color: var(--primario); text-transform: uppercase;
    letter-spacing: .5px; background: var(--fondo-suave); display: inline-block;
    padding: 3px 10px; border-radius: 12px; margin-top: 6px;
}
.nodo-ministerio-miembros { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.avatar-mas { background: var(--fondo-suave); color: var(--primario); font-weight: 700; }

/* ============================================================
   FILTROS
   ============================================================ */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.filtros a {
    padding: 8px 16px; border-radius: 20px; background: var(--tarjeta);
    border: 1px solid var(--borde); color: var(--texto); font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center;
}
.filtros a:hover { opacity: 1; border-color: var(--primario); }
.filtros a.activo { background: var(--primario); color: #fff; border-color: var(--primario); }

/* ============================================================
   CTA
   ============================================================ */
.cta {
    background: linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    border-radius: 16px; color: #fff; text-align: center; padding: 50px 30px;
}
.cta h2 { font-size: 28px; margin-bottom: 10px; }
.cta p { max-width: 520px; margin: 0 auto 22px; color: #e9e4ff; }

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie { background: #16112a; color: #c9c0e6; margin-top: 40px; }
.rejilla-pie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 48px 20px; }
.col-pie h4 { color: #fff; margin-bottom: 14px; font-size: 17px; }
.col-pie p { font-size: 14px; margin-bottom: 8px; }
.redes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.redes a,
.redes a.redes-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    transition: transform .2s, box-shadow .2s, filter .2s; text-decoration: none;
    opacity: 1;
}
.redes a svg { width: 22px; height: 22px; display: block; }
.redes a:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.3); filter: brightness(1.06); }
.redes a.sin-enlace { opacity: .9; filter: saturate(.92); }
/* Marca oficial: círculo de color + icono blanco (más legible en el pie oscuro) */
.redes a.red-facebook { background: #1877F2; }
.redes a.red-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.redes a.red-youtube { background: #FF0000; }
.redes a.red-tiktok { background: #010101; box-shadow: 0 3px 10px rgba(0,0,0,.35), 2px 0 0 #25F4EE, -2px 0 0 #FE2C55; }
.redes a.red-whatsapp { background: #25D366; }

.form-boletin { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.form-boletin input {
    flex: 1; min-width: 180px; padding: 11px 14px; border: 1px solid #3a2f5e;
    border-radius: 10px; background: #241a3f; color: #fff; font-size: 14px;
}
.form-boletin input:focus { outline: none; border-color: var(--dorado); }
.form-boletin .btn { background: var(--dorado); color: #16112a; }
.form-boletin .btn:hover { background: #e6b82c; }

.linea-final { border-top: 1px solid #2a1f45; padding: 18px 0; text-align: center; font-size: 13px; }

/* Avisos */
.aviso-ok, .aviso-err, .aviso-info, .aviso-aviso { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin: 10px 0; }
.aviso-ok { background: #d4edda; color: var(--exito); }
.aviso-info { background: #d1ecf1; color: #0c5460; }
.aviso-err { background: #f8d7da; color: var(--peligro); }
.aviso-aviso { background: #fff3cd; color: #856404; }

/* ============================================================
   DONACIONES
   ============================================================ */
.intro-donacion { max-width: 720px; margin: 0 auto 38px; text-align: center; color: var(--texto); font-size: 16.5px; line-height: 1.7; }

.rejilla-donaciones {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px;
    max-width: 1020px; margin: 0 auto; align-items: stretch;
}

.tarjeta-donacion {
    position: relative; overflow: hidden;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px;
    padding: 30px 26px 26px; text-align: center; box-shadow: 0 10px 30px rgba(21, 42, 71, .08);
    display: flex; flex-direction: column; align-items: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta-donacion::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--dorado), var(--primario));
}
.tarjeta-donacion:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(21, 42, 71, .16); }

.icono-donacion {
    width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px;
    background: linear-gradient(135deg, rgba(21, 42, 71, .08), rgba(201, 169, 80, .18));
    margin-bottom: 14px;
}
.tarjeta-donacion h3 { color: var(--titulo); font-size: 20px; margin-bottom: 6px; }
.subtitulo-donacion { color: var(--texto-suave); font-size: 14px; margin-bottom: 16px; }

.datos-cuenta { list-style: none; width: 100%; text-align: left; margin: 8px 0 18px; }
.datos-cuenta li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--borde); font-size: 14px; }
.datos-cuenta li:last-child { border-bottom: none; }
.datos-cuenta span { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .6px; flex-shrink: 0; }
.datos-cuenta strong { font-size: 14.5px; color: var(--titulo); text-align: right; word-break: break-all; }

.qr-marco { position: relative; padding: 14px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: 0 6px 20px rgba(21, 42, 71, .10); margin-bottom: 14px; }
.qr-marco::after {
    content: 'ESCANEA'; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    background: var(--primario); color: #fff; font-size: 9.5px; letter-spacing: 2.5px;
    padding: 3px 12px; border-radius: 999px; font-weight: 700;
}
.qr-imagen {
    width: 190px; height: 190px; object-fit: contain; display: block;
}
.btn-copiar { margin-top: auto; width: 100%; background: var(--fondo-suave); color: var(--titulo); border: 1px solid var(--borde); }
.btn-copiar:hover { background: var(--borde); }
.btn-donar { width: 100%; }

.donar-modos { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 720px; margin: -14px auto 34px; }
.donar-modo { display: inline-flex; align-items: center; gap: 6px; background: var(--tarjeta); border: 1px solid var(--borde); padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--titulo); box-shadow: 0 2px 8px rgba(21, 42, 71, .06); }
.donar-nota { max-width: 720px; margin: 28px auto 0; text-align: center; color: var(--texto-suave); font-size: 14.5px; line-height: 1.6; }

/* Vista previa y QR en el panel de donaciones */
.vista-preview-qr { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.qr-miniatura { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--borde); border-radius: 12px; background: #fff; padding: 6px; }
.vista-previa-clara { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borde); }
.vista-previa-clara h4 { margin-bottom: 14px; }

/* ============================================================
   PANEL DE ADMINISTRACIÓN
   ============================================================ */
.panel-cuerpo { background: var(--fondo-suave); }
.panel { display: flex; min-height: 100vh; }
.panel-lateral {
    width: 250px; background: var(--primario-oscuro); color: #fff;
    display: flex; flex-direction: column; padding: 22px 0; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.panel-logo { font-size: 18px; font-weight: 700; padding: 0 22px 20px; border-bottom: 1px solid rgba(255,255,255,.15); }
.panel-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.panel-nav a {
    color: #e0d7ff; padding: 11px 14px; border-radius: 8px; font-size: 15px;
    display: flex; align-items: center; gap: 8px; transition: background .2s;
}
.panel-nav a:hover { background: rgba(255,255,255,.1); opacity: 1; }
.panel-nav a.activo { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.ver-sitio { margin: 14px 22px; color: var(--dorado); font-size: 14px; font-weight: 600; }

.panel-contenido { flex: 1; padding: 30px 34px; min-width: 0; }
.panel-cabecera-movil { display: none; }

.saludo-panel { margin-bottom: 22px; }
.saludo-panel h2 { font-size: 26px; color: var(--titulo); }
.saludo-panel p { color: var(--texto-suave); }

/* Tarjetas de conteo */
.tarjetas-conteo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
.tarjeta-conteo {
    background: var(--tarjeta); border-radius: var(--radio); border: 1px solid var(--borde);
    padding: 20px; text-align: center; box-shadow: var(--sombra); transition: transform .2s;
    display: block; color: var(--texto);
}
.tarjeta-conteo:hover { transform: translateY(-3px); }
.tarjeta-conteo .numero { font-size: 30px; font-weight: 800; color: var(--primario); display: block; }
.tarjeta-conteo .etiqueta-conteo { font-size: 13px; color: var(--texto-suave); }

.panel-dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.panel-caja {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 24px; box-shadow: var(--sombra); margin-bottom: 20px;
}
.panel-caja h3 { color: var(--titulo); margin-bottom: 14px; font-size: 18px; }
.sub-titulo { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borde); }
.sub-seccion { color: var(--titulo); font-size: 15px; margin: 20px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); }

.lista-proximos { list-style: none; margin-bottom: 16px; }
.lista-proximos li { padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.lista-proximos li:last-child { border-bottom: none; }
.lista-proximos small { color: var(--texto-suave); }
.lista-rapida { list-style: none; }
.lista-rapida li { padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14.5px; }
.lista-rapida li:last-child { border-bottom: none; }

/* Formularios del panel */
.form-panel .campo { margin-bottom: 16px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-panel label { display: block; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.form-panel input, .form-panel textarea, .form-panel select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 8px; font-size: 15px;
    font-family: inherit; background: var(--tarjeta); transition: border-color .15s, box-shadow .15s;
}
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus {
    outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.1);
}
.campo-chequeo label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.campo-chequeo input { width: auto; }
.miniatura { width: 110px; height: 70px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
.acciones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.barra-acciones { margin-bottom: 18px; }

/* Gráficos del dashboard */
.cuadro-estadistica h4 { font-size: 14px; color: var(--titulo); margin-bottom: 12px; }
.grafico-barras {
    display: flex; align-items: flex-end; gap: 5px; height: 180px;
    padding: 6px 2px 0; overflow-x: auto;
}
.grafico-barra {
    flex: 1; min-width: 22px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px;
}
.grafico-barra small { font-size: 10.5px; color: var(--texto-suave); }
.grafico-barra-relleno {
    width: 100%; max-width: 36px; background: linear-gradient(180deg, var(--primario-claro), var(--primario));
    border-radius: 5px 5px 0 0; font-size: 10px; color: #fff; text-align: center;
    line-height: 14px; min-height: 14px; transition: height .3s ease;
}
.grafico-usuarios { background: linear-gradient(180deg, #27ae60, #1e7a43); }
.grafico-barra-apilada { width: 100%; max-width: 36px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 5px 5px 0 0; overflow: hidden; }
.grafico-barra-seg { width: 100%; }
.grafico-seg-publicaciones { background: linear-gradient(180deg, #5dade2, #2e86de); }
.grafico-seg-comentarios { background: linear-gradient(180deg, #52be80, #27ae60); }
.grafico-seg-megusta { background: linear-gradient(180deg, #f0b27a, #e67e22); }
.leyenda-actividad { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-suave); margin-top: 10px; }
.leyenda-actividad .leyenda-color { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.color-pub { background: #2e86de; }
.color-com { background: #27ae60; }
.color-lik { background: #e67e22; }
.estadisticas-totales { margin-top: 18px; }
.estadisticas-totales .lista-proximos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.estadisticas-totales .lista-proximos li { display: flex; justify-content: space-between; align-items: baseline; }
.estadisticas-totales .lista-proximos small { color: var(--texto-suave); }

/* Selector de emoji completo (icono de ministerio) */
.selector-emoji { position: relative; }
.selector-emoji-boton {
    display: inline-flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 13px; border: 1px solid var(--borde); border-radius: 8px;
    background: var(--tarjeta); font-family: inherit; font-size: 15px; color: var(--texto);
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.selector-emoji-boton:hover, .selector-emoji-boton.abierto { border-color: var(--primario); }
.selector-emoji-boton.abierto { box-shadow: 0 0 0 3px rgba(30,58,95,.1); }
.selector-emoji-actual { font-size: 26px; line-height: 1; min-width: 34px; text-align: center; }
.selector-emoji-flecha { margin-left: auto; color: var(--texto-suave); font-size: 13px; }
.selector-emoji-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: 0 14px 40px rgba(10,18,30,.25); overflow: hidden;
    display: none; flex-direction: column; max-height: 360px;
}
.selector-emoji-panel.abierto { display: flex; }
.selector-emoji-buscador { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.selector-emoji-buscador input {
    width: 100%; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--fondo-suave); color: var(--texto);
}
.selector-emoji-buscador input:focus { outline: none; border-color: var(--primario); }
.selector-emoji-categorias {
    display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--borde);
    overflow-x: auto; flex-shrink: 0;
}
.selector-emoji-cat {
    border: none; background: transparent; cursor: pointer; padding: 6px 8px;
    border-radius: 8px; font-size: 20px; line-height: 1; flex-shrink: 0;
    opacity: .55; transition: opacity .15s, background .15s;
}
.selector-emoji-cat:hover { opacity: 1; background: var(--fondo-suave); }
.selector-emoji-cat.activa { opacity: 1; background: var(--fondo-suave); box-shadow: inset 0 -2px 0 var(--primario); }
.selector-emoji-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 10px; overflow-y: auto; min-height: 120px;
}
.selector-emoji-opcion {
    border: none; background: transparent; cursor: pointer; padding: 4px;
    font-size: 24px; line-height: 1.25; border-radius: 8px; transition: background .12s;
}
.selector-emoji-opcion:hover { background: var(--fondo-suave); }
.selector-emoji-nombre {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1c2333; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px;
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 70;
}
.selector-emoji-opcion:hover .selector-emoji-nombre { opacity: 1; }
.selector-emoji-vacio { grid-column: 1 / -1; text-align: center; color: var(--texto-suave); font-size: 13px; padding: 24px 0; }

/* Tablas */
.tabla-caja { padding: 10px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tabla tr:hover td { background: var(--fondo-suave); }
.acciones-tabla { white-space: nowrap; }
.acciones-tabla a { margin-right: 10px; font-weight: 600; font-size: 13.5px; }
.acciones-tabla a.peligro { color: var(--peligro); }

/* Usuarios del admin */
.etiqueta-rol { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.etiqueta-rol.admin { background: var(--primario); }
.etiqueta-rol.editor { background: #2a6f4e; }
.etiqueta-rol.miembro { background: var(--primario-claro); }
.etiqueta-rol.tu-cuenta { background: var(--dorado); margin-left: 6px; }
.form-inline-rol { display: inline-flex; align-items: center; gap: 6px; }
.form-inline-rol select { padding: 7px 10px; min-height: 38px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13.5px; background: var(--tarjeta); font-family: inherit; }
.form-inline-rol button { padding: 7px 12px; min-height: 38px; border: none; border-radius: 8px; background: var(--primario); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.form-inline-rol button:hover { background: var(--primario-oscuro); }
.rol-select { padding: 7px 10px; min-height: 38px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13.5px; background: var(--tarjeta); color: var(--texto); font-family: inherit; cursor: pointer; }
.rol-select:disabled { opacity: .6; cursor: wait; }
.rol-estado { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.rol-estado.ok { color: #1a9e5c; }
.rol-estado.error { color: #d93025; }
.estado-activo { color: var(--exito); font-weight: 600; white-space: nowrap; }
.estado-bloqueado { color: var(--peligro); font-weight: 600; white-space: nowrap; }

/* Galería del admin */
.rejilla-galeria-admin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.item-galeria-admin { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--tarjeta); }
.item-galeria-admin img { width: 100%; height: 150px; object-fit: cover; }
.item-galeria-admin figcaption { padding: 10px 12px; font-size: 13px; }
.item-galeria-admin .cat { color: var(--dorado); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.item-galeria-admin .peligro { color: var(--peligro); font-size: 13px; font-weight: 600; }

.form-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-inline input { width: auto; flex: 1; min-width: 200px; }
.nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-cuerpo {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    padding: 20px;
}
.login-caja {
    background: var(--tarjeta); border-radius: 16px; padding: 40px; max-width: 400px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-caja h1 { font-size: 22px; color: var(--titulo); margin-bottom: 6px; text-align: center; }
.login-caja p { color: var(--texto-suave); font-size: 14px; margin-bottom: 20px; text-align: center; }
.login-caja label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.login-caja input {
    width: 100%; padding: 12px 13px; border: 1px solid var(--borde); border-radius: 8px; font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.login-caja input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.1); }
.login-caja .btn { margin-top: 18px; width: 100%; }
.volver-sitio { display: block; text-align: center; margin-top: 18px; font-size: 14px; }

/* ============================================================
   ACCESO / NAV (botón de inicio de sesión)
   ============================================================ */
.nav .btn-acceso { padding: 8px 14px; font-size: 13.5px; min-height: 38px; }
.nav .btn-acceso.btn-claro { color: var(--titulo); }
.nav .btn-acceso.btn-vacio { color: #fff; }
.nav .btn-acceso:hover { opacity: 1; }
.nav .btn-admin {
    background: linear-gradient(135deg, var(--dorado), #a8821f);
    color: #16112a;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 14px rgba(201,162,39,.35);
}
.nav .btn-admin:hover { background: linear-gradient(135deg, #e0b64a, var(--dorado)); color: #16112a; }
html[data-tema="oscuro"] .nav .btn-admin { color: #16112a; }


/* ============================================================
   FORMULARIOS PÚBLICOS (login / registro)
   ============================================================ */
.tarjeta-form {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
    padding: 36px; box-shadow: 0 10px 30px rgba(21,42,71,.10); max-width: 500px; margin: 0 auto;
}
.tarjeta-form .campo { margin-bottom: 16px; }
.tarjeta-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tarjeta-form input {
    width: 100%; padding: 12px 13px; border: 1px solid var(--borde); border-radius: 8px; font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.tarjeta-form input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.1); }
.enlace-form { text-align: center; margin-top: 16px; font-size: 14px; }
.enlace-form a { font-weight: 600; }
.btn-bloque { width: 100%; }

/* ============================================================
   FEED DE LA COMUNIDAD
   ============================================================ */
.contenedor-feed { max-width: 780px; }
.subtitulo-seccion { color: var(--texto-suave); font-size: 15px; margin-bottom: 20px; }

.compositor {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 16px; box-shadow: var(--sombra); margin-bottom: 22px;
    transition: border-color .15s, box-shadow .15s;
}
.compositor:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.06); }
.compositor textarea {
    width: 100%; border: none; resize: vertical; font-size: 15px; font-family: inherit;
    min-height: 70px; outline: none;
}
.compositor textarea::placeholder { color: var(--texto-suave); }
.compositor-pie {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 1px solid var(--borde); padding-top: 12px; flex-wrap: wrap;
}
.compositor-pie span { font-size: 13px; color: var(--texto-suave); }
.compositor-extras { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.extra-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--primario);
    background: var(--fondo-suave); border: 1px solid var(--borde);
    padding: 8px 14px; border-radius: 20px; transition: all .15s; white-space: nowrap;
}
.extra-btn:hover { background: var(--fondo-suave); }
.extra-btn .extra-foto-input { display: none; }
.extra-enlace {
    flex: 1; min-width: 170px; height: 38px; padding: 0 12px;
    border: 1px solid var(--borde); border-radius: 20px; font-size: 13.5px; font-family: inherit;
}
.extra-enlace:focus { outline: none; border-color: var(--primario); }
.comp-preview { margin: 4px 4px 8px; }
.comp-preview-caja { position: relative; display: inline-block; max-width: 100%; }
.comp-preview-caja img, .comp-preview-caja video {
    display: block; max-width: min(100%, 420px); max-height: 280px; border-radius: 12px; background: #000;
}
.comp-preview-meta { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.comp-preview-x {
    position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff; font-size: 18px; cursor: pointer;
}
.comp-subiendo {
    position: fixed; inset: 0; z-index: 20000; background: rgba(8,12,20,.55);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
    color: #fff; font-weight: 700;
}
.comp-subiendo-circulo {
    width: 48px; height: 48px; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff;
    border-radius: 50%; animation: compGira .8s linear infinite;
}
@keyframes compGira { to { transform: rotate(360deg); } }
.compositor-invitacion {
    background: var(--tarjeta); border: 1px dashed var(--borde); border-radius: var(--radio);
    padding: 26px; text-align: center; margin-bottom: 22px;
}
.compositor-invitacion p { color: var(--texto-suave); margin-bottom: 14px; }

.lista-publicaciones { display: flex; flex-direction: column; gap: 16px; }
.publicacion {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; box-shadow: var(--sombra);
    overflow: visible;
}
.publicacion-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--primario); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex-shrink: 0; line-height: 42px;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-enlace { text-decoration: none; transition: transform .15s; }
.avatar-enlace:hover { transform: scale(1.08); }
.avatar-min { width: 36px; height: 36px; font-size: 14px; }
.publicacion-autor { display: flex; flex-direction: column; line-height: 1.25; }
.publicacion-autor .autor { font-weight: 700; color: var(--titulo); text-decoration: none; }
.publicacion-autor .autor:hover { color: var(--primario); text-decoration: underline; }
.publicacion-autor .fecha, .comentario .fecha { font-size: 12px; color: var(--texto-suave); }
.publicacion-contenido { font-size: 15.5px; margin: 0 0 12px; }
.emoji-picker {
    display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 0;
    border-top: 1px solid var(--borde); margin-bottom: 12px;
}
.emoji-btn {
    border: none; background: var(--fondo-suave); border-radius: 8px; cursor: pointer;
    font-size: 19px; width: 36px; height: 36px; line-height: 36px;
    transition: transform .12s, background .12s; padding: 0;
}
.emoji-btn:hover { background: var(--fondo-suave); transform: scale(1.15); }
.publicacion-acciones {
    display: flex; gap: 14px; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--borde); padding-top: 12px;
}

/* ============================================================
   FEED TIPO FACEBOOK (reacciones con popup + barra de acciones)
   ============================================================ */
.resumen-acciones {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 1px solid var(--borde); padding: 10px 2px 0; margin-top: 12px;
}
.reacciones-resumen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.reaccion-burbuja {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
    background: var(--fondo-suave); border: 1px solid var(--borde);
    border-radius: 14px; padding: 2px 9px;
}
.reaccion-burbuja i { font-style: normal; font-size: 15px; }
.reaccion-burbuja b { font-size: 12px; color: var(--texto-suave); }
.sin-reacciones { font-size: 12.5px; color: var(--texto-suave); }
.ver-comentarios {
    font-size: 13px; color: var(--texto-suave); font-weight: 600; text-decoration: none;
    white-space: nowrap; transition: color .15s;
}
.ver-comentarios:hover { color: var(--primario); text-decoration: underline; opacity: 1; }

.barra-acciones-fb {
    display: flex; gap: 4px; align-items: stretch;
    border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 4px;
}
/* Barra de asistencia a eventos publicados en el feed (estilo Facebook) */
.asistencia-barra {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.asistentes-feed { font-size: 13.5px; color: var(--texto-suave); }
.asistentes-feed-lista {
    position: relative; display: flex; align-items: center; flex-wrap: nowrap;
    min-height: 34px; padding-top: 6px;
}
.asistentes-feed-lista .circ-asist { width: 32px; height: 32px; font-size: 12px; border-width: 2px; margin-right: -9px; }
.asistentes-feed-lista .circ-asist.circ-mini { width: 26px; height: 26px; font-size: 12px; }
.btn-accion {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; background: transparent; cursor: pointer;
    padding: 10px 8px; border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--texto-suave); font-family: inherit; text-decoration: none;
    transition: background .15s;
}
.btn-accion:hover { background: var(--fondo-suave); opacity: 1; }
.btn-accion .like-emoji { font-size: 16px; }
.btn-like.activo { color: var(--peligro); }
.btn-like.inactivo { cursor: default; }
.btn-accion.copiado { color: var(--exito); }

.btn-like-wrapper { position: relative; flex: 1; display: flex; }
.btn-like-wrapper .btn-accion { flex: none; width: 100%; }

.popup-reacciones {
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) scale(.9) translateY(6px);
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 40px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px 10px;
    display: flex; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s, transform .16s, visibility .16s; z-index: 30; white-space: nowrap;
    --rx-arrow-left: 50%;
}
.popup-reacciones::after {
    content: ''; position: absolute; top: 100%; left: var(--rx-arrow-left, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent; border-top-color: var(--tarjeta);
}
/* Fijo al viewport: evita cortes por overflow de cards / lightbox y permite clamp móvil */
.popup-reacciones.popup-fijo {
    position: fixed;
    bottom: auto;
    right: auto;
    z-index: 520;
    transform: scale(1) translateY(0);
}
.popup-reacciones.popup-fijo.popup-abajo::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--tarjeta);
}
.btn-like-wrapper.popup-abierto .popup-reacciones {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) scale(1) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.btn-like-wrapper:hover .popup-reacciones {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) scale(1) translateY(0);
}
}
.btn-like-wrapper:hover .popup-reacciones.popup-fijo,
.btn-like-wrapper.popup-abierto .popup-reacciones.popup-fijo {
    transform: scale(1) translateY(0);
}
.form-reaccion { margin: 0; display: flex; }
.popup-emoji {
    border: none; background: transparent; cursor: pointer; font-size: 26px;
    padding: 6px; border-radius: 50%; line-height: 1;
    transition: transform .12s, background .12s;
}
.popup-emoji:hover { transform: scale(1.4); background: var(--fondo-suave); }
.popup-emoji.activo { background: #fdecef; }

.oculto-comentarios { display: none; }

/* Modal de reacciones (quién reaccionó) */
.reaccion-burbuja { cursor: pointer; }
.reaccion-burbuja:hover { background: var(--fondo-suave); }
.reacciones-modal {
    position: fixed; inset: 0; z-index: 500; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(10, 18, 30, .55); backdrop-filter: blur(2px);
}
.reacciones-modal.abierto { display: flex; }
.reacciones-modal-caja {
    background: var(--tarjeta); border-radius: 14px; width: 100%; max-width: 420px;
    max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.reacciones-modal-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--borde);
}
.reacciones-modal-cabecera h3 { font-size: 17px; color: var(--titulo); }
.reacciones-modal-cerrar {
    border: none; background: var(--fondo-suave); cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%; font-size: 14px; line-height: 1;
    color: var(--texto-suave);
}
.reacciones-modal-cerrar:hover { background: var(--borde); }
.reacciones-modal-tabs {
    display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--borde);
    overflow-x: auto;
}
.reacciones-tab {
    border: none; background: transparent; cursor: pointer;
    padding: 7px 12px; border-radius: 20px; font-size: 14px; font-weight: 600;
    color: var(--texto-suave); white-space: nowrap; font-family: inherit;
    transition: background .15s;
}
.reacciones-tab:hover { background: var(--fondo-suave); }
.reacciones-tab.activo { background: var(--primario); color: #fff; }
.reacciones-modal-lista { overflow-y: auto; padding: 8px 12px; }
.reacciones-usuario {
    display: flex; align-items: center; gap: 12px; padding: 10px 8px;
    border-radius: 10px; text-decoration: none; color: var(--texto);
    transition: background .15s;
}
.reacciones-usuario:hover { background: var(--fondo-suave); }
.reacciones-usuario .avatar { width: 40px; height: 40px; font-size: 15px; }
.reacciones-usuario strong { color: var(--titulo); font-size: 14.5px; font-weight: 600; }
.reacciones-vacio { text-align: center; color: var(--texto-suave); padding: 24px 0; font-size: 14px; }

/* Modal de reporte de contenido */
.nota-reporte { font-size: 13px; color: var(--texto-suave); margin-bottom: 12px; line-height: 1.5; }
.rep-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--titulo); margin: 12px 0 6px; }
.rep-select, .rep-textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--tarjeta); color: var(--texto);
}
.rep-select:focus, .rep-textarea:focus { outline: none; border-color: var(--primario); }
.rep-error { color: #c0392b; font-size: 13px; margin-top: 10px; }
.rep-confirmado { text-align: center; color: var(--exito); font-weight: 600; padding: 18px 0; }
.rep-acciones { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }

/* Modal de miembros de un ministerio (panel) */
.ver-miembros {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; padding: 2px 8px; text-decoration: none;
    background: var(--fondo-suave); color: var(--primario); font-weight: 700;
    border-radius: 14px; font-size: 13.5px; transition: background .15s, color .15s;
}
.ver-miembros:hover { background: var(--primario); color: #fff; opacity: 1; }
.min-modal-sub {
    font-size: 14px; color: var(--titulo); font-weight: 700; text-align: center;
    padding: 2px 4px 12px;
}
.min-modal-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--texto-suave); padding: 6px 4px 4px;
}
.min-miembro {
    display: flex; align-items: center; gap: 12px; padding: 8px 6px;
    border-radius: 10px; transition: background .15s;
}
.min-miembro:hover { background: var(--fondo-suave); }
.min-miembro .avatar { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
.min-miembro-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.min-miembro-info strong { color: var(--titulo); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-miembro-info small { color: var(--texto-suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-peligro { background: rgba(220,53,69,.1); color: #c0392b; }
.btn-peligro:hover { background: #c0392b; color: #fff; opacity: 1; }
.min-agregar-caja { border-top: 1px solid var(--borde); margin-top: 10px; padding-top: 12px; }
.min-agregar-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); margin-bottom: 8px; }
.min-agregar { display: flex; gap: 8px; }
.min-agregar select {
    flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--tarjeta); color: var(--texto);
}
.min-agregar select:focus { outline: none; border-color: var(--primario); }

/* ============================================================
   OPCIONES DE PUBLICACIÓN (menú ⋯)
   ============================================================ */
.publicacion-cabecera { position: relative; }
.opciones-publicacion { margin-left: auto; position: relative; }
.opciones-btn {
    border: none; background: transparent; cursor: pointer; font-size: 20px;
    letter-spacing: 1px; color: var(--texto-suave); padding: 2px 8px;
    border-radius: 8px; line-height: 1; transition: background .15s;
}
.opciones-btn:hover { background: var(--fondo-suave); }
.opciones-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px; min-width: 170px;
    display: flex; flex-direction: column; gap: 2px;
}
.opciones-menu.oculto { display: none; }
.opciones-item {
    border: none; background: transparent; cursor: pointer; text-align: left;
    padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--texto); font-family: inherit; transition: background .15s;
}
.opciones-item:hover { background: var(--fondo-suave); }
.opciones-item.peligro { color: var(--peligro); }
.opciones-item.peligro:hover { background: #fdecef; }

/* ============================================================
   EDITAR PUBLICACIÓN (inline)
   ============================================================ */
.editar-publicacion { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px; background: var(--fondo-suave); border-radius: 10px; border: 1px solid var(--borde); }
.editar-publicacion.oculto { display: none; }
.editar-publicacion textarea {
    width: 100%; min-height: 70px; padding: 10px 12px; resize: vertical;
    border: 1px solid var(--borde); border-radius: 8px; font-size: 14.5px; font-family: inherit;
}
.editar-publicacion textarea:focus, .editar-publicacion input:focus { outline: none; border-color: var(--primario); }
.editar-publicacion input[type="url"] { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 14px; font-family: inherit; }
.editar-botones { display: flex; gap: 8px; }

/* ============================================================
   COMENTARIOS (fila con botón eliminar)
   ============================================================ */
.comentario-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.comentario-fila .comentario-autor { display: inline; }
.comentario-eliminar {
    border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
    color: var(--texto-suave); padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.comentario-eliminar:hover { background: #fdecef; color: var(--peligro); }
.comentario-mas { position: relative; flex-shrink: 0; }
.comentario-mas-btn {
    border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
    color: var(--texto-suave); padding: 1px 6px; border-radius: 6px; letter-spacing: 1px; opacity: .7;
}
.comentario-mas-btn:hover { opacity: 1; background: var(--fondo); }
.comentario-mas-menu {
    position: absolute; right: 0; top: 100%; z-index: 60; min-width: 150px; margin-top: 4px;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px;
    box-shadow: var(--sombra); padding: 4px; display: flex; flex-direction: column;
}
.comentario-mas-menu.abierto { display: flex !important; }
.comentario-mas-item {
    border: none; background: transparent; cursor: pointer; text-align: left; font-size: 13.5px;
    color: var(--texto); padding: 8px 10px; border-radius: 6px; font-family: inherit;
}
.comentario-mas-item:hover { background: var(--fondo); }

.encabezado-seccion h2 small { font-size: 13px; color: var(--texto-suave); font-weight: 500; }
.lista-busqueda-pub { display: flex; flex-direction: column; gap: 10px; }
.resultado-pub {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto);
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px;
    box-shadow: var(--sombra); transition: border-color .15s;
}
.resultado-pub:hover { border-color: var(--primario); opacity: 1; }
.resultado-pub-cuerpo { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.resultado-pub-cuerpo strong { color: var(--titulo); font-size: 14.5px; }
.resultado-pub-cuerpo span { color: var(--texto-suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   NOTIFICACIONES
   ============================================================ */
.lista-notificaciones { display: flex; flex-direction: column; gap: 10px; }
.notificacion {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto);
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px;
    box-shadow: var(--sombra); transition: border-color .15s, background .15s;
}
.notificacion:hover { border-color: var(--primario); opacity: 1; }
.notificacion.no-leida { background: #eef4fc; border-color: #cfe0f2; }
.notificacion .avatar { width: 44px; height: 44px; font-size: 16px; flex-shrink: 0; }
.notificacion-cuerpo { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.notificacion-texto { font-size: 14px; overflow-wrap: anywhere; word-break: break-word; }
.notificacion-texto strong { color: var(--titulo); }
.notif-texto { overflow-wrap: anywhere; word-break: break-word; }
.notificacion .avatar, .notif-item .avatar { flex-shrink: 0; }

/* ============================================================
   CARGAR MÁS
   ============================================================ */
.cargar-mas-wrap { margin-top: 18px; }
.btn-cargar-mas { width: 100%; }
.publicacion-imagen {
    display: block; border-radius: 12px; overflow: hidden; margin-bottom: 12px;
    border: 1px solid var(--borde); text-decoration: none; background: var(--fondo-suave);
}
.publicacion-imagen img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.publicacion-video {
    display: block; border-radius: 12px; overflow: hidden; margin: 8px 0 12px;
    border: 1px solid var(--borde); background: #000;
}
.publicacion-video video {
    display: block; width: 100%; max-height: 72vh; background: #000;
}
.publicacion-imagen-galeria {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--dorado);
    background: var(--fondo);
}
.publicacion-enlace {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
    background: var(--fondo-suave); transition: border-color .15s, background .15s;
}
.publicacion-enlace:hover { border-color: var(--primario); background: #eef2f8; }
.enlace-icono { font-size: 22px; flex-shrink: 0; }
.enlace-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; flex: 1; }
.enlace-info strong { color: var(--titulo); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-info small { color: var(--texto-suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-flecha { font-size: 18px; color: var(--texto-suave); flex-shrink: 0; }

/* Previsualización de enlaces (miniatura tipo Facebook/YouTube) */
.publicacion-enlace.enlace-preview-cargado { display: flex; flex-direction: column; padding: 0; overflow: hidden; align-items: stretch; gap: 0; }
.publicacion-enlace.enlace-preview-cargado .enlace-icono,
.publicacion-enlace.enlace-preview-cargado .enlace-flecha { display: none; }
.enlace-preview-img { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #e2e6ee; flex-shrink: 0; }
.enlace-preview-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; }
.enlace-preview-dominio { color: var(--texto-suave); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.enlace-preview-titulo { color: var(--titulo); font-size: 15px; font-weight: 700; line-height: 1.3; }
.enlace-preview-descripcion { color: var(--texto-suave); font-size: 13.5px; line-height: 1.35; }

/* Reproductor de video embebido (Facebook / YouTube / Vimeo / TikTok) */
.publicacion-enlace.enlace-preview-video { display: block; padding: 0; gap: 0; }
.publicacion-enlace.enlace-preview-video .enlace-icono,
.publicacion-enlace.enlace-preview-video .enlace-flecha { display: none; }
.embed-video { display: block; width: 100%; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.embed-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; max-width: 100%; }

.publicacion-enlace-video-server .embed-post { display: block; width: 100%; position: relative; overflow: hidden; background: transparent; }
.publicacion-enlace-video-server .embed-post iframe { display: block; width: 100% !important; border: 0; max-height: 70vh; }
.publicacion-enlace.enlace-preview-video .enlace-preview-body { text-align: left; }

/* Reproductor servido directamente por PHP (sin depender de JS) */
.publicacion-enlace-video-server { display: block; padding: 0; overflow: hidden; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--borde); }
.publicacion-enlace-video-server .embed-video { aspect-ratio: 16 / 9; padding-top: 0; }
.publicacion-enlace-video-server .enlace-preview-body { display: block; padding: 10px 14px; text-align: left; }
.publicacion-enlace-video-server .enlace-preview-dominio { text-transform: uppercase; letter-spacing: .5px; font-size: 12.5px; color: var(--texto-suave); }
.publicacion-enlace-video-server .enlace-preview-titulo { display: block; color: var(--titulo); font-size: 14.5px; font-weight: 700; margin-top: 3px; text-decoration: none; }
.publicacion-enlace-video-server .enlace-preview-titulo:hover { color: var(--primario); }

/* Tarjeta de enlace no incrustable (miniatura + dominio + titulo + descripcion) */
.publicacion-enlace.enlace-preview-tarjeta { display: flex; flex-direction: column; padding: 0; overflow: hidden; align-items: stretch; gap: 0; }
.publicacion-enlace.enlace-preview-tarjeta .enlace-icono,
.publicacion-enlace.enlace-preview-tarjeta .enlace-flecha { display: none; }
.publicacion-enlace.enlace-preview-tarjeta .enlace-preview-img { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: #111; flex-shrink: 0; overflow: hidden; position: relative; }
.publicacion-enlace.enlace-preview-tarjeta .enlace-preview-img .preview-img-el { display: block; width: 100%; height: 100%; object-fit: cover; }
.publicacion-enlace.enlace-preview-tarjeta .enlace-preview-img .enlace-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; background: rgba(0,0,0,.5); border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; z-index: 2; }
.publicacion-enlace.enlace-preview-tarjeta .enlace-preview-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; }

/* Miniatura completa: la altura del recuadro la fija el JS según la proporción real de la
   imagen (aspect-ratio dinámico), así el video horizontal o vertical se ve entero, sin
   espacio vacío ni recorte. */
.publicacion-enlace.enlace-preview-tarjeta .enlace-preview-img.enlace-preview-completa .preview-img-el { object-fit: cover; }


.enlace-preview-fb { display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b5998, #4a69bd) !important; min-height: 180px; }
.enlace-preview-fb .preview-play { font-size: 34px; color: #fff; width: 62px; height: 62px; background: rgba(0,0,0,.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.fb-video-card { text-decoration: none; color: inherit; }
.fb-video-card .enlace-preview-img {
    display: block;
    width: 100%;
    background: #0a0d14;
    position: relative;
    overflow: hidden;
    max-height: 72vh;
}
.fb-video-card .enlace-preview-img.es-horizontal {
    aspect-ratio: 16 / 9;
}
.fb-video-card .enlace-preview-img.es-vertical {
    aspect-ratio: 9 / 16;
    max-width: 420px;
    margin: 0 auto;
    max-height: 72vh;
}
.fb-video-card .preview-img-el {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #0a0d14;
}
.fb-video-card .enlace-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    background: rgba(0,0,0,.55);
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    z-index: 2;
    pointer-events: none;
}
.fb-video-card .enlace-preview-body small {
    color: var(--texto-suave);
    font-size: 12.5px;
}



.tabs-feed { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-feed {
    padding: 8px 16px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
    background: var(--tarjeta); border: 1px solid var(--borde); color: var(--texto-suave);
    text-decoration: none; transition: all .15s;
}
.tab-feed:hover { color: var(--primario); border-color: var(--primario); }
.tab-feed.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.publicacion-comentarios {
    background: var(--fondo-suave); border-radius: 10px; padding: 12px 14px;
    margin: 10px 0; display: flex; flex-direction: column; gap: 10px;
}
.comentario { display: flex; align-items: flex-start; gap: 9px; }
.avatar-comentario {
    width: 28px; height: 28px; border-radius: 50%; background: var(--primario); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    flex-shrink: 0; overflow: hidden; text-decoration: none;
}
.avatar-comentario img { width: 100%; height: 100%; object-fit: cover; }
.comentario-cuerpo { min-width: 0; }
.comentario-autor {
    color: var(--titulo); font-size: 13.5px; font-weight: 700; text-decoration: none;
    display: block;
}
.comentario-autor:hover { color: var(--primario); text-decoration: underline; }
.comentario p { font-size: 14px; margin: 2px 0; }
.form-comentar { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.form-comentar-fila { display: flex; gap: 8px; align-items: stretch; }
.form-comentar-fila input {
    flex: 1; min-width: 0; height: 42px; padding: 10px 12px;
    border: 1px solid var(--borde); border-radius: 8px; font-size: 14px;
}
.form-comentar-fila input:focus { outline: none; border-color: var(--primario); }
.form-comentar .btn-pequeno { min-height: 42px; }
.comentar-adjuntos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comentar-adjuntos .extra-btn { padding: 6px 12px; font-size: 12.5px; }
.comentar-adjuntos .adjunto-input { display: none; }
.adjunto-info { font-size: 12px; color: var(--texto-suave); min-height: 1.2em; }

.comentario-imagen {
    display: block; margin-top: 8px; max-width: 240px;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--borde);
}
.comentario-imagen img { width: 100%; display: block; }
.comentario-documento {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px;
    padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--titulo);
    max-width: 100%; text-decoration: none; transition: border-color .15s;
}
.comentario-documento:hover { border-color: var(--primario); opacity: 1; }
.comentario-documento span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   COMENTARIOS AVANZADOS (responder, reaccionar, ocultar)
   ============================================================ */
.comentario-bloque { display: flex; flex-direction: column; gap: 2px; }
.comentario-bloque.ocultado { display: none !important; }
.comentario-oculto-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 8px; background: var(--tarjeta);
    border: 1px dashed var(--borde); color: var(--texto-suave); font-size: 13px;
}
.comentario-respuestas {
    margin-left: 30px; padding-left: 10px; border-left: 2px solid var(--borde);
    display: flex; flex-direction: column; gap: 8px;
}
.comentario-respuestas.oculto, .form-responder.oculto, .respuestas-toggle.oculto { display: none; }
.comentario.es-respuesta .avatar-comentario { width: 24px; height: 24px; font-size: 10px; }
.comentario.es-respuesta { gap: 7px; }

.comentario-acciones {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    margin-top: 3px; padding-top: 3px;
}
.comentario-boton {
    border: none; background: transparent; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
    padding: 4px 8px; border-radius: 20px; transition: background .15s, color .15s;
}
.comentario-boton:hover { background: var(--fondo); color: var(--primario); }
.comentario-reaccion { display: inline-flex; align-items: center; gap: 4px; }
.comentario-reaccion .rx-emoji { font-size: 13px; }
.comentario-reaccion .rx-total {
    color: #fff; background: var(--texto-suave); border-radius: 10px;
    font-size: 11px; line-height: 1; padding: 2px 5px; font-weight: 700;
}
.comentario-reaccion.activo { color: var(--primario); }
.comentario-reaccion.activo .rx-total { background: var(--primario); }

/* Selector de reacciones estilo Facebook: aparece al pasar el ratón. */
.comentario-rx-wrapper { position: relative; display: inline-flex; }
.popup-reacciones.popup-comentario {
    bottom: calc(100% + 12px); left: 50%; z-index: 8000;
    padding: 5px 8px; gap: 2px;
}
.popup-reacciones.popup-comentario.popup-fijo {
    z-index: 8000;
    transform: scale(1) translateY(0);
}
.popup-reacciones.popup-comentario::after { border-top-color: var(--tarjeta); }
.popup-comentario .popup-emoji { font-size: 22px; padding: 4px; }
/* Sin hover: el picker encima del input de respuesta tapaba el clic.
   Solo se muestra con .popup-abierto (mantener pulsado / segundo toque). */
.comentario-rx-wrapper.popup-abierto .popup-reacciones.popup-comentario {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: scale(1) translateY(0);
}

.form-responder { margin-top: 6px; max-width: 100%; }
.form-responder-fila { display: flex; gap: 8px; align-items: stretch; }
.form-responder-input {
    flex: 1; min-width: 0; height: 38px; padding: 8px 12px;
    border: 1px solid var(--borde); border-radius: 8px; font-size: 13.5px; font-family: inherit;
    background: var(--tarjeta); color: var(--texto);
}
.form-responder-input:focus { outline: none; border-color: var(--primario); }
.respuestas-toggle { align-self: flex-start; }

/* ============================================================
   MINISTERIOS
   ============================================================ */
.rejilla-ministerios { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; }
.tarjeta-ministerio {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 24px 18px; text-align: center; box-shadow: var(--sombra);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: transform .2s, box-shadow .2s;
}
.tarjeta-ministerio:hover { transform: translateY(-4px); }
.tarjeta-ministerio.destacado { border-color: var(--minist-color); box-shadow: 0 0 0 2px var(--minist-color); }
.minist-icono {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--minist-color, var(--primario)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 4px;
}
.tarjeta-ministerio h3 { color: var(--titulo); font-size: 17px; }
.minist-lider { font-size: 13.5px; color: var(--texto); }
.minist-lider-btn {
    border: none; background: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.minist-lider-btn:hover strong { color: var(--primario); text-decoration: underline; }
.minist-lider-btn:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.minist-desc { font-size: 13.5px; color: var(--texto-suave); }
.minist-pie {
    margin-top: auto; padding-top: 12px; display: flex; flex-direction: column;
    gap: 10px; align-items: center; width: 100%;
}
.minist-pie .form-inline { width: 100%; justify-content: center; }
.minist-pie .btn { width: 100%; }
.minist-miembros { font-size: 13px; color: var(--texto-suave); }
.minist-miembros.enlace-minist { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.minist-miembros.enlace-minist:hover { color: var(--primario); text-decoration: underline; }
.minist-contacto { font-size: 13px; font-weight: 600; margin-top: 4px; }
.aviso-centrado { text-align: center; }

/* Vista rápida de un ministerio (modal) */
.tarjeta-ministerio.abrible { cursor: pointer; }
.reacciones-modal-caja.caja-ministerio { max-width: 560px; }
.reacciones-modal-caja.caja-ministerio .reacciones-modal-lista { padding: 0; }
.minist-modal-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.minist-modal-cabecera { display: flex; align-items: center; gap: 12px; }
.minist-modal-cabecera .minist-icono { width: 48px; height: 48px; font-size: 22px; margin: 0; flex-shrink: 0; }
.minist-modal-cabecera h3 { font-size: 18px; color: var(--titulo); margin: 0; }
.minist-modal-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.minist-modal-desc { font-size: 14px; color: var(--texto); white-space: pre-line; margin: 0; }
.minist-modal-lider {
    display: flex; align-items: center; gap: 12px;
    background: var(--fondo-suave); border-radius: 12px; padding: 10px 12px;
}
.minist-modal-lider .avatar-min { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.minist-modal-lider .avatar.avatar-letra { width: 44px; height: 44px; font-size: 18px; line-height: 44px; }
.minist-modal-lider-datos { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.minist-modal-lider-datos strong { color: var(--titulo); }
.minist-modal-lider-datos a { color: var(--texto-suave); text-decoration: none; }
.minist-modal-lider-datos a:hover { text-decoration: underline; }
.minist-modal-lider-datos .minist-modal-lider-accion a { font-weight: 600; color: var(--primario); }
.minist-modal-miembros { border-top: 1px solid var(--borde); padding-top: 12px; }
.minist-modal-miembros > strong { font-size: 14px; color: var(--titulo); }
.minist-modal-lista { max-height: 230px; overflow-y: auto; margin-top: 6px; }
.minist-modal-lista .reacciones-usuario { padding-right: 4px; }
.minist-modal-acciones {
    display: flex; flex-wrap: wrap; gap: 10px;
    border-top: 1px solid var(--borde); padding-top: 14px;
}
.minist-modal-acciones .form-inline { margin: 0; }
.minist-modal-acciones .btn { flex: 1 1 170px; justify-content: center; }

/* Modal de vista rápida del líder de un ministerio */
.lider-min-perfil { display: flex; flex-direction: column; gap: 12px; }
.lider-min-cabecera { display: flex; align-items: center; gap: 12px; }
.lider-min-cabecera .avatar-min { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.lider-min-cabecera .avatar.avatar-letra { width: 56px; height: 56px; font-size: 22px; line-height: 56px; }
.lider-min-datos { display: flex; flex-direction: column; gap: 2px; }
.lider-min-datos strong { font-size: 16px; color: var(--titulo); }
.lider-min-datos .etiqueta-lider { font-size: 12.5px; font-weight: 700; color: var(--primario); }
.lider-min-bio { font-size: 13.5px; color: var(--texto); margin: 0; }
.lider-min-linea { font-size: 13.5px; color: var(--texto-suave); margin: 0; }
.lider-min-acciones { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--borde); padding-top: 12px; }
.lider-min-acciones .form-inline { margin: 0; }

.pagina-titulo h1 .minist-icono {
    width: 46px; height: 46px; font-size: 22px; vertical-align: middle;
    display: inline-flex; margin-right: 6px;
}
.rejilla-miembros-min { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tarjeta-miembro-min {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 14px 16px; box-shadow: var(--sombra);
    display: flex; align-items: center; gap: 12px;
}
.miembro-min-datos { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.miembro-min-datos strong { color: var(--titulo); font-size: 14.5px; }
.miembro-min-datos a { font-size: 12.5px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miembro-min-datos a:hover { color: var(--primario); text-decoration: underline; }
.miembro-min-datos .miembro-min-nombre { color: var(--titulo); font-size: 14.5px; font-weight: 700; }
.etiqueta-lider {
    display: inline-block; margin-top: 3px; padding: 2px 10px;
    background: linear-gradient(135deg, #f7d774, #c9a227); color: #4d3a00;
    font-size: 11px; font-weight: 700; border-radius: 10px; width: fit-content;
}

/* ============================================================
   PERFILES PÚBLICOS
   ============================================================ */
.tarjeta-perfil {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; box-shadow: var(--sombra); margin-bottom: 26px;
}
.perfil-portada {
    height: 150px;
    background: linear-gradient(135deg, var(--primario) 0%, var(--primario-oscuro) 60%, var(--acento) 100%);
}
.perfil-info { display: flex; align-items: flex-end; gap: 18px; padding: 0 24px 22px; flex-wrap: wrap; }
.perfil-foto {
    width: 110px; height: 110px; border-radius: 50%; margin-top: -55px; flex-shrink: 0;
    background: var(--fondo-suave); border: 4px solid #fff; box-shadow: var(--sombra);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 800; color: var(--primario); overflow: hidden;
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-datos h1 { margin: 0; color: var(--titulo); font-size: 26px; }
.perfil-acciones { margin-top: 10px; }
.perfil-editar-foto {
    margin-top: 10px; padding: 12px 14px; background: var(--fondo-suave);
    border: 1px solid var(--borde); border-radius: 10px; max-width: 340px;
}
.oculto { display: none !important; }
.perfil-miembro { margin: 2px 0; font-weight: 700; color: var(--primario); }
.perfil-sede { margin: 2px 0; font-size: 13.5px; color: var(--texto-suave); }
.perfil-correo { font-size: 14px; color: var(--primario); text-decoration: none; }
.perfil-correo:hover { text-decoration: underline; }
.bloque-perfil { margin-bottom: 26px; }
.tarjeta-perfil + .bloque-perfil .tarjeta-ministerio { text-decoration: none; }

.perfil-foto-grande {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--fondo-suave); border: 3px solid var(--borde);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; color: var(--primario); overflow: hidden;
}
.perfil-foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.ayuda-campo { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 4px; }

/* ============================================================
   PERFIL TIPO FACEBOOK
   ============================================================ */
.cabecera-perfil {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; box-shadow: var(--sombra); margin-bottom: 22px;
}
.perfil-fb-portada {
    height: 300px; position: relative; background: linear-gradient(135deg, #1e3a5f 0%, #152a47 60%, #c9a227 100%);
}
.perfil-fb-portada img { width: 100%; height: 100%; object-fit: cover; }
.perfil-fb-portada-acciones {
    position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; gap: 8px;
}
.perfil-fb-boton-portada {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(255,255,255,.92); color: var(--titulo);
    padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 700; font-family: inherit;
    border: none; box-shadow: 0 2px 10px rgba(0,0,0,.3); transition: transform .15s, background .15s;
}
.perfil-fb-boton-portada:hover { background: #fff; transform: scale(1.05); }
.perfil-fb-boton-portada input { display: none; }
.rejilla-elegir-portada {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 60vh; overflow-y: auto;
}
.elegir-portada-opcion {
    position: relative; border-radius: 8px; overflow: hidden; border: 3px solid transparent;
    padding: 0; cursor: pointer; background: var(--fondo-suave); aspect-ratio: 16/9;
}
.elegir-portada-opcion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elegir-portada-opcion:hover { border-color: var(--primario); }
.elegir-portada-opcion.activo { border-color: var(--primario); }
.perfil-fb-camara {
    position: absolute; display: grid; place-items: center; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94);
    color: var(--titulo); box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 5;
    font-size: 18px; transition: transform .15s, background .15s;
}
.perfil-fb-camara:hover { background: #fff; transform: scale(1.08); }
.perfil-fb-camara.portada { right: 18px; bottom: 18px; }
.perfil-fb-camara.foto { right: 6px; bottom: 6px; border: 3px solid #fff; }
.perfil-fb-camara input { display: none; }
.perfil-fb-identidad {
    display: flex; align-items: flex-end; gap: 18px; padding: 0 26px 16px; flex-wrap: wrap; position: relative;
}
.perfil-fb-foto {
    width: 148px; height: 148px; border-radius: 50%; margin-top: -74px; position: relative; flex-shrink: 0;
    background: var(--fondo-suave); border: 5px solid #fff; box-shadow: var(--sombra);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.perfil-fb-foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-fb-iniciales { font-size: 52px; font-weight: 800; color: var(--primario); }
.perfil-fb-datos { flex: 1 1 260px; padding-top: 6px; }
.perfil-fb-datos h1 { margin: 0; color: var(--titulo); font-size: 30px; font-weight: 800; }
.perfil-fb-resumen { margin: 2px 0; font-size: 15px; color: var(--texto-suave); }
.perfil-fb-fecha { margin: 2px 0; font-size: 13px; color: var(--texto-suave); }
.perfil-fb-botones { padding-top: 10px; display: flex; gap: 10px; }

.pestañas-perfil {
    display: flex; gap: 4px; padding: 0 20px; border-top: 1px solid var(--borde);
}
.pestaña-perfil {
    padding: 14px 20px; font-weight: 700; color: var(--texto-suave); font-size: 15px;
    text-decoration: none; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.pestaña-perfil:hover { color: var(--primario); opacity: 1; }
.pestaña-perfil.activo { color: var(--primario); border-bottom-color: var(--primario); }

.panel-seccion-perfil { margin-top: 4px; }

.perfil-fb-cuerpo { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.perfil-fb-lateral { display: flex; flex-direction: column; gap: 18px; }
.tarjeta-perfil-info {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px;
}
.tarjeta-perfil-info h3 { color: var(--titulo); font-size: 17px; margin: 0 0 10px; }
.tarjeta-perfil-info p { margin: 6px 0; font-size: 14.5px; }
.perfil-info-bio { color: var(--texto); line-height: 1.55; }
.perfil-info-vacio { color: var(--texto-suave); font-style: italic; font-size: 13.5px; }
.enlace-ministerio-perfil {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 4px 6px 4px 0;
    background: var(--fondo-suave); border-radius: 999px; font-size: 13.5px; font-weight: 600;
    color: var(--primario); text-decoration: none; transition: background .15s;
}
.enlace-ministerio-perfil:hover { background: var(--borde); opacity: 1; }
.perfil-fb-principal { min-width: 0; }

.lista-info-perfil { margin: 6px 0; }
.lista-info-perfil dt { font-weight: 700; color: var(--titulo); margin-top: 10px; font-size: 14px; }
.lista-info-perfil dd { margin: 2px 0 0; font-size: 14.5px; color: var(--texto); }

.galeria-perfil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.foto-perfil {
    position: relative; border-radius: 10px; overflow: hidden; background: var(--fondo-suave);
    aspect-ratio: 1/1; display: block; box-shadow: var(--sombra); transition: transform .15s;
}
.foto-perfil:hover { transform: scale(1.02); }
.foto-perfil img { width: 100%; height: 100%; object-fit: cover; }
.foto-perfil-fija { cursor: default; }

/* Modal editorial del perfil */
.modal-perfil {
    position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .6);
    display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.modal-perfil-caja {
    background: var(--tarjeta); border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
    padding: 22px 26px; max-height: 92vh; overflow-y: auto;
}
.modal-perfil-cabecera {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.modal-perfil-cabecera h3 { margin: 0; color: var(--titulo); }
.modal-perfil-cerrar {
    background: var(--fondo-suave); border: none; width: 32px; height: 32px; border-radius: 50%;
    font-size: 18px; cursor: pointer; color: var(--texto); font-family: inherit;
}
.modal-perfil-cerrar:hover { background: var(--borde); }
.campo-textarea {
    width: 100%; min-height: 84px; padding: 11px 13px; border: 1px solid var(--borde);
    border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--texto); margin-bottom: 14px; resize: vertical;
}
.campo-textarea:focus { outline: none; border-color: var(--primario); }

.modal-perfil .campo { margin-bottom: 14px; }
.modal-perfil label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.modal-perfil input[type="text"],
.modal-perfil input[type="tel"] {
    width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--texto); box-sizing: border-box;
}
.modal-perfil input[type="text"]:focus,
.modal-perfil input[type="tel"]:focus { outline: none; border-color: var(--primario); }
.campo-cumpleanos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--texto); background: var(--tarjeta);
}
.campo-select:focus { outline: none; border-color: var(--primario); }

@media (max-width: 860px) {
    .perfil-fb-cuerpo { grid-template-columns: 1fr; }
    .perfil-fb-portada { height: 200px; }
    .galeria-perfil { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .perfil-fb-foto { width: 118px; height: 118px; margin-top: -60px; }
    .galeria-perfil { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SERMONES / VIDEOS
   ============================================================ */
.rejilla-sermones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tarjeta-sermon {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.video-sermon { background: #000; }
.video-sermon video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.cuerpo-sermon { padding: 16px 18px; }
.cuerpo-sermon h3 { color: var(--titulo); font-size: 17px; margin: 4px 0; }
.cuerpo-sermon p { color: var(--texto-suave); font-size: 14px; }
.fecha-sermon { font-size: 12.5px; color: var(--dorado); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.cuerpo-audio { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 12px; }
.etiqueta-podcast {
    display: inline-block; background: linear-gradient(135deg, var(--primario), var(--primario-claro));
    color: #fff; font-size: 12px; font-weight: 700; border-radius: 16px; padding: 3px 12px; margin-bottom: 8px;
}
.cuerpo-audio audio { width: 100%; }

/* ============================================================
   DASHBOARD (pestañas de Mi cuenta)
   ============================================================ */
.tabs-cuenta {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 12px; padding: 8px; box-shadow: var(--sombra); margin-bottom: 26px;
}
.tab-btn {
    border: none; background: transparent; padding: 10px 16px; border-radius: 8px; font-size: 14.5px;
    font-weight: 600; color: var(--texto-suave); cursor: pointer; transition: all .15s;
    font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
}
.tab-btn:hover { background: var(--fondo-suave); color: var(--titulo); }
.tab-btn.activo { background: var(--primario); color: #fff; }
.tab-salir { color: var(--peligro); }
.tab-btn.tab-salir { margin-left: auto; }
.tab-panel.oculto { display: none; }

/* ============================================================
   NUESTRA HISTORIA
   ============================================================ */
.contenedor-medio { max-width: 900px; }
.histor-hero {
    background:
        radial-gradient(1000px 380px at 85% -10%, rgba(201,162,39,.22), transparent 60%),
        radial-gradient(800px 420px at -10% 110%, rgba(46,93,150,.35), transparent 60%),
        linear-gradient(135deg, var(--primario-oscuro), var(--primario));
    color: #fff; text-align: center; padding: 84px 0 64px; position: relative; overflow: hidden;
}
.histor-hero::after {
    content: ""; position: absolute; inset: 0; opacity: .05;
    background-image: radial-gradient(circle at 25px 25px, #fff 2px, transparent 2px);
    background-size: 50px 50px;
}
.histor-prefacio { text-transform: uppercase; letter-spacing: 4px; font-size: 13px; color: var(--dorado); font-weight: 700; }
.histor-hero h1 { font-size: clamp(34px, 6vw, 56px); margin: 12px 0 10px; }
.histor-hero-sub { max-width: 620px; margin: 0 auto; color: #e9e4ff; font-size: 17px; position: relative; z-index: 1; }
.histor-tabs {
    display: flex; gap: 8px; justify-content: center; margin: -30px auto 0; padding: 10px;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: var(--sombra); width: max-content; max-width: calc(100% - 32px); position: relative; z-index: 3; flex-wrap: wrap;
}
.histor-panel { animation: aparicion-panel .35s ease; }
@keyframes aparicion-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.histor-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.histor-intro-gran {
    font-family: "Playfair Display", serif; font-size: clamp(20px, 3vw, 26px); line-height: 1.5;
    color: var(--titulo); margin-bottom: 18px;
}
.histor-cifras {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px;
}
.histor-cifra {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 22px 14px; text-align: center; box-shadow: var(--sombra); transition: transform .2s;
}
.histor-cifra:hover { transform: translateY(-4px); }
.histor-cifra-num { display: block; font-size: 34px; font-weight: 800; color: var(--primario); }
.histor-cifra-txt { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
.histor-linia {
    list-style: none; position: relative; margin: 10px 0 0; padding-left: 44px;
}
.histor-linia::before {
    content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, var(--primario-claro), var(--dorado));
}
.histor-hito { position: relative; padding-bottom: 34px; }
.histor-hito::before {
    content: ""; position: absolute; left: -44px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--tarjeta); border: 3px solid var(--primario); box-shadow: 0 0 0 4px var(--fondo-suave);
}
.histor-hito:last-child::after {
    content: "†"; position: absolute; left: -44px; top: -6px; transform: translateX(-14px);
    font-size: 26px; color: var(--dorado); font-family: serif;
}
.histor-hito-anyio {
    display: inline-block; background: linear-gradient(135deg, var(--primario), var(--primario-claro));
    color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 14px; margin-bottom: 8px;
}
.histor-hito-cos h3 { font-size: 19px; color: var(--titulo); margin-bottom: 6px; }
.histor-hito-cos p { font-size: 15px; line-height: 1.65; color: var(--texto); }
.histor-cita {
    max-width: 760px; margin: 0 auto; text-align: center; padding: 40px 28px;
    border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra);
}
.histor-cita blockquote { font-family: "Playfair Display", serif; font-size: clamp(22px, 3.4vw, 30px); color: var(--titulo); }
.histor-cita p { margin-top: 12px; color: var(--texto-suave); font-size: 14px; }
.histor-mision-vision { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.histor-mv {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 26px; box-shadow: var(--sombra); transition: transform .2s;
}
.histor-mv:hover { transform: translateY(-4px); }
.histor-mv-icono { font-size: 30px; display: block; margin-bottom: 12px; }
.histor-mv h3 { font-size: 19px; color: var(--titulo); margin-bottom: 8px; }
.histor-mv p { font-size: 15px; line-height: 1.65; color: var(--texto); }
.histor-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.histor-servicio {
    display: block; text-decoration: none; color: inherit; background: var(--tarjeta);
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.histor-servicio:hover { transform: translateY(-4px); box-shadow: 0 10px 26px var(--sombra-fuerte); border-color: var(--primario); }
.histor-servicio-icono { font-size: 28px; display: block; margin-bottom: 12px; }
.histor-servicio h3 { font-size: 16.5px; color: var(--titulo); margin-bottom: 6px; }
.histor-servicio p { font-size: 14px; color: var(--texto-suave); line-height: 1.55; }
@media (max-width: 1024px) {
    .histor-cifras { grid-template-columns: repeat(2, 1fr); }
    .histor-servicios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .histor-cifras, .histor-mision-vision, .histor-servicios { grid-template-columns: 1fr; }
    .histor-linia { padding-left: 36px; }
    .histor-hito::before, .histor-hito:last-child::after { left: -36px; }
}

/* ============================================================
   ADMIN (detalles nuevos)
   ============================================================ */
.nota-campo { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.celda-corta { max-width: 320px; word-break: break-word; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .rejilla-eventos, .rejilla-noticias { grid-template-columns: repeat(2, 1fr); }
    .rejilla-miembros { grid-template-columns: repeat(3, 1fr); }
    .rejilla-ministerios { grid-template-columns: repeat(3, 1fr); }
    .tarjetas-conteo { grid-template-columns: repeat(3, 1fr); }
    .rejilla-galeria { grid-template-columns: repeat(2, 1fr); }
    .rejilla-donaciones { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
    .enlace-perfil-nombre { display: none; }
    .form-buscar input { width: 90px; }
    .rejilla-inventario { grid-template-columns: repeat(3, 1fr); }
    .nodos-ministerios { grid-template-columns: repeat(2, 1fr); }
    .nodos-ministerios::before { left: 6%; right: 6%; }
    .rejilla-miembros { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {

    .rejilla-eventos, .rejilla-noticias, .rejilla-miembros,
    .rejilla-galeria, .rejilla-pie, .rejilla-donaciones { grid-template-columns: 1fr; }
    .rejilla-ministerios, .rejilla-sermones { grid-template-columns: 1fr; }

    .tarjeta-evento-grande { flex-direction: column; }
    .campo-doble, .panel-dos-col { grid-template-columns: 1fr; }
    .tarjetas-conteo { grid-template-columns: repeat(2, 1fr); }
    .rejilla-galeria-admin { grid-template-columns: repeat(2, 1fr); }

    .panel { flex-direction: column; }
    .panel-lateral {
        width: 100%; height: auto; position: fixed; top: 0; bottom: 0; left: 0;
        z-index: 200; transform: translateX(-100%); transition: transform .3s;
    }
    .panel-lateral.abierto { transform: translateX(0); }
    .panel-contenido { padding: 20px 16px; }
    .panel-cabecera-movil {
        display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
        background: var(--primario-oscuro); color: #fff; padding: 12px 16px;
        border-radius: 10px;
    }
    .panel-cabecera-movil h1 { font-size: 16px; }
}

@media (max-width: 768px) {
    .rejilla-inventario { grid-template-columns: repeat(2, 1fr); }
    .nodos-ministerios { grid-template-columns: 1fr; padding-top: 20px; }
    .nodos-ministerios::before { display: none; }
    .nodo-conector-ministerio { display: none; }
    .nodos-liderazgo { gap: 24px; }
}

@media (max-width: 480px) {
    .tarjetas-conteo { grid-template-columns: 1fr; }
    .rejilla-galeria-admin { grid-template-columns: 1fr; }
    .encabezado-seccion h2 { font-size: 23px; }
}


/* ============================================================
   GESTIÓN DE MINISTERIOS (líder) + mensajes flash
   ============================================================ */
.aviso-feedback {
    max-width: 760px;
    margin: 0 auto 20px;
    border-radius: 10px;
    padding: 14px 16px;
    font-weight: 600;
    text-align: center;
}
.panel-lider {
    margin-top: 34px;
    padding: 22px;
    background: var(--fondo-suave);
    border: 1px solid var(--borde);
    border-radius: 14px;
}
.panel-lider h3 { margin-bottom: 4px; color: var(--primario, #1e3a5f); }
.panel-lider .subtitulo-seccion { margin-bottom: 18px; }
.form-gestion-lider {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    background: var(--tarjeta); padding: 16px; border-radius: 10px;
    border: 1px solid var(--borde); margin-bottom: 18px;
}
.form-gestion-lider .campo { flex: 1 1 260px; margin-bottom: 0; }
.form-gestion-lider select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 14px; background: var(--tarjeta);
}
.tabla-lider {
    width: 100%; border-collapse: collapse; background: var(--tarjeta);
    border-radius: 10px; overflow: hidden; font-size: 14px;
}
.tabla-lider-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-lider th, .tabla-lider td {
    text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
.tabla-lider th { background: var(--fondo-suave); color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tabla-lider tr:last-child td { border-bottom: none; }
.btn-peligro {
    background: #d9534f; color: #fff; border: none;
}
.btn-peligro:hover { background: #c0392b; }
.texto-suave { color: #8a94a6; font-size: 13px; }

/* ═══════ CALENDARIO MENSUAL ═══════ */
.toolbar-calendario { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.calendario-mensual { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.calendario-cabecera { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--primario-oscuro); color: #fff; }
.calendario-cabecera span { padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.calendario-cuerpo { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dia { min-height: 96px; padding: 6px; border: 1px solid var(--borde); border-top: none; position: relative; }
html[data-tema="oscuro"] .cal-dia { border-color: var(--borde); }
.cal-dia-vacio { background: var(--fondo-suave); }
.cal-numero { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; font-weight: 700; font-size: 13px; border-radius: 50%; color: var(--texto); }
/* Día de hoy: anillo de celda + círculo relleno fuerte + chip «Hoy» */
.cal-dia.hoy,
.cal-dia.es-hoy {
    background: rgba(30, 58, 95, .1);
    box-shadow: inset 0 0 0 2.5px var(--primario);
    z-index: 1;
}
.cal-dia.hoy.culto,
.cal-dia.es-hoy.culto {
    background: rgba(30, 58, 95, .12);
}
.cal-dia.hoy .cal-numero,
.cal-dia.es-hoy .cal-numero {
    width: 28px;
    height: 28px;
    line-height: 28px;
    background: var(--primario);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .22), 0 2px 6px rgba(21, 42, 71, .35);
}
.cal-hoy-etiqueta {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.35;
    vertical-align: middle;
    color: #fff;
    background: var(--primario);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(21, 42, 71, .25);
}
html[data-tema="oscuro"] .cal-dia.hoy,
html[data-tema="oscuro"] .cal-dia.es-hoy {
    background: rgba(126, 166, 217, .14);
    box-shadow: inset 0 0 0 2.5px var(--primario);
}
html[data-tema="oscuro"] .cal-dia.hoy.culto,
html[data-tema="oscuro"] .cal-dia.es-hoy.culto {
    background: rgba(126, 166, 217, .16);
}
html[data-tema="oscuro"] .cal-dia.hoy .cal-numero,
html[data-tema="oscuro"] .cal-dia.es-hoy .cal-numero {
    background: var(--primario);
    color: #0d1f38;
    box-shadow: 0 0 0 3px rgba(126, 166, 217, .28), 0 2px 6px rgba(0, 0, 0, .35);
}
html[data-tema="oscuro"] .cal-hoy-etiqueta {
    color: #0d1f38;
    background: var(--primario);
}
.leyenda-hoy-muestra {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block;
    background: var(--primario);
    box-shadow: inset 0 0 0 2px var(--primario-oscuro);
}
html[data-tema="oscuro"] .leyenda-hoy-muestra {
    background: var(--primario);
}
.cal-dia.con-evento { background: rgba(30, 58, 95, .06); }
.cal-eventos { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.cal-burbuja {
    display: block; color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px;
    padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-burbuja:hover { opacity: .9; color: #fff; }
.cal-burbuja-culto { cursor: pointer; }
.cal-dia.culto { background: rgba(201, 162, 39, .07); }
html[data-tema="oscuro"] .cal-dia.culto { background: rgba(224, 182, 74, .08); }
/* Hoy gana sobre .con-evento / .culto (mismas especificidades posteriores) */
.cal-dia.hoy,
.cal-dia.es-hoy,
.cal-dia.hoy.con-evento,
.cal-dia.es-hoy.con-evento {
    background: rgba(30, 58, 95, .1);
    box-shadow: inset 0 0 0 2.5px var(--primario);
}
.cal-dia.hoy.culto,
.cal-dia.es-hoy.culto,
.cal-dia.hoy.con-evento.culto,
.cal-dia.es-hoy.con-evento.culto {
    background: rgba(30, 58, 95, .12);
    box-shadow: inset 0 0 0 2.5px var(--primario);
}
html[data-tema="oscuro"] .cal-dia.hoy,
html[data-tema="oscuro"] .cal-dia.es-hoy,
html[data-tema="oscuro"] .cal-dia.hoy.con-evento,
html[data-tema="oscuro"] .cal-dia.es-hoy.con-evento {
    background: rgba(126, 166, 217, .14);
    box-shadow: inset 0 0 0 2.5px var(--primario);
}
html[data-tema="oscuro"] .cal-dia.hoy.culto,
html[data-tema="oscuro"] .cal-dia.es-hoy.culto,
html[data-tema="oscuro"] .cal-dia.hoy.con-evento.culto,
html[data-tema="oscuro"] .cal-dia.es-hoy.con-evento.culto {
    background: rgba(126, 166, 217, .16);
    box-shadow: inset 0 0 0 2.5px var(--primario);
}
.nota-calendario { margin-top: 14px; font-size: 13px; color: var(--texto-suave); }
.leyenda-calendario {
    margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: 12.5px; color: var(--texto-suave);
}
.leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda-toca { font-weight: 600; }
@media (max-width: 600px) {
    .cal-dia { min-height: 64px; }
    .cal-burbuja { display: none; }
    .cal-hoy-etiqueta { font-size: 8.5px; padding: 0 4px; margin-left: 3px; }
    .cal-dia.con-evento::after { content: '●'; position: absolute; bottom: 4px; right: 7px; color: var(--peligro); }
    .cal-dia.culto::after { content: '●'; position: absolute; bottom: 4px; right: 22px; color: var(--primario-claro); }
}

/* Calendario clicable: TODOS los días abren su agenda (con o sin eventos) */
.cal-dia[data-fecha] { cursor: pointer; }
.cal-dia[data-fecha]:hover,
.cal-dia[data-fecha]:focus-visible { background: rgba(30, 58, 95, .1); }
.cal-dia.hoy[data-fecha]:hover,
.cal-dia.es-hoy[data-fecha]:hover,
.cal-dia.hoy[data-fecha]:focus-visible,
.cal-dia.es-hoy[data-fecha]:focus-visible {
    background: rgba(30, 58, 95, .14);
}
html[data-tema="oscuro"] .cal-dia.hoy[data-fecha]:hover,
html[data-tema="oscuro"] .cal-dia.es-hoy[data-fecha]:hover,
html[data-tema="oscuro"] .cal-dia.hoy[data-fecha]:focus-visible,
html[data-tema="oscuro"] .cal-dia.es-hoy[data-fecha]:focus-visible {
    background: rgba(126, 166, 217, .18);
}
.cal-dia[data-fecha]:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.cal-dia[data-fecha]:hover .cal-numero { background: var(--primario); color: #fff; }
.cal-burbuja { border: none; font-family: inherit; text-align: left; cursor: pointer; }
.cal-burbuja:focus { outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; }
.cal-burbuja-contador {
    display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,.28); border-radius: 8px; padding: 0 4px;
}

/* Modal detalle de evento desde el calendario */
.modal-evento-detalle-caja { max-width: 460px; }
.modal-evento-detalle { padding: 16px 18px; overflow-y: auto; }
.detalle-evento-cabecera h3 { margin: 8px 0 4px; font-size: 19px; color: var(--titulo); }
.detalle-evento-lineas { margin-top: 10px; }
.detalle-evento-linea { font-size: 14px; color: var(--texto-suave); margin-bottom: 6px; }
.detalle-evento-descripcion {
    margin-top: 10px; font-size: 14.5px; color: var(--texto);
    line-height: 1.6; white-space: pre-wrap;
}
.detalle-evento-pie { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista-dia-evento-fila {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--borde); background: var(--fondo); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-family: inherit;
    font-size: 14px; color: var(--texto); transition: border-color .15s;
}
.lista-dia-evento-fila:hover { border-color: var(--primario); }
.lista-dia-evento-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lista-dia-evento-txt {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Agenda del día (al abrir un día del calendario) */
.agenda-dia-cabecera {
    background: linear-gradient(135deg, var(--primario) 0%, var(--primario-oscuro) 100%);
    color: #fff; margin: -16px -18px 14px; padding: 16px 18px; border-radius: 8px 8px 0 0;
}
.agenda-dia-cabecera h3 { color: #fff; margin: 0; font-size: 17px; font-weight: 700; }
.agenda-dia-vacio {
    text-align: center; padding: 26px 10px; color: var(--texto-suave);
    border: 1px dashed var(--borde); border-radius: 10px;
}
.agenda-dia-vacio-icono { font-size: 34px; margin-bottom: 8px; }
.agenda-dia-vacio p { margin: 0; font-size: 14px; }
.fila-recurrente { background: rgba(201, 162, 39, .06); border-style: dashed; }
.fila-recurrente:hover { border-color: var(--primario); }
.dia-evento-editar {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
    background: transparent; color: var(--texto-suave); font-size: 13px;
    transition: background .15s, color .15s;
}
.dia-evento-editar:hover { background: var(--fondo-suave); color: var(--titulo); }
.dia-evento-eliminar:hover { background: rgba(235, 87, 87, .12); color: var(--peligro); }
.btn-agregar-dia {
    display: block; width: 100%; margin-top: 14px; text-align: center;
    border: 1px dashed var(--primario); background: transparent;
    color: var(--primario); font-weight: 600;
}
.btn-agregar-dia:hover { background: rgba(30, 58, 95, .06); }

@media (max-width: 600px) {
    .form-gestion-lider { flex-direction: column; align-items: stretch; }
    .tabla-lider-responsive { overflow: visible; }
    .tabla-lider, .tabla-lider tbody { display: block; }
    .tabla-lider thead { display: none; }
    .tabla-lider tr {
        display: block; border: 1px solid var(--borde); border-radius: 10px;
        margin-bottom: 10px; padding: 6px 12px;
    }
    .tabla-lider td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; border: none; padding: 8px 2px; flex-wrap: wrap;
    }
    .tabla-lider td::before {
        content: attr(data-label);
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .03em; color: var(--texto-suave); flex-shrink: 0;
    }
    .tabla-lider .min-retirar-celda { justify-content: flex-end; }
    .tabla-lider .min-retirar-celda .form-inline { margin: 0; }
}

/* ═══════ VISOR UNIVERSAL DE FOTOS (zoom +/−, flechas, pantalla completa) ═══════ */
.visor-fotos {
    position: fixed; inset: 0; z-index: 500; background: rgba(8, 12, 20, .95);
    display: none; align-items: center; justify-content: center;
    animation: aparicion .18s ease;
}
.visor-fotos.abierto { display: flex; }
.visor-fotos-pantalla {
    position: absolute; inset: 0; overflow: auto; display: grid; place-items: center;
    padding: 56px 78px 44px; box-sizing: border-box; cursor: zoom-in;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.visor-fotos-pantalla.arrastrando { cursor: grabbing; }
.visor-fotos-img {
    max-width: 92vw; max-height: 84vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,.65); background: #000;
    transform-origin: center; transition: transform .18s ease;
}
.visor-fotos-btn {
    background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%; font-size: 16px; line-height: 1;
    display: grid; place-items: center; font-family: inherit;
    transition: background .15s, transform .12s;
}
.visor-fotos-btn:hover { background: rgba(255,255,255,.32); transform: scale(1.06); }
.visor-fotos-btn[data-zoom="menos"],
.visor-fotos-btn[data-zoom="mas"],
.visor-fotos-btn[data-zoom="pantalla"] {
    font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.visor-fotos-btn[data-zoom="menos"] { background-image: url('../img/lupa_menos.png'); }
.visor-fotos-btn[data-zoom="mas"] { background-image: url('../img/lupa_mas.png'); }
.visor-fotos-btn[data-zoom="pantalla"] { background-image: url('../img/pantalla_completa.png'); }
.visor-fotos-cerrar {
    position: absolute; top: 18px; right: 22px; z-index: 502; font-size: 24px;
}
.visor-fotos-cerrar:hover { background: var(--peligro); transform: none; }
.visor-fotos-barra {
    position: absolute; top: 76px; right: 18px; z-index: 502;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: rgba(10,14,22,.6); padding: 6px; border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
}
.visor-fotos-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 502;
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
    display: grid; place-items: center; font-family: inherit;
    transition: background .15s, transform .12s;
}
.visor-fotos-flecha:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.06); }
.visor-fotos-ant { left: 18px; }
.visor-fotos-sig { right: 18px; }
.visor-fotos-info {
    position: absolute; left: 0; right: 0; top: 16px; text-align: center;
    color: #e6ebf2; font-size: 13.5px; padding: 0 24px; pointer-events: none; z-index: 501;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.visor-fotos-pie { display: block; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.visor-fotos-contador { font-size: 12px; color: #b9c2d0; }
.visor-fotos-info a { color: #93c5fd; pointer-events: auto; }
.visor-fotos-info:empty { display: none; }

@media (max-width: 720px) {
    .visor-fotos-pantalla { padding: 50px 12px 40px; }
    .visor-fotos-img { max-width: 96vw; max-height: 70vh; }
    .visor-fotos-barra { top: 70px; right: 8px; }
    .visor-fotos-flecha { width: 40px; height: 40px; font-size: 24px; }
    .visor-fotos-ant { left: 6px; }
    .visor-fotos-sig { right: 6px; }
}

/* ═══════ LUPAS FLOTANTES SOBRE LAS IMÁGENES (esquina superior derecha) ═══════ */
.visor-flotante { position: relative; display: inline-block; line-height: 0; }
.visor-flotante-cluster {
    position: absolute; top: 8px; right: 8px; z-index: 30;
    display: flex; gap: 4px;
    opacity: .92; pointer-events: auto;
}
.visor-flotante-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
    background-color: rgba(10,14,22,.35);
    background-repeat: no-repeat; background-position: center; background-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: background-color .15s, transform .12s;
}
.visor-flotante-btn:hover { background-color: rgba(35,45,70,.85); transform: scale(1.1); }
.visor-flotante-btn[data-flotante="mas"] { background-image: url('../img/lupa_mas.png'); }
.visor-flotante-btn[data-flotante="menos"] { background-image: url('../img/lupa_menos.png'); }
.visor-flotante-btn[data-flotante="abrir"] { background-image: none; font-size: 14px; color: #fff; line-height: 1; }
@keyframes aparicion { from { opacity: 0; } to { opacity: 1; } }

/* ═══════ MURO DE ORACIÓN ═══════ */
.caja-orar {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 22px; box-shadow: var(--sombra); margin-bottom: 26px;
}
.caja-orar h2 { font-size: 20px; margin-bottom: 12px; color: var(--primario); }
.caja-orar input[type="text"], .caja-orar textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 15px; margin-bottom: 10px; font-family: inherit; background: var(--fondo); color: var(--texto);
}
.caja-orar-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.caja-orar-pie .check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.h2-lista-oraciones { font-size: 22px; margin: 26px 0 14px; color: var(--primario); }
.h2-lista-oraciones span { color: var(--texto-suave); font-size: 15px; font-family: "Inter", sans-serif; }
.lista-oraciones { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-oracion {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; box-shadow: var(--sombra);
}
.oracion-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.oracion-avatar {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primario), var(--primario-claro)); color: #fff; font-weight: 700;
}
.oracion-nombre { font-weight: 700; color: var(--titulo); }
.oracion-fecha { margin-left: auto; font-size: 12px; color: var(--texto-suave); }
.oracion-texto { color: var(--texto); font-size: 15px; margin-bottom: 12px; }
.oracion-ore { display: flex; align-items: center; gap: 12px; }
.oracion-contador { font-size: 14px; color: var(--texto-suave); }


/* ═══════ TABLA DE EVENTOS DESPLEGABLE (acordeón) ═══════ */
.btn-admin { background: var(--primario); color: #fff; border: 1px solid var(--primario); }
.btn-admin:hover { background: var(--primario-oscuro); color: #fff; }

.tabla-eventos {
    max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
}
.fila-evento {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: var(--sombra); overflow: hidden; transition: border-color .15s;
}
.fila-evento[open] { border-color: var(--primario); }
.fila-evento summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; flex-wrap: wrap;
}
.fila-evento summary::-webkit-details-marker { display: none; }
.fila-evento summary:hover { background: var(--fondo-suave); }
.fecha-evento {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--primario); color: #fff; border-radius: 10px;
    min-width: 54px; padding: 6px 8px; line-height: 1.1; flex-shrink: 0;
}
.fecha-evento .dia { font-size: 22px; font-weight: 800; }
.fecha-evento .mes { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.titulo-evento { font-weight: 700; font-size: 16.5px; color: var(--titulo); flex: 1; min-width: 180px; }
.hora-evento, .lugar-evento { font-size: 13.5px; color: var(--texto-suave); white-space: nowrap; }
.chevron { color: var(--texto-suave); font-size: 14px; transition: transform .2s; flex-shrink: 0; }
.fila-evento[open] .chevron { transform: rotate(180deg); }
.detalle-evento {
    border-top: 1px dashed var(--borde); padding: 14px 18px 18px;
    background: var(--fondo-suave); animation: aparicion .18s ease;
}
.detalle-evento .detalle-linea { font-size: 13.5px; color: var(--texto-suave); margin-bottom: 8px; }
.detalle-evento .descripcion { font-size: 15px; color: var(--texto); line-height: 1.6; }


/* ---- Eventos: portada Facebook + selector de foto ---- */
.rejilla-eventos-fb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tarjeta-evento-fb {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
    overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column;
    transition: transform .2s, border-color .15s;
}
.tarjeta-evento-fb:hover { transform: translateY(-3px); border-color: var(--primario); }
.evento-fb-banner {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--fondo-suave);
    overflow: hidden;
}
.evento-fb-banner img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.evento-fb-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.evento-fb-meta-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.evento-fb-fecha { font-size: 12.5px; color: var(--texto-suave); font-weight: 600; }
.evento-fb-titulo { margin: 0; font-size: 18px; color: var(--titulo); line-height: 1.3; }
.evento-fb-detalle { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.evento-fb-desc { margin: 0; font-size: 14px; color: var(--texto); line-height: 1.45; }
.evento-fb-asistentes { margin-top: 4px; }
.evento-fb-pie {
    margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 10px; border-top: 1px dashed var(--borde);
}
.evento-fb-pie .asistentes-mini { font-size: 13px; color: var(--texto-suave); margin-right: auto; }
.evento-fb-ver { text-decoration: none; }

.btn-guardar-calendario {
    gap: 6px;
    color: var(--primario);
    border: 1px solid rgba(30, 58, 95, .18);
    background: linear-gradient(180deg, #fff 0%, var(--fondo-suave) 100%);
}
.btn-guardar-calendario:hover {
    background: rgba(30, 58, 95, .1);
    border-color: var(--primario);
    color: var(--primario-oscuro);
}
.btn-guardar-calendario .btn-cal-icono { font-size: 14px; line-height: 1; }
.btn-guardar-calendario .btn-cal-texto { font-weight: 700; }
html[data-tema="oscuro"] .btn-guardar-calendario {
    background: rgba(126, 166, 217, .12);
    border-color: rgba(126, 166, 217, .35);
    color: var(--primario);
}
html[data-tema="oscuro"] .btn-guardar-calendario:hover {
    background: rgba(126, 166, 217, .22);
}
@media (max-width: 420px) {
    .btn-guardar-calendario .btn-cal-texto { display: none; }
    .btn-guardar-calendario { padding: 8px 12px; min-width: 40px; }
}

.campo-evento-foto { display: flex; flex-direction: column; gap: 8px; }
.input-evento-foto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.btn-elegir-foto {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 16px; border-radius: 12px; cursor: pointer;
    background: var(--fondo-suave); border: 1.5px dashed var(--borde);
    color: var(--titulo); font-weight: 700; font-size: 15px; text-align: center;
    transition: border-color .15s, background .15s;
}
.btn-elegir-foto:hover, .btn-elegir-foto:focus {
    border-color: var(--primario); background: rgba(30,58,95,.12); outline: none;
}
.evento-foto-preview {
    position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;
    overflow: hidden; border: 1px solid var(--borde); background: #0f141c;
}
.evento-foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evento-foto-quitar {
    position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.65); color: #fff; font-size: 20px; line-height: 1;
    cursor: pointer;
}
.evento-foto-ayuda { font-size: 12px; margin: 0; }
.detalle-evento-banner {
    width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
    margin-bottom: 12px; background: var(--fondo-suave);
}
.detalle-evento-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
    .rejilla-eventos-fb { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .rejilla-eventos-fb { grid-template-columns: 1fr; }
    .btn-elegir-foto { min-height: 52px; font-size: 16px; }
}

/* Modal de nuevo evento */
.modal-evento-caja { max-width: 520px; }
.form-modal-evento { padding: 18px; display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; }
.form-modal-evento label { font-size: 13px; font-weight: 600; color: var(--texto-suave); display: block; margin-bottom: 5px; }
.form-modal-evento input[type="text"],
.form-modal-evento input[type="date"],
.form-modal-evento input[type="time"],
.form-modal-evento select,
.form-modal-evento textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 14.5px; font-family: inherit; background: var(--fondo); color: var(--texto);
}
.form-modal-evento input:focus,
.form-modal-evento select:focus,
.form-modal-evento textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(30,58,95,.12); }
.form-modal-evento .acciones { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 640px) {
    .hora-evento, .lugar-evento { width: calc(50% - 8px); white-space: normal; }
    .titulo-evento { min-width: 100%; order: 3; }
}

/* ============================================================
   AJUSTES MÓVIL (WebView / APP Android)
   ============================================================ */
html, body { overflow-x: clip; }

@media (max-width: 560px) {
    /* Una sola fila: logo izq + iconos der */
    .barra-nav {
        flex-direction: row; align-items: center; justify-content: space-between;
        flex-wrap: nowrap; row-gap: 0; padding: 6px 10px; gap: 8px;
        min-height: 52px;
    }
    .logo { min-width: 0; justify-content: flex-start; flex: 1 1 auto; overflow: hidden; }
    .logo-imagen { height: 40px; width: auto; }
    .logo-letra { height: 18px; width: auto; max-width: 42vw; object-fit: contain; }
    .nav-acciones { width: auto; margin-left: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 3px; flex: 0 0 auto; }
    .nav-acceso { flex-wrap: nowrap; justify-content: flex-end; width: auto; gap: 3px; }
    .nav { flex: 0 0 auto; min-width: 0; display: flex; justify-content: flex-end; }
    .boton-buscar-toggle { display: inline-flex; width: 32px; height: 32px; }
    .form-buscar-panel {
        display: none; position: fixed; top: 56px; right: 10px; left: auto; z-index: 120;
        width: min(320px, calc(100vw - 20px)); max-width: calc(100vw - 20px);
        padding: 10px 12px; gap: 8px; box-sizing: border-box;
        background: #1a2f3a; border: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 10px 28px rgba(0,0,0,.35); border-radius: 14px;
    }
    html[data-tema="oscuro"] .form-buscar-panel { background: #121a22; }
    .form-buscar.abierto .form-buscar-panel { display: flex; align-items: center; }
    .form-buscar.abierto .boton-buscar-toggle { background: rgba(255,255,255,.28); }
    .form-buscar input {
        width: 100%; min-width: 0; flex: 1 1 auto; font-size: 16px;
        color: #fff; background: transparent; border: none; outline: none;
    }
    .form-buscar input::placeholder { color: #d7cfff; opacity: 1; }
    .form-buscar-icono-panel { display: none; }
    .btn-buscar { padding: 8px 14px; flex-shrink: 0; }
    /* Con sesión hay más iconos: achicar un poco el logo texto */
    body.con-sesion .logo-letra { max-width: 34vw; }
    .nav-acceso { max-width: 100%; }
    .campana, .btn-admin-circulo, .boton-mas, .boton-tema { width: 32px; height: 32px; flex-shrink: 0; }
    .usuario-nav-boton { width: 32px; height: 32px; }
    .hero-video { object-position: 68% center; }
    .avatar-nav { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
    .barra-nav { padding: 6px 8px; gap: 6px; }
    .logo-imagen { height: 38px; }
    .logo-letra { height: 17px; max-width: 36vw; }
    body.con-sesion .logo-letra { max-width: 28vw; }
    .form-buscar-panel { top: 54px; right: 8px; width: min(300px, calc(100vw - 16px)); }
    .nav-acciones { gap: 3px; }
    .boton-tema, .boton-mas { width: 32px; height: 32px; }
    .campana { width: 32px; height: 32px; }
    .btn-admin-circulo { width: 32px; height: 32px; }
    .enlace-perfil { min-height: 32px; padding-right: 4px; }
    .usuario-nav-boton { width: 32px; height: 32px; }
    .avatar-nav { width: 30px; height: 30px; font-size: 14px; }
    .btn-acceso { padding: 8px 12px; }

    .compositor-pie { flex-direction: column; align-items: stretch; }
    .compositor-extras { justify-content: space-between; }
    .compositor-extras .extra-enlace { flex: 1 1 100%; }
    .publicacion { padding: 14px; }
    .publicacion-contenido { font-size: 15px; }

    /* Reacciones: barra más compacta en pantallas estrechas (JS evita el corte) */
    .popup-reacciones { padding: 4px 6px; gap: 0; }
    .popup-emoji { font-size: 22px; padding: 4px; }
    .popup-comentario .popup-emoji { font-size: 20px; padding: 3px; }
    .barra-acciones-fb { overflow: visible; }

    .perfil-fb-botones { flex-wrap: wrap; }
    .perfil-fb-botones .btn { width: 100%; text-align: center; }
    .perfil-fb-portada { height: 150px; }
    .perfil-fb-foto { width: 108px; height: 108px; }

    .form-modal-evento .acciones { flex-direction: column-reverse; }
    .form-modal-evento .btn, .form-modal-evento .btn-secundario { width: 100%; text-align: center; }

    /* Panel de notificaciones siempre dentro de la pantalla */
    .campana-panel { right: 0; width: min(360px, calc(100vw - 20px)); }
    .campana-lista { max-height: min(360px, 55vh); }

    /* Lista de notificaciones (página) compacta y sin cortes en el celular */
    .lista-notificaciones { padding: 0; }
    .notificacion { align-items: flex-start; gap: 10px; padding: 12px; }
    .notificacion .avatar { width: 40px; height: 40px; font-size: 15px; margin-top: 2px; }
    .notificacion-texto { font-size: 13.5px; }

    .fila-evento summary { gap: 10px; padding: 12px 14px; }

    input, select, textarea { font-size: 16px !important; }
    button, a.btn { touch-action: manipulation; }
}

@media (max-width: 380px) {
    .logo-letra { height: 15px; max-width: 34vw; }
    .logo-imagen { height: 34px; }
    .galeria-perfil { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 360px) {
    .logo-imagen { height: 32px; }
    .logo-letra { height: 14px; max-width: 30vw; }
    .barra-nav { padding: 5px 6px; }
    .nav-acceso, .nav-acciones { gap: 2px; }
    .boton-tema, .boton-mas, .campana, .btn-admin-circulo, .boton-buscar-toggle { width: 30px; height: 30px; }
    .boton-tema-icono { font-size: 13px; }
    .enlace-perfil { min-height: 30px; }
    .avatar-nav { width: 28px; height: 28px; font-size: 13px; }
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.boton-whatsapp {
    position: fixed; right: 14px; bottom: 14px; z-index: 998;
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: #25d366; color: #fff;
    box-shadow: 0 4px 12px rgba(18, 140, 66, .40);
    transition: transform .2s, box-shadow .2s;
    border: 2px solid #fff;
}
html[data-tema="oscuro"] .boton-whatsapp { border-color: #15242e; }
.boton-whatsapp:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(18, 140, 66, .55); opacity: 1; }
body.overlay-abierto .boton-whatsapp,
body.overlay-abierto .boton-subir,
body:has(.galeria-ligero) .boton-whatsapp,
body:has(.visor-fotos) .boton-whatsapp,
body:has(.galeria-ligero) .boton-subir,
body:has(.visor-fotos) .boton-subir {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.boton-whatsapp svg { width: 24px; height: 24px; display: block; }
@media (max-width: 768px) {
    .boton-whatsapp { width: 42px; height: 42px; right: 12px; bottom: 12px; }
    .boton-whatsapp svg { width: 21px; height: 21px; }
}

/* ============================================================
   CONFIRMACIÓN DE ASISTENCIA A EVENTOS
   ============================================================ */
.asistencia-evento { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.asistentes { font-size: 13.5px; color: var(--texto-suave); font-weight: 600; }
.asistentes-mini { font-size: 12.5px; color: var(--texto-suave); display: block; margin-top: 4px; }
.asistentes-mini-clic {
    background: none; border: none; padding: 0; margin-top: 4px;
    font-family: inherit; cursor: pointer; text-align: left;
}
.asistentes-mini-clic:hover { color: var(--primario); text-decoration: underline; }
.btn-confirmado {
    background: var(--exito); color: #fff;
}
.btn-confirmado:hover { background: #17682a; color: #fff; opacity: 1; }

/* ============================================================
   PÁGINAS ESTÁTICAS EDITABLES (Nosotros, Ubicación, etc.)
   ============================================================ */
.pagina-contenido { font-size: 16.5px; line-height: 1.75; color: var(--texto); }
.pagina-contenido h3 { font-family: "Playfair Display", Georgia, serif; color: var(--titulo); margin: 28px 0 10px; }
.pagina-contenido p { margin: 0 0 16px; }
.pagina-contenido ul { padding-left: 22px; margin: 0 0 16px; }
.pagina-contenido blockquote {
    border-left: 4px solid var(--dorado); padding: 8px 18px; margin: 20px 0;
    background: var(--fondo-suave); border-radius: 8px; font-style: italic;
}
.pagina-titulo-error { font-size: 64px; font-weight: 800; color: var(--primario); margin: 20px 0 0; }

/* ============================================================
   GALERÍA: PORTADA DESTACADA Y ORDEN ADMIN
   ============================================================ */
.item-galeria-destacada { box-shadow: 0 0 0 3px var(--dorado), 0 10px 26px rgba(201,162,39,.35); }
.item-galeria-portada {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: linear-gradient(135deg, var(--dorado), #a8821f);
    color: #16112a; font-size: 13px; font-weight: 800;
    padding: 5px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.4);
}
.item-galeria-admin.destacada { border-color: var(--dorado); box-shadow: 0 0 0 2px var(--dorado); }
.item-galeria-admin-portada {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: linear-gradient(135deg, var(--dorado), #a8821f);
    color: #16112a; font-size: 11.5px; font-weight: 800;
    padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.item-galeria-admin { position: relative; }
.item-galeria-admin-titulo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.item-galeria-admin-titulo .tit { font-weight: 700; }
.item-galeria-admin-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.item-galeria-admin-acciones a {
    font-size: 15px; color: var(--primario); font-weight: 700; text-decoration: none; padding: 2px 4px;
}
.item-galeria-admin-acciones a:hover { opacity: 1; text-decoration: underline; }
.item-galeria-admin-acciones a.peligro { color: var(--peligro); font-size: 13px; }
.item-galeria-admin-acciones a.activo-destacado { color: var(--dorado); }

/* --- Mostrar/ocultar contraseña --- */
.campo-contrasena,
.wrap-seguro { position: relative; }
.campo-contrasena input,
.wrap-seguro input { padding-right: 44px; }
.btn-ojo {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; padding: 5px; cursor: pointer;
    color: #667085; line-height: 0; border-radius: 8px; display: inline-flex;
}
.btn-ojo:hover { color: var(--primario); background: rgba(27, 58, 91, .08); }
.btn-ojo svg { width: 21px; height: 21px; display: block; pointer-events: none; }

/* ============ DESCARGAS ============ */
.grilla-descargas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 10px;
}
.tarjeta-descarga {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-descarga:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(21,42,71,.12);
}
.tarjeta-descarga-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tarjeta-icono {
    font-size: 28px;
    flex-shrink: 0;
}
.tarjeta-descarga h3 {
    font-size: 19px;
    color: var(--titulo);
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
}
.tarjeta-descripcion {
    color: var(--texto-suave-2);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
    flex-grow: 1;
}
.tarjeta-meta {
    margin-bottom: 14px;
}
.tarjeta-meta .fecha {
    font-size: 13px;
    color: var(--texto-suave-2);
}
.tarjeta-meta .tamano {
    font-size: 12px;
    color: var(--texto-suave-2);
    margin-left: 12px;
}
.tarjeta-descarga .btn-bloque {
    width: 100%;
    text-align: center;
}

/* ============================================================
   CHAT (estilo Messenger / WhatsApp)
   ============================================================ */
.chat-badge-nav {
    position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 9px; background: #00a884; color: #fff; font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-enlace-chat { position: relative; display: inline-flex; align-items: center; }
.nav-enlace-chat svg { width: 26px; height: 26px; color: #fff; }
.nav-enlace-chat:hover svg { opacity: .85; }

.chat-app {
    display: flex; gap: 18px;
    background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; min-height: 70vh; max-height: 78vh; height: 70vh;
}
.chat-seccion .contenedor { max-width: 1120px; }

/* ---- Columna izquierda: lista de chats ---- */
.chat-lateral { display: flex; flex-direction: column; background: var(--tarjeta); border-right: 1px solid var(--borde); min-width: 0; width: 330px; flex-shrink: 0; }
.chat-lateral-cabecera {
    display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--borde);
    font-size: 17px; font-weight: 700; color: var(--titulo);
}
.chat-lateral-cabecera .chat-badge-total { margin-left: auto; }
.chat-acciones { margin-left: auto; display: flex; gap: 6px; }
.chat-acciones .btn-pequeno { padding: 7px 12px; font-size: 12.5px; }
.chat-buscador { position: relative; padding: 12px; border-bottom: 1px solid var(--borde); }
.chat-buscador svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-suave); }
.chat-buscador input {
    width: 100%; padding: 10px 12px 10px 40px; border: 1px solid var(--borde); border-radius: 22px;
    background: var(--fondo-suave); font-family: inherit; font-size: 14px; color: var(--texto);
}
.chat-buscador input:focus { outline: none; border-color: var(--primario-claro); }
.chat-lista { flex: 1; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.chat-lista::-webkit-scrollbar { width: 6px; }
.chat-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.chat-lista-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 10px; margin-bottom: 4px; border: none; background: transparent; cursor: pointer;
    border-radius: 12px; font-family: inherit;
}
.chat-lista-item:hover { background: var(--fondo-suave); }
.chat-lista-item.activa { background: var(--fondo-suave); box-shadow: inset 3px 0 0 var(--primario); }
.chat-lista-avatar { width: 48px; height: 48px; font-size: 15px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-lista-cuerpo { flex: 1; min-width: 0; }
.chat-lista-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-lista-nombre { display: block; font-size: 16px; font-weight: 600; color: var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-lista-hora { flex-shrink: 0; font-size: 12px; color: var(--texto-suave); }
.chat-lista-preview { display: block; font-size: 13px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mesinger-app .chat-lista-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 14px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.mesinger-app .chat-lista-item:hover { background: rgba(255,255,255,.04); }
.mesinger-app .chat-panel-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8696a0;
    text-align: center;
    padding: 24px;
}
.mesinger-app .chat-vacio-icono { font-size: 48px; margin-bottom: 10px; opacity: .85; }
.chat-lista-vacia { padding: 32px 16px; text-align: center; color: var(--texto-suave); font-size: 14px; line-height: 1.6; }
.chat-badge {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #00a884; color: #fff;
    font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.con-nuevas .chat-lista-nombre { font-weight: 700; }

/* ---- Panel derecho: conversación ---- */
.chat-panel { display: flex; flex-direction: column; min-width: 0; background: var(--fondo); height: 100%; overflow: hidden; flex: 1; }
.chat-activo { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.chat-composer { flex-shrink: 0; }
.chat-panel-vacio {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: var(--texto-suave); text-align: center; padding: 24px;
}
.chat-vacio-icono { font-size: 56px; }
.chat-activo { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.chat-cabecera {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--borde); background: var(--tarjeta);
}
.chat-volver {
    display: none; border: none; background: var(--fondo-suave); width: 38px; height: 38px; border-radius: 50%;
    font-size: 18px; cursor: pointer; color: var(--primario); line-height: 1;
}
.chat-cab-avatar { width: 44px; height: 44px; font-size: 17px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-cabecera-avatar { display: inline-flex; flex-shrink: 0; }
.chat-cabecera-info { display: flex; flex-direction: column; min-width: 0; }
.chat-cabecera-info strong { font-size: 16px; color: var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cabecera-info small { font-size: 12.5px; color: var(--texto-suave); }

.chat-mensajes {
    flex: 1 1 auto; overflow-y: scroll; padding: 18px 16px; background: var(--fondo);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0; max-height: calc(100vh - 320px);
}
.chat-mensajes .chat-msg { position: relative; display: flex; padding-bottom: 18px; }
.chat-msg { display: flex; }
.chat-msg.mj-propia { justify-content: flex-end; }
.chat-msg.mj-otra { justify-content: flex-start; }
.chat-burbuja {
    max-width: 72%; padding: 9px 13px 6px; border-radius: 16px; font-size: 15px; line-height: 1.45; position: relative;
    word-wrap: break-word; overflow-wrap: break-word;
}
.chat-msg.mj-propia .chat-burbuja { background: #d9fdd3; color: #0b3d2e; border-bottom-right-radius: 4px; }
.chat-msg.mj-otra .chat-burbuja { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
html[data-tema="oscuro"] .chat-msg.mj-propia .chat-burbuja { background: #0f5132; color: #d3f4df; }
.chat-burbuja-texto { margin: 0 0 2px; }
.chat-sep-dia { display: flex; justify-content: center; margin: 10px 0 8px; }
.chat-sep-dia span {
    background: rgba(255,255,255,.08); color: #aebac1; font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px;
}
.chat-hora { display: block; font-size: 11px; color: var(--texto-suave); text-align: right; margin-top: 2px; }
/* Palomitas de estado estilo WhatsApp */
.chat-tildes { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 5px; width: 16px; height: 13px; flex-shrink: 0; line-height: 0; }
.chat-tildes .tildes-tick { width: 15px; height: 15px; display: block; }
.chat-tildes.no-leido { color: #9aa4b2; }
.chat-tildes.leido { color: #53bdeb; }
.chat-msg.mj-propia .chat-burbuja .chat-hora { color: rgba(255,255,255,.85); }
.chat-msg-media { display: block; max-width: 280px; border-radius: 14px; overflow: hidden; margin-bottom: 4px; }
.chat-msg-media img { width: 100%; border-radius: 14px; }
.chat-msg-audio { width: min(260px, 100%); height: 40px; display: block; }
/* Cabecera "Messenger" del chat */
.mesier-titulo { padding: 18px 0 !important; }
.mesier-titulo-inner { display: flex; align-items: center; justify-content: center; gap: 12px; }
.mesier-titulo-logo { width: 58px; height: 58px; object-fit: contain; }
.mesier-titulo-nombre { width: 210px; height: auto; object-fit: contain; display: block; }
@media (max-width: 480px) {
    .mesier-titulo { padding: 14px 0 !important; }
    .mesier-titulo-logo { width: 46px; height: 46px; }
    .mesier-titulo-nombre { width: 160px; }
}
/* Nota de voz estilo WhatsApp (play/pause + counters + slider + velocidad) */
.chat-msg-voz { display: flex; align-items: center; gap: 8px; min-width: 230px; max-width: 100%; padding: 4px 2px; }
.voz-play {
    width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%;
    background: var(--primario); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.voz-play svg { width: 18px; height: 18px; display: block; }
.chat-msg.mj-otra .voz-play { background: var(--primario-claro); }
.voz-play.reproduciendo { /* icono pausa vía JS; sin spin */ }
.voz-progreso { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.voz-actual { font-size: 11px; color: #cfd8ea; font-weight: 600; width: 32px; text-align: left; flex-shrink: 0; }
.chat-msg.mj-propia .voz-actual { color: #fff; }
.voz-duracion { font-size: 11px; color: #cfd8ea; font-weight: 600; width: 32px; text-align: right; flex-shrink: 0; }
.chat-msg.mj-propia .voz-duracion { color: #fff; }
.voz-slider {
    -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.25); outline: none; cursor: pointer; margin: 0;
}
.chat-msg.mj-otra .voz-slider { background: rgba(0,0,0,.18); }
.voz-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer;
}
.voz-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; border: none; }
.voz-vel {
    flex-shrink: 0; border: none; border-radius: 10px; padding: 4px 7px; min-width: 36px;
    font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
    background: rgba(255,255,255,.18); color: #fff;
}
.chat-msg.mj-otra .voz-vel { background: rgba(0,0,0,.12); color: var(--texto); }
.voz-vel:active { opacity: .85; }

/* Barra de grabación de nota de voz */
.chat-grabacion {
    display: none; align-items: center; gap: 10px; padding: 10px 12px;
    border-top: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
}
.chat-grabacion.activa, .chat-grabacion:not([hidden]) { display: flex; }
.chat-grabacion[hidden] { display: none !important; }
.chat-grabacion-pulso {
    width: 12px; height: 12px; border-radius: 50%; background: #e53935; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(229,57,53,.55);
    animation: chatGrabPulso 1.2s ease-out infinite;
}
@keyframes chatGrabPulso {
    0% { box-shadow: 0 0 0 0 rgba(229,57,53,.55); }
    70% { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}
.chat-grabacion-tiempo {
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 42px; color: var(--texto);
}
.chat-grabacion-cancelar, .chat-grabacion-enviar {
    border: none; border-radius: 18px; padding: 8px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
}
.chat-grabacion-cancelar { margin-left: auto; background: rgba(255,255,255,.08); color: var(--texto); }
.chat-grabacion-enviar { background: #00a884; color: #fff; }
.chat-grabacion-cancelar:active, .chat-grabacion-enviar:active { opacity: .85; }
@media (max-width: 420px) {
    .chat-msg-voz { min-width: 0; gap: 6px; }
    .voz-vel { min-width: 32px; padding: 4px 5px; }
    .chat-grabacion { gap: 8px; padding: 8px 10px; }
    .chat-grabacion-cancelar, .chat-grabacion-enviar { padding: 7px 11px; font-size: 12px; }
}

/* Reacciones a mensajes + cita + typing (estilo WhatsApp) */
.chat-msg { position: relative; }
/* Reacciones: se pegan a la esquina inferior de la burbuja (estilo WhatsApp) */
.chat-reacciones {
    position: absolute; bottom: -14px; display: flex; gap: 3px; z-index: 2;
    margin: 0; padding: 0;
}
.chat-msg.mj-propia .chat-reacciones { right: 4px; }
.chat-msg.mj-otra  .chat-reacciones { left: 4px; }
.chat-reaccion {
    background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 12px;
    padding: 2px 8px; font-size: 13px; cursor: pointer; line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); display: inline-flex; align-items: center; gap: 3px;
    transition: transform .12s;
}
.chat-reaccion:hover { transform: scale(1.1); }
.chat-reaccion.propias { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.45); }
.chat-msg.mj-otra .chat-reaccion { background: #fff; }
.chat-reaccionar-dots {
    position: relative; z-index: 3; align-self: center; flex-shrink: 0;
    width: 20px; height: 20px; display: none; align-items: center; justify-content: center;
    margin-left: 6px; /* pegado a la derecha de la burbuja (mensaje recibido, quedo a la izquierda) */
    background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 50%;
    font-size: 13px; line-height: 1; color: var(--texto-suave); cursor: pointer;
    transition: background .12s;
}
.chat-reaccionar-dots:hover { background: var(--primario-claro); }
.chat-msg.mj-propia .chat-reaccionar-dots { order: -1; margin-left: 0; margin-right: 6px; }
.chat-msg:hover .chat-reaccionar-dots { display: inline-flex; }
/* Menú de acciones del mensaje (estilo WhatsApp): reacciones arriba + acciones abajo */
.chat-menu-mensaje {
    position: fixed; z-index: 3000; width: 250px;
    background: #2a3345; border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.45); color: #fff;
}
.chat-menu-reacciones {
    display: flex; justify-content: space-around; gap: 2px; padding: 10px; background: #2a3345;
}
.chat-menu-emoji { border: none; background: transparent; font-size: 24px; cursor: pointer; padding: 4px 6px; border-radius: 50%; color: #fff; transition: transform .12s, background .12s; }
.chat-menu-emoji:hover { background: #3a4557; transform: scale(1.2); }
.chat-menu-acciones { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.12); }
.chat-menu-accion {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
    font-size: 14.5px; color: #fff; border: none; background: transparent; text-align: left; font-family: inherit;
}
.chat-menu-accion:hover { background: #3a4557; }
.chat-menu-accion .ico { width: 20px; text-align: center; }

/* ── Selección de mensaje: barra contextual superior + reacciones rápidas ── */
.chat-activo { position: relative; }
.chat-msg.seleccionado .chat-burbuja {
    box-shadow: 0 0 0 2px var(--primario); outline-offset: 2px;
}
.chat-msg.seleccionado.mj-propia .chat-burbuja { box-shadow: 0 0 0 2px #00a884; }
.chat-msg.seleccionado.mj-otra .chat-burbuja { box-shadow: 0 0 0 2px var(--primario-claro); }
.chat-contextual {
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; gap: 4px; padding: 8px 12px;
    background: var(--tarjeta); border-bottom: 1px solid var(--borde);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.chat-contextual.oculto { display: none; }
.ctx-cerrar {
    border: none; background: var(--fondo-suave); width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; color: var(--primario); font-size: 16px; line-height: 1; flex-shrink: 0;
}
.ctx-badge {
    font-size: 13px; font-weight: 700; color: var(--titulo); margin-right: auto; white-space: nowrap;
}
.ctx-accion {
    border: none; background: var(--fondo-suave); width: 38px; height: 38px; border-radius: 50%;
    cursor: pointer; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background .12s, transform .12s;
}
.ctx-accion:hover { background: var(--primario-claro); transform: scale(1.08); }
.ctx-accion[data-accion="eliminar"]:hover { background: rgba(220,53,69,.15); }
.chat-picker-reacciones {
    position: fixed; z-index: 3001; display: flex; gap: 2px; padding: 6px 8px;
    background: #2a3345; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.chat-picker-emoji {
    border: none; background: transparent; font-size: 22px; line-height: 1; padding: 6px 7px;
    border-radius: 50%; cursor: pointer; transition: transform .12s, background .12s;
}
.chat-picker-emoji:hover { transform: scale(1.25); background: #3a4557; }

/* Cita (responder) */
.chat-cita-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 16px; background: var(--fondo-suave); border-top: 1px solid var(--borde);
    border-left: 4px solid var(--primario); font-size: 13px;
}
.chat-cita-bar > div { min-width: 0; }
.chat-cita-bar .cita-autor { font-weight: 700; color: var(--titulo); margin-right: 6px; }
.chat-cita-bar .cita-texto { color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-cerrar { border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--texto-suave); padding: 4px; }
.chat-cita {
    border-left: 3px solid var(--dorado); padding: 4px 8px; margin-bottom: 5px; border-radius: 4px;
    background: rgba(0,0,0,.06); display: flex; flex-direction: column; font-size: 12.5px;
}
.chat-msg.mj-propia .chat-cita { background: rgba(255,255,255,.12); border-left-color: #fff; }
.chat-cita .cita-autor { font-weight: 700; color: var(--primario); }
.chat-msg.mj-propia .chat-cita .cita-autor { color: #fff; }
.chat-cita .cita-texto { color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Typing */
.chat-typing { padding: 4px 16px; font-size: 12px; color: var(--primario); font-style: italic; height: 20px; }
/* Foto del grupo (modal) */
.chat-grupo-foto { margin-bottom: 10px; }
.chat-grupo-foto-label { display: inline-block; cursor: pointer; font-size: 13px; color: var(--texto-suave); padding: 7px 12px; border: 1px dashed var(--borde); border-radius: 10px; }
/* Gestión de grupo */
.chat-gestion-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--borde); }
.m-manage-nombre { font-size: 14px; color: var(--titulo); }
.m-manage-acciones { display: flex; gap: 6px; }
.m-boton { border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
.m-btn-admin { background: rgba(27,58,91,.1); color: var(--primario); }
.m-btn-quitar { background: rgba(220,53,69,.1); color: var(--peligro); }
.m-admin-chip { background: rgba(201,162,39,.15); color: var(--dorado); padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.chat-gestion-selector { border-bottom: 1px solid var(--borde); padding: 6px 0; max-height: 190px; overflow-y: auto; }

/* ---- Composer ---- */
.chat-composer {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--borde); background: var(--tarjeta);
}
.chat-emoji-panel {
    flex: 1 0 100%;
    max-height: 168px;
    overflow-y: auto;
    background: #1f2c33;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 8px 6px;
    scrollbar-width: thin;
}
html:not([data-tema="oscuro"]) .chat-emoji-panel { background: #f0f2f5; border-color: var(--borde); }
.chat-emoji-fila { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
.chat-emoji-item {
    border: 0; background: transparent; width: 36px; height: 36px; font-size: 22px;
    line-height: 1; cursor: pointer; border-radius: 8px;
}
.chat-emoji-item:hover { background: rgba(255,255,255,.08); }
.chat-composer-extras { display: flex; align-items: center; gap: 4px; }
.chat-composer textarea {
    flex: 1; resize: none; min-height: 44px; max-height: 160px; padding: 11px 16px; border: 1px solid var(--borde);
    border-radius: 22px; background: var(--fondo-suave); font-family: inherit; font-size: 15px; color: var(--texto);
}
.chat-composer textarea:focus { outline: none; border-color: var(--primario-claro); }
.chat-extra-btn {
    border: none; background: transparent; width: 40px; height: 40px; border-radius: 50%; font-size: 19px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-extra-btn:hover { background: var(--fondo-suave); }
.chat-extra-btn.grabando { background: var(--peligro); color: #fff; animation: chatPulso 1s infinite; }
@keyframes chatPulso { 50% { transform: scale(1.1); } }
.chat-enviar {
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: #00a884; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .2s;
}
.chat-enviar svg { width: 20px; height: 20px; }
.chat-enviar:hover { opacity: .9; }
.chat-enviar:disabled, .chat-enviar.enviando { opacity: .5; cursor: default; }

/* ---- Modales ---- */
.chat-modal {
    position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; padding: 20px;
}
.chat-modal.abierto { display: flex; }
.chat-modal-caja {
    width: min(520px, 100%); max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--tarjeta); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.chat-modal-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.chat-modal-cabecera h3 { font-family: "Inter", system-ui, sans-serif; font-size: 17px; color: var(--titulo); }
.chat-modal-cerrar { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.chat-modal-buscador { padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.chat-modal-buscador input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px;
    background: var(--fondo-suave); font-family: inherit; font-size: 14px; color: var(--texto);
}
.chat-modal-buscador input:focus { outline: none; border-color: var(--primario-claro); }
.chat-modal-lista { overflow-y: auto; padding: 12px; }
.chat-usuario-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px;
    border: none; background: transparent; cursor: pointer; border-radius: 12px; font-family: inherit; margin-bottom: 2px;
}
.chat-usuario-item:hover { background: var(--fondo-suave); }
.chat-grupo-item { cursor: pointer; justify-content: flex-start; }
.chat-grupo-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #00a884; }
.chat-modal-pie { padding: 14px 18px; border-top: 1px solid var(--borde); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .chat-app { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .chat-lista { max-height: 46vh; }
    .chat-volver { display: inline-flex; }
    .chat-app.chat-abierto .chat-lateral { display: none; }
    .chat-panel { display: none; min-height: 60vh; }
    .chat-app.chat-abierto .chat-panel { display: flex; }
    .chat-app:not(.chat-abierto) .chat-panel-vacio { display: none; }
}

/* ════════════════════════════════════════════════════════════
   BANNER INTELIGENTE DE INSTALACIÓN DE LA APP (solo móvil)
   ════════════════════════════════════════════════════════════ */
.banner-app-instalar {
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 16px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(21,42,71,.18);
    border-bottom: 1px solid var(--borde);
    transform: translateY(-110%);
    transition: transform .35s ease;
    padding-top: max(10px, env(safe-area-inset-top));
}
.banner-app-instalar.visible { transform: translateY(0); }
.banner-app-icono {
    width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.banner-app-texto { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.banner-app-texto strong { display: block; font-size: 14px; color: var(--titulo); }
.banner-app-texto span { font-size: 12px; color: var(--texto-suave-2); }
.banner-app-btn {
    flex-shrink: 0;
    background: #f5b400; border-color: #f5b400; color: #1b3a5b; font-weight: 700;
    font-size: 13px; padding: 9px 14px;
}
.banner-app-btn:hover { background: #ffc82e; border-color: #ffc82e; }
.banner-app-cerrar {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    right: 4px;
    z-index: 2;
    background: transparent; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: #8b93a1; padding: 10px;
    display: flex; align-items: center; justify-content: center;
    min-width: 38px; min-height: 38px;
}
.banner-app-cerrar:hover { color: #5b6776; }

@media (min-width: 769px) {
    .banner-app-instalar { display: none !important; }
}


/* ============================================================
   BOTÓN ENVIAR MENSAJE (Mesinger)
   ============================================================ */
.btn-mesinger,
a.btn-mesinger,
a.minist-contacto.btn-mesinger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    background: #1e3a5f;
    color: #ffffff !important;
    border: 1px solid #1e3a5f;
}
.btn-mesinger span,
a.btn-mesinger span {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
}
.icono-mesinger {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    border-radius: 4px;
    filter: none;
}
a.minist-contacto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.minist-modal-lider-accion {
    display: block;
    margin-top: 6px;
}
.minist-modal-lider-datos .minist-modal-lider-accion a.btn-mesinger {
    color: #ffffff !important;
    background: #1e3a5f;
}
html[data-tema="oscuro"] .btn-mesinger,
html[data-tema="oscuro"] a.btn-mesinger,
html[data-tema="oscuro"] .minist-modal-lider-datos .minist-modal-lider-accion a.btn-mesinger {
    background: #e0b64a;
    border-color: #e0b64a;
    color: #1a1508 !important;
}
html[data-tema="oscuro"] .btn-mesinger span,
html[data-tema="oscuro"] a.btn-mesinger span {
    color: #1a1508 !important;
}


/* ============================================================
   MESINGER APP (vista solo-chat / Capacitor)
   ============================================================ */
.mesinger-app {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0b141a;
    color: #e9edef;
}
.mesinger-app .boton-whatsapp,
.mesinger-app .whatsapp-flotante,
.mesinger-app .banner-app-instalar {
    display: none !important;
}
.mesinger-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    background: #202c33;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.mesinger-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #e9edef;
    font-weight: 700;
}
.mesinger-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}
.mesinger-titulo { font-size: 18px; letter-spacing: .2px; }
.mesinger-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.mesinger-avatar-link { display: inline-flex; text-decoration: none; }
.mesinger-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
}
.mesinger-logout {
    color: #aebac1;
    text-decoration: none;
    font-size: 13px;
    padding: 6px 8px;
}
.mesinger-logout:hover { color: #fff; }
.mesinger-main {
    height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
    padding: 0;
    overflow: hidden;
}
.mesinger-app .chat-app {
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: #111b21;
}
.mesinger-app .chat-lateral,
.mesinger-app .chat-panel {
    height: 100%;
    min-height: 0;
}
.mesinger-app .chat-seccion,
.mesinger-app .contenedor {
    max-width: none;
    padding: 0;
    margin: 0;
}
.mesinger-app .chat-modal {
    z-index: 40;
}
@media (max-width: 768px) {
    .mesinger-app .chat-app.chat-abierto .chat-lateral { display: none; }
    .mesinger-app .chat-panel { display: none; min-height: 0; height: 100%; }
    .mesinger-app .chat-app.chat-abierto .chat-panel { display: flex; }
}


/* Chooser calendario (móvil) */
.cal-chooser-overlay {
    position: fixed; inset: 0; z-index: 12000;
    background: rgba(8, 12, 20, .55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.cal-chooser-caja {
    width: min(420px, 100%);
    background: var(--tarjeta, #fff);
    border-radius: 16px;
    padding: 18px 16px 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    display: flex; flex-direction: column; gap: 10px;
}
.cal-chooser-tit {
    margin: 0 0 4px; text-align: center; font-weight: 700;
    color: var(--titulo, #152a47); font-size: 1.05rem;
}
.cal-chooser-caja .btn-bloque { width: 100%; text-align: center; }

@media (hover: none), (pointer: coarse) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        overscroll-behavior-x: none;
    }
    .galeria-ligero-caja {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Páginas públicas: mismo ancho útil en Android / WebView */
@media (max-width: 920px), (pointer: coarse) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    .pagina-titulo .contenedor,
    .seccion > .contenedor {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .campo-doble,
    .panel-dos-col {
        grid-template-columns: 1fr !important;
    }
}