/* ==========================================================================
   DIKELA DESIGN SYSTEM - TOKENS DE IDENTIDAD (FASE 2)
   Metáfora: "El amanecer y la luz que acompaña el día"
   ========================================================================== */

:root {
  /* 1. Superficies y Estructura */
  --dk-bg: #FAF7F1;
  --dk-surface: #FFFFFF;
  --dk-text-primary: #2B2620;
  --dk-text-secondary: #524A3E;
  --dk-text-muted: #6B6255;
  --dk-border: #E8E0D3;
  --dk-border-subtle: rgba(232, 224, 211, 0.6);

  /* 2. Colores por Tipo de Contenido (Fondo Suave + Acento Fuerte) */
  --dk-peticion-bg: #F5E6D3;
  --dk-peticion-accent: #C97A3D;
  --dk-peticion-border: #EAD0B3;

  --dk-promesa-bg: #E3EDF3;
  --dk-promesa-accent: #5B7C99;
  --dk-promesa-border: #C8DCE8;

  --dk-testimonio-bg: #E8EFDF;
  --dk-testimonio-accent: #6B8F5C;
  --dk-testimonio-border: #CFDEC0;

  --dk-comunidad-bg: #F3E1DB;
  --dk-comunidad-accent: #B5654F;
  --dk-comunidad-border: #E6C5BA;

  /* 3. Tipografía */
  --dk-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --dk-font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* 4. Geometría y Elevación */
  --dk-radius-sm: 8px;
  --dk-radius-md: 14px;
  --dk-radius-lg: 20px;
  --dk-radius-pill: 999px;

  --dk-shadow-sm: 0 2px 6px rgba(43, 38, 32, 0.04);
  --dk-shadow-md: 0 6px 18px rgba(43, 38, 32, 0.06), 0 1px 3px rgba(43, 38, 32, 0.04);
  --dk-shadow-lg: 0 14px 36px rgba(43, 38, 32, 0.08), 0 2px 6px rgba(43, 38, 32, 0.04);

  /* 5. Escala de Espaciados Consistentes */
  --dk-space-xs: 4px;
  --dk-space-sm: 8px;
  --dk-space-md: 16px;
  --dk-space-lg: 24px;
  --dk-space-xl: 32px;
  --dk-space-2xl: 48px;

  /* 6. Escala Jerárquica de Z-Index */
  --dk-z-dropdown: 1000;
  --dk-z-sticky: 1020;
  --dk-z-fixed: 1030;
  --dk-z-chat-orb: 1040;
  --dk-z-modal-backdrop: 1050;
  --dk-z-chat-panel: 1055;
  --dk-z-modal: 1060;
  --dk-z-popover: 1070;
  --dk-z-tooltip: 1080;

  /* Backward Compatibility Sngine / Legacy Variables */
  --primary-color: var(--dk-peticion-accent);
  --accent-color: #C97A3D;
}

/* Modo Oscuro - "Noche en el Santuario" */
body.night-mode,
[data-bs-theme="dark"] {
  --dk-bg: #12161E;
  --dk-surface: #1A202C;
  --dk-text-primary: #F7FAFC;
  --dk-text-secondary: #CBD5E0;
  --dk-text-muted: #718096;
  --dk-border: #2D3748;
  --dk-border-subtle: rgba(255, 255, 255, 0.08);

  --dk-peticion-bg: #2A2118;
  --dk-peticion-accent: #E09355;
  --dk-peticion-border: rgba(224, 147, 85, 0.3);

  --dk-promesa-bg: #19242E;
  --dk-promesa-accent: #7899B8;
  --dk-promesa-border: rgba(120, 153, 184, 0.3);

  --dk-testimonio-bg: #1B2618;
  --dk-testimonio-accent: #87AB77;
  --dk-testimonio-border: rgba(135, 171, 119, 0.3);

  --dk-comunidad-bg: #2B1D1A;
  --dk-comunidad-accent: #CF7E68;
  --dk-comunidad-border: rgba(207, 126, 104, 0.3);

  --dk-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --dk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --dk-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* 1. Fondo luminoso del Amanecer */
body:not(.night-mode),
body {
  background-color: #fbf9f5 !important;
  background-image: none !important;
  color: var(--dk-text-primary) !important;
  font-family: var(--dk-font-sans) !important;
}

body.night-mode {
  background-color: var(--dk-bg) !important;
  background-image: 
    radial-gradient(at 20% 10%, rgba(224, 147, 85, 0.08) 0px, transparent 40%),
    radial-gradient(at 80% 20%, rgba(120, 153, 184, 0.08) 0px, transparent 40%) !important;
  background-attachment: fixed !important;
  color: var(--dk-text-primary) !important;
}

/* 2. Header Flotante Minimalista */
body:not(.night-mode) .main-header,
body:not(.night-mode) header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  box-shadow: var(--dk-shadow-sm) !important;
}

body.night-mode .main-header,
body.night-mode header {
  background: rgba(26, 32, 44, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  box-shadow: var(--dk-shadow-sm) !important;
}

body.night-mode .main-header,
body.night-mode header {
    border-bottom: 2.5px solid transparent !important;
    border-image: linear-gradient(90deg, #e15637 0%, #f59e0b 50%, #0284c7 100%) 1 !important;
}

body:not(.night-mode) .main-header .search-wrapper .form-control {
    background: rgba(241, 245, 249, 0.95) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    color: #0f172a !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
}

body:not(.night-mode) .main-header .search-wrapper .form-control:focus {
    background: #ffffff !important;
    border-color: var(--dikela-sky) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2) !important;
}

body:not(.night-mode) .main-header .header-icon,
body:not(.night-mode) .main-header a:not(.btn),
body:not(.night-mode) .main-header .nav-link {
    color: #334155 !important;
    fill: #334155 !important;
}

body:not(.night-mode) .main-header .header-icon:hover,
body:not(.night-mode) .main-header a:not(.btn):hover {
    color: var(--dikela-sky) !important;
    fill: var(--dikela-sky) !important;
}

/* 3. Tarjetas, Paneles y Módulos de Cristal Claro */
body:not(.night-mode) .post,
body:not(.night-mode) .card,
body:not(.night-mode) .panel,
body:not(.night-mode) .module,
body:not(.night-mode) .box,
body:not(.night-mode) .panel-default,
body:not(.night-mode) .publisher-box,
body:not(.night-mode) .main-side-nav-card,
body:not(.night-mode) .alert:not(.alert-danger):not(.alert-success) {
    background: var(--dikela-card) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--dikela-border) !important;
    border-radius: var(--dikela-radius) !important;
    box-shadow: var(--dikela-shadow) !important;
    color: var(--dikela-text-main) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.night-mode) .post:hover {
    box-shadow: var(--dikela-shadow-hover) !important;
}

body:not(.night-mode) .post-title,
body:not(.night-mode) .post h1,
body:not(.night-mode) .post h2,
body:not(.night-mode) .post h3,
body:not(.night-mode) .card-header,
body:not(.night-mode) .panel-heading {
    color: var(--dikela-text-main) !important;
    font-weight: 700 !important;
}

body:not(.night-mode) .post .post-text {
    color: #1e293b !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}

/* 4. Menú lateral con estilo juvenil e interactivo */
body:not(.night-mode) .main-side-nav:not(.dikela-sidebar-v2) li a {
    color: #334155 !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

body:not(.night-mode) .main-side-nav:not(.dikela-sidebar-v2) li a:hover {
    background: rgba(0, 180, 216, 0.08) !important;
    color: var(--dikela-sky-dark) !important;
    transform: translateX(4px) !important;
}

body:not(.night-mode) .main-side-nav:not(.dikela-sidebar-v2) li a i,
body:not(.night-mode) .main-side-nav:not(.dikela-sidebar-v2) li i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    line-height: 38px !important;
    background: linear-gradient(135deg, rgba(225, 86, 55, 0.10), rgba(245, 158, 11, 0.12)) !important;
    color: var(--dikela-coral) !important;
    border: 1px solid rgba(225, 86, 55, 0.22) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(225, 86, 55, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.night-mode) .main-side-nav:not(.dikela-sidebar-v2) li a:hover i {
    background: linear-gradient(135deg, #e15637, #f59e0b) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(225, 86, 55, 0.35) !important;
    transform: scale(1.08) !important;
}

/* 5. Botones y Llamados a la Acción: Fuego Coral & Oro de Gloria */
body:not(.night-mode) .btn-primary,
.btn-primary {
    background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(225, 86, 55, 0.32) !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.night-mode) .btn-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #c2410c 0%, #fbbf24 100%) !important;
    box-shadow: 0 6px 20px rgba(225, 86, 55, 0.45) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* 6. Caja de Publicación */
body:not(.night-mode) .publisher {
    background: var(--dikela-card) !important;
    border: 1px solid var(--dikela-border) !important;
    border-radius: var(--dikela-radius) !important;
}

body:not(.night-mode) .publisher textarea {
    color: #0f172a !important;
    background: transparent !important;
    font-size: 15px !important;
}

body:not(.night-mode) .publisher textarea::placeholder {
    color: #94a3b8 !important;
}

body:not(.night-mode) .publisher-meta {
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* 7. Badges y Enlaces */
body:not(.night-mode) .badge-primary {
    background: linear-gradient(135deg, var(--dikela-sky), var(--dikela-sky-dark)) !important;
    color: #fff !important;
}

body:not(.night-mode) .badge-warning {
    background: linear-gradient(135deg, var(--dikela-gold), #d97706) !important;
    color: #fff !important;
}

body:not(.night-mode) a {
    color: var(--dikela-sky-dark);
}

body:not(.night-mode) a:hover {
    color: #023e8a;
}


/* KETHANE ULTRA-PREMIUM STRICT GLASSMORPHISM
   Phase: Zero Night-mode Refinement v3 (Cache Bursting)
   Expert Overhaul for SNGINE / Astra
   Fecha: 2026-03-08 */

/* --- 0. DESIGN SYSTEM & ACCESSIBILITY TOKENS (WCAG AA/AAA) --- */
:root {
    --k-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --k-font-heading: 'Outfit', 'Inter', -apple-system, sans-serif;
    --k-text-primary: #0f172a;
    --k-text-secondary: #334155;
    --k-text-muted: #64748b; /* Slate 500 para modo claro por defecto */
    --k-card-radius: 20px;   /* Radio armonizado en todo el feed y módulos */
    --k-input-bg: #ffffff;
    --k-input-border: #cbd5e1;
    --k-input-border-focus: #00b4d8;
}

body.night-mode {
    --k-text-primary: #f8fafc;
    --k-text-secondary: #cbd5e1;
    --k-text-muted: #94a3b8; /* Slate 400 sobre fondo OLED */
    --k-input-bg: rgba(255, 255, 255, 0.06);
    --k-input-border: rgba(255, 255, 255, 0.16);
    --k-input-border-focus: #00f2ea;
}

/* --- 1. RESET Y FONDO OLED --- */
body.night-mode {
    background-color: #05070a !important;
    background-image: none !important;
    color: #e4e6eb !important;
    font-family: var(--k-font-body) !important;
}

h1, h2, h3, h4, .kethane-hero-title, .kethane-youth-title {
    font-family: var(--k-font-heading) !important;
}

/* --- 2. FORZAR EL CRISTAL (GLASSMORPHISM) --- */
html.night-mode body.night-mode .post,
html.night-mode body.night-mode .card,
html.night-mode body.night-mode .panel,
html.night-mode body.night-mode .module,
html.night-mode body.night-mode .box,
html.night-mode body.night-mode .panel-default,
body.night-mode .post, body.night-mode .card, body.night-mode .panel, body.night-mode .module, body.night-mode .box, body.night-mode .panel-default,
.glass-post-container,
.main-side-nav-card,
.alert {
    background: rgba(22, 27, 34, 0.7) !important;
    backdrop-filter: blur(25px) saturate(250%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(250%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--k-card-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 25px !important;
  position: relative !important;
    overflow: hidden !important;
}

/* 2.1 EL SECRETO DEL CRISTAL (TRANSPARENCIA INTERNA) */
body.night-mode .panel-body,
body.night-mode .panel-heading,
body.night-mode .panel-footer,
body.night-mode .card-body,
body.night-mode .card-header,
body.night-mode .card-footer,
body.night-mode .publisher-box,
body.night-mode .publisher-meta,
.panel-body,
.panel-heading,
.panel-footer,
.card-body,
.card-header,
.card-footer,
.publisher-box,
.publisher-meta {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* --- 3. SIDEBAR PREMIUM --- */
.main-sidebar,
.left-sidebar,
.main-side-nav {
    background: transparent !important;
    border: none !important;
}

/* FORZAR LOS CONTENEDORES DE ICONOS DEL MENÚ LATERAL A SER CIRCULARES */
body.night-mode .left-sidebar .nav-menu li a i,
.icon-container,
.main-side-nav:not(.dikela-sidebar-v2) li i {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    line-height: 42px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-right: 15px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
}

/* EVITAR QUE EL SVG HEREDE PROPIEDADES DE CONTENEDOR Y ASEGURAR TAMAÑO PERFECTO */
.main-side-nav:not(.dikela-sidebar-v2) li svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    line-height: normal !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

.main-side-nav:not(.dikela-sidebar-v2) .icon-container .svg-container {
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

body.night-mode .left-sidebar .nav-menu li a:hover i,
.main-side-nav:not(.dikela-sidebar-v2) li.active .icon-container,
.main-side-nav:not(.dikela-sidebar-v2) li a:hover .icon-container,
.main-side-nav:not(.dikela-sidebar-v2) li.active i,
.main-side-nav:not(.dikela-sidebar-v2) li a:hover i {
    background-color: #00f2ea !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.6) !important;
    border-color: transparent !important;
}

.main-side-nav:not(.dikela-sidebar-v2) li.active .icon-container svg path,
.main-side-nav:not(.dikela-sidebar-v2) li a:hover .icon-container svg path {
    fill: #050c18 !important;
}

.left-sidebar .nav-menu li a,
.main-side-nav li a {
    border-radius: 20px !important;
    color: #b0b3b8 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* --- 4. HEADER Y COMMAND CENTER --- */
.main-header {
    background: rgba(5, 7, 10, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.search-input {
    width: 100% !important;
    max-width: 400px !important;
    height: 45px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 0 25px 0 55px !important;
}

/* Fluid Sidebar Navigation & Badges for Tablets and Desktops */
.main-side-nav li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.main-side-nav li a .nav-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.main-side-nav li a .badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .main-side-nav li a {
        padding: 7px 8px !important;
        font-size: 0.82rem !important;
        gap: 6px !important;
    }
    .main-side-nav li a .icon-container {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
    .main-side-nav li a .badge {
        font-size: 0.58rem !important;
        padding: 2px 5px !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 767px) {
    .search-input {
        width: 100% !important;
    }
    .glass-post-container,
    .post.glass-post-container {
        padding: 0 !important;
        border-radius: 20px !important;
    }
    .post-media,
    .post-img,
    .post-video {
        border-radius: 20px 20px 0 0 !important;
    }
}

/* --- 5. MEDIA ENGINE --- */
.post-media,
.post-img,
.post-video {
    border-radius: var(--k-card-radius) var(--k-card-radius) 0 0 !important;
    margin: -1px -1px 15px -1px !important;
    width: calc(100% + 2px) !important;
}

.post-media img,
.post-media video {
    border-radius: var(--k-card-radius) var(--k-card-radius) 0 0 !important;
    width: 100% !important;
}
/* --- 6. INSTAGRAM / TELEGRAM LUXURY STORIES TRAY OVERHAUL --- */
.stories-card-container {
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

body:not(.night-mode) .stories-card-container {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

body.night-mode .stories-card-container {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.stories-wrapper {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.stories-wrapper::-webkit-scrollbar {
    display: none !important;
}

#stories {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* User's Add Story Button */
.add-story {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    border-radius: 50% !important;
    margin-right: 0 !important;
  position: relative !important;
    padding: 2.5px !important;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.5), rgba(245, 158, 11, 0.5)) !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
    flex-shrink: 0 !important;
}

.add-story:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0, 180, 216, 0.35) !important;
}

.add-story .img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-size: cover !important;
    border: 2px solid #ffffff !important;
}

body.night-mode .add-story .img {
    border-color: #0f172a !important;
}

.add-story .add {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 180, 216, 0.4) !important;
    left: auto !important;
    transform: none !important;
    padding: 0 !important;
    font-size: 11px !important;
}

body.night-mode .add-story .add {
    border-color: #0f172a !important;
}

.add-story .add svg,
.add-story .add .main-icon {
    width: 12px !important;
    height: 12px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Zuck.js Story Item - Modern Instagram Trifold Gradient Ring */
#stories .story {
    width: 66px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

#stories .story > .item-link > .item-preview {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    padding: 2.5px !important;
    background: linear-gradient(135deg, #e15637 0%, #f59e0b 50%, #0284c7 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(225, 86, 55, 0.32) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

#stories .story:hover > .item-link > .item-preview {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 22px rgba(225, 86, 55, 0.48) !important;
}

/* Seen / Viewed Stories: Muted Border */
#stories .story.seen > .item-link > .item-preview {
    background: #cbd5e1 !important;
    box-shadow: none !important;
}

body.night-mode #stories .story.seen > .item-link > .item-preview {
    background: rgba(255, 255, 255, 0.22) !important;
}

#stories .story > .item-link > .item-preview img {
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

body.night-mode #stories .story > .item-link > .item-preview img {
    border-color: #0f172a !important;
}

#stories .story > .item-link > .info {
    width: 66px !important;
    text-align: center !important;
    padding: 6px 0 0 0 !important;
}

#stories .story > .item-link > .info b {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.night-mode #stories .story > .item-link > .info b {
    color: #cbd5e1 !important;
}

#stories .story > .item-link > .item-preview:before {
    display: none !important;
}

/* KETHANE MOBILE OFFCANVAS FIX - LIGHT & NIGHT MODE */
@media (max-width: 767px) {
    body:not(.night-mode) .sg-offcanvas-sidebar {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    body.night-mode .sg-offcanvas-sidebar {
        background: #0f172a !important;
        background-color: #0f172a !important;
    }

    /* Mobile-first: Full-Screen Safe-Area & Notch / Dynamic Island Calibration */
    :root {
        --dk-safe-top: env(safe-area-inset-top, 0px);
        --dk-safe-bottom: env(safe-area-inset-bottom, 0px);
        --dk-header-h: calc(52px + var(--dk-safe-top));
        --dk-bottom-nav-h: calc(58px + var(--dk-safe-bottom));
    }

    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
  position: relative !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        padding-top: var(--dk-header-h) !important;
        padding-bottom: calc(var(--dk-bottom-nav-h) + 12px) !important;
    }

    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--dk-header-h) !important;
        padding-top: var(--dk-safe-top) !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        z-index: 2000 !important;
    }

    .main-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .sg-offcanvas,
    .sg-offcanvas.mt20,
    .container-fluid.mt20,
    .container.mt20 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .sg-offcanvas-mainbar {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .sg-offcanvas-mainbar > .row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .sg-offcanvas-mainbar > .row > .col-lg-8 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .dikela-mobile-quick-access {
        margin-top: 3px !important;
        margin-bottom: 4px !important;
        padding: 0 !important;
    }
    .dikela-top-verse-container {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
    .dikela-versiculo-card {
        padding: 12px 14px 14px 14px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    #live-now-announcement.x-hidden {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    .js_story-deleter {
        z-index: 1 !important;
    }
}

/* --- POST CONTENT STYLE REFINEMENTS --- */
.post-text {
    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: 0.012em !important;
    margin-bottom: 20px !important;
}

.post-text p {
    margin-bottom: 1.2rem !important;
}

.post-text blockquote {
    border-left: 4px solid #00f2ea !important;
    padding: 12px 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px 16px 16px 4px !important;
    font-style: italic !important;
    margin: 15px 0 20px !important;
    color: #f0f0f0 !important;
}

.post-text ul, .post-text ol {
    padding-left: 25px !important;
    margin-bottom: 15px !important;
}

.post-text ul li {
    list-style-type: disc !important;
    margin-bottom: 8px !important;
}

.post-text a {
    color: #00f2ea !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(0, 242, 234, 0.4) !important;
    transition: all 0.2s ease !important;
}

.post-text a:hover {
    color: #70fffb !important;
    border-bottom-style: solid !important;
}

/* --- 7. PWA NATIVE MOBILE UX OVERRIDES --- */
@media (max-width: 767px) {
    /* Disable text selection and browser popups on UI elements */
    .main-header,
    .sg-offcanvas-sidebar,
    .main-side-nav-card,
    .left-sidebar,
    .bottom-navigation,
    .navigation-bar,
    .footer-menu,
    .add-story,
    #stories .story,
    .btn,
    .icon-container,
    .nav-menu li a {
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
    }
}


/* ==========================================================================
   KETHANE GLOBAL ULTRA-MODERN GLASSMORPHISM 2.0 (NIGHT-MODE EXCLUSIVE)
   ========================================================================== */

/* 1. Global Font Smoothing & Modern Dark Canvas (Only Night Mode) */
body.night-mode {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  background-color: #06080d !important;
  background-image: 
    radial-gradient(at 10% 15%, rgba(0, 242, 234, 0.035) 0px, transparent 50%),
    radial-gradient(at 90% 85%, rgba(249, 200, 58, 0.025) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* 2. Frosted Floating Header (Night Mode) */
body.night-mode .main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background: rgba(6, 8, 14, 0.88) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

body.night-mode .main-header .search-wrapper .form-control {
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

body.night-mode .main-header .search-wrapper .form-control:focus {
  border-color: #00f2ea !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.25) !important;
}

/* 3. Feed Cards & Glass Containers (Night Mode) */
body.night-mode .post,
body.night-mode .card,
body.night-mode .panel,
body.night-mode .box,
body.night-mode .glass-post-container,
body.night-mode .main-side-nav-card {
  background: rgba(16, 21, 32, 0.78) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s !important;
}

body.night-mode .post:hover,
body.night-mode .card:hover {
  box-shadow: 0 16px 44px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 234, 0.08) !important;
}

/* 4. Stories Ring with Dikela Signature Triad Gradient */
.add-story,
#stories .story > .item-link > .item-preview {
  border-radius: 50% !important;
  padding: 3px !important;
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 50%, #0284c7 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(225, 86, 55, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.add-story:hover,
#stories .story > .item-link > .item-preview:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 22px rgba(225, 86, 55, 0.55) !important;
}

/* 5. Reaction Buttons & Interactivity */
body.night-mode .post-actions .action-btn {
  border-radius: 50px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.night-mode .post-actions .action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Amén Reaction Button */
.btn-amen-post {
  color: #f9c83a !important;
}

.btn-amen-post:hover {
  background: rgba(249, 200, 58, 0.15) !important;
  box-shadow: 0 0 15px rgba(249, 200, 58, 0.4) !important;
}

/* 6. Comment Bubbles - Adaptive */
body:not(.night-mode) .comment-text {
  border-radius: 18px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  padding: 12px 18px !important;
}

body.night-mode .comment-text {
  border-radius: 18px !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  padding: 12px 18px !important;
}

/* 7. Dropdown Menus & Modals - Master Dual-Theme Architecture */
/* --- 7.A LIGHT MODE DROPDOWNS (Pristine, High-Contrast, Zero-Bleed) --- */
body:not(.night-mode) .dropdown-menu {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.15), 
              0 4px 14px -2px rgba(0, 180, 216, 0.08),
              0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
  padding: 8px !important;
  z-index: 1060 !important;
}

body:not(.night-mode) .dropdown-menu .dropdown-item,
body:not(.night-mode) .dropdown-menu a.dropdown-item,
body:not(.night-mode) .dropdown-menu div.dropdown-item,
body:not(.night-mode) .dropdown-menu a:not(.btn) {
  border-radius: 12px !important;
  color: #1e293b !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s ease-in-out !important;
  background: transparent !important;
  text-decoration: none !important;
}

body:not(.night-mode) .dropdown-menu .dropdown-item *,
body:not(.night-mode) .dropdown-menu a.dropdown-item *,
body:not(.night-mode) .dropdown-menu div.dropdown-item * {
  color: inherit;
}

body:not(.night-mode) .dropdown-menu .dropdown-item > span:not(.badge),
body:not(.night-mode) .dropdown-menu a.dropdown-item > span:not(.badge) {
  color: #1e293b !important;
}

body:not(.night-mode) .dropdown-menu .dropdown-item:hover,
body:not(.night-mode) .dropdown-menu a.dropdown-item:hover,
body:not(.night-mode) .dropdown-menu div.dropdown-item:hover,
body:not(.night-mode) .dropdown-menu .dropdown-item:focus {
  background: rgba(0, 180, 216, 0.08) !important;
  color: #0077b6 !important;
  transform: translateX(3px) !important;
}

body:not(.night-mode) .dropdown-menu .dropdown-item:hover > span:not(.badge),
body:not(.night-mode) .dropdown-menu a.dropdown-item:hover > span:not(.badge) {
  color: #0077b6 !important;
}

body:not(.night-mode) .dropdown-menu .main-icon,
body:not(.night-mode) .dropdown-menu .header-icon,
body:not(.night-mode) .dropdown-menu .svg-container.main-icon,
body:not(.night-mode) .dropdown-menu .dropdown-item svg,
body:not(.night-mode) .dropdown-menu .dropdown-item i {
  color: #00b4d8 !important;
  fill: #00b4d8 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

body:not(.night-mode) .dropdown-menu .dropdown-item:hover .main-icon,
body:not(.night-mode) .dropdown-menu .dropdown-item:hover .svg-container.main-icon,
body:not(.night-mode) .dropdown-menu .dropdown-item:hover svg,
body:not(.night-mode) .dropdown-menu .dropdown-item:hover i {
  color: #0077b6 !important;
  fill: #0077b6 !important;
  transform: scale(1.12) !important;
}

body:not(.night-mode) .dropdown-divider {
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
  margin: 6px 8px !important;
  opacity: 1 !important;
}

body:not(.night-mode) .dropdown-menu .border-top.border-bottom {
  background: rgba(0, 180, 216, 0.05) !important;
  border-color: rgba(0, 180, 216, 0.15) !important;
  border-radius: 12px !important;
  margin: 6px 4px !important;
  padding: 10px 12px !important;
}

body:not(.night-mode) .dropdown-menu .text-muted {
  color: #64748b !important;
}

body:not(.night-mode) .dropdown-widget {
  background: #ffffff !important;
}

body:not(.night-mode) .dropdown-widget-header {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
}

body:not(.night-mode) .dropdown-widget-header .title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body:not(.night-mode) .dropdown-widget-body {
  background: #ffffff !important;
  color: #1e293b !important;
}

body:not(.night-mode) .dropdown-widget-footer {
  background: #f8fafc !important;
  color: #0077b6 !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
  font-weight: 600 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
  display: block !important;
}

body:not(.night-mode) .dropdown-widget-footer:hover {
  background: rgba(0, 180, 216, 0.06) !important;
  color: #005f96 !important;
}

body:not(.night-mode) .action-dropdown-menu .action {
  color: #1e293b !important;
}

body:not(.night-mode) .action-dropdown-menu .action-desc {
  color: #64748b !important;
}

body:not(.night-mode) .action-dropdown-menu .action:hover {
  background: rgba(0, 180, 216, 0.08) !important;
  color: #0077b6 !important;
}

body:not(.night-mode) .dropdown-search {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
}

body:not(.night-mode) .dropdown-menu .badge.bg-light {
  background: #f1f5f9 !important;
  color: #0077b6 !important;
  font-weight: 700 !important;
  border: 1px solid #e2e8f0 !important;
}

body:not(.night-mode) .dropdown-menu .badge.bg-primary {
  background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
  color: #ffffff !important;
}

body:not(.night-mode) .dropdown-menu .badge.bg-success {
  background: #10b981 !important;
  color: #ffffff !important;
}

.dropdown-menu .dropdown-item img.rounded-circle {
  width: 22px !important;
  height: 22px !important;
  object-fit: cover !important;
  margin-right: 10px !important;
}

.dikela-user-dropdown {
  min-width: 280px !important;
  max-width: 340px !important;
  max-height: calc(100vh - 85px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

/* --- 7.B NIGHT MODE DROPDOWNS (OLED Depth, Crisp Contrast) --- */
body.night-mode .dropdown-menu {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 
              0 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  padding: 8px !important;
  z-index: 1060 !important;
}

body.night-mode .dropdown-menu .dropdown-item,
body.night-mode .dropdown-menu a.dropdown-item,
body.night-mode .dropdown-menu div.dropdown-item,
body.night-mode .dropdown-menu a:not(.btn) {
  border-radius: 12px !important;
  color: #f1f5f9 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s ease-in-out !important;
  background: transparent !important;
  text-decoration: none !important;
}

body.night-mode .dropdown-menu .dropdown-item *,
body.night-mode .dropdown-menu a.dropdown-item *,
body.night-mode .dropdown-menu div.dropdown-item * {
  color: inherit;
}

body.night-mode .dropdown-menu .dropdown-item > span:not(.badge),
body.night-mode .dropdown-menu a.dropdown-item > span:not(.badge) {
  color: #f1f5f9 !important;
}

body.night-mode .dropdown-menu .dropdown-item:hover,
body.night-mode .dropdown-menu a.dropdown-item:hover,
body.night-mode .dropdown-menu div.dropdown-item:hover,
body.night-mode .dropdown-menu .dropdown-item:focus {
  background: rgba(0, 180, 216, 0.18) !important;
  color: #38bdf8 !important;
  transform: translateX(3px) !important;
}

body.night-mode .dropdown-menu .dropdown-item:hover > span:not(.badge),
body.night-mode .dropdown-menu a.dropdown-item:hover > span:not(.badge) {
  color: #38bdf8 !important;
}

body.night-mode .dropdown-menu .main-icon,
body.night-mode .dropdown-menu .header-icon,
body.night-mode .dropdown-menu .svg-container.main-icon,
body.night-mode .dropdown-menu .dropdown-item svg,
body.night-mode .dropdown-menu .dropdown-item i {
  color: #38bdf8 !important;
  fill: #38bdf8 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

body.night-mode .dropdown-menu .dropdown-item:hover .main-icon,
body.night-mode .dropdown-menu .dropdown-item:hover .svg-container.main-icon,
body.night-mode .dropdown-menu .dropdown-item:hover svg,
body.night-mode .dropdown-menu .dropdown-item:hover i {
  color: #7dd3fc !important;
  fill: #7dd3fc !important;
  transform: scale(1.12) !important;
}

body.night-mode .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 6px 8px !important;
  opacity: 1 !important;
}

body.night-mode .dropdown-menu .border-top.border-bottom {
  background: rgba(0, 180, 216, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin: 6px 4px !important;
  padding: 10px 12px !important;
}

body.night-mode .dropdown-menu .text-muted {
  color: #94a3b8 !important;
}

body.night-mode .dropdown-menu .badge.bg-light {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
}

body.night-mode .dropdown-widget {
  background: #0f172a !important;
}

body.night-mode .dropdown-widget-header {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 16px !important;
}

body.night-mode .dropdown-widget-header .title {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

body.night-mode .dropdown-widget-body {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

body.night-mode .dropdown-widget-footer {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 600 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
  display: block !important;
}

body.night-mode .dropdown-widget-footer:hover {
  background: rgba(0, 180, 216, 0.15) !important;
  color: #7dd3fc !important;
}

body.night-mode .action-dropdown-menu .action {
  color: #f8fafc !important;
}

body.night-mode .action-dropdown-menu .action-desc {
  color: #94a3b8 !important;
}

body.night-mode .action-dropdown-menu .action:hover {
  background: rgba(0, 180, 216, 0.18) !important;
  color: #38bdf8 !important;
}

body.night-mode .dropdown-search {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 8. Cookie Alert Banner Modernization */
.cookie-alert,
.alert-cookie,
div[class*="cookie"] {
  background: rgba(14, 18, 30, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}

div[class*="cookie"] button,
div[class*="cookie"] .btn {
  background: linear-gradient(135deg, #00f2ea, #0077ff) !important;
  color: #05070a !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 242, 234, 0.4) !important;
}

/* Modern Cookie Consent Banner Overhaul */
.cc-window.cc-banner,
.cc-window.cc-floating {
  background: rgba(16, 21, 33, 0.9) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  color: #f1f5f9 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 16px 22px !important;
}

.cc-btn {
  background: linear-gradient(135deg, #00f2ea 0%, #0077ff 100%) !important;
  color: #05070a !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  border: none !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 15px rgba(0, 242, 234, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.cc-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 242, 234, 0.6) !important;
  filter: brightness(1.1) !important;
}

.cc-link {
  color: #00f2ea !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   KETHANE FLOATING PRAISE RADIO MINI-PLAYER (24/7 STREAM)
   ========================================================================== */

#kethane-radio-miniplayer {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 9998;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.kethane-radio-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 19, 32, 0.88);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 8px 16px 8px 8px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(0, 242, 234, 0.2);
}

.kethane-radio-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00f2ea 0%, #0077ff 100%);
  color: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 242, 234, 0.4);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.kethane-radio-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 242, 234, 0.6);
}

.kethane-radio-info {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  min-width: 140px;
}

.kethane-radio-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kethane-radio-title .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.kethane-radio-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Equalizer Visualizer */
.kethane-radio-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin: 0 4px;
}

.kethane-radio-equalizer span {
  width: 3px;
  height: 4px;
  background: #00f2ea;
  border-radius: 3px;
  transition: height 0.2s ease;
}

.kethane-radio-equalizer.playing span:nth-child(1) { animation: eqBar 1s ease-in-out infinite alternate; }
.kethane-radio-equalizer.playing span:nth-child(2) { animation: eqBar 0.7s ease-in-out 0.2s infinite alternate; }
.kethane-radio-equalizer.playing span:nth-child(3) { animation: eqBar 1.2s ease-in-out 0.4s infinite alternate; }
.kethane-radio-equalizer.playing span:nth-child(4) { animation: eqBar 0.8s ease-in-out 0.1s infinite alternate; }

@keyframes eqBar {
  0% { height: 4px; }
  100% { height: 18px; }
}

.kethane-radio-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  transition: color 0.2s;
}

.kethane-radio-close:hover {
  color: #fff;
}

/* Mobile Dock Position - Cleanly docked above bottom bar and hidden by default for guests */
@media (max-width: 767.98px) {
  #kethane-radio-miniplayer {
    display: none;
    bottom: calc(var(--km-nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 8px);
    right: 12px;
    left: 12px;
    margin: 0 auto;
    max-width: calc(100% - 24px);
    z-index: 1050;
  }
  #kethane-radio-miniplayer.is-playing,
  #kethane-radio-miniplayer.is-active {
    display: block !important;
  }
  .kethane-radio-inner {
    padding: 6px 12px 6px 8px;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
  }
  .kethane-radio-info {
    min-width: 0 !important;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .kethane-radio-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.85rem;
  }
  .kethane-radio-title {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kethane-radio-sub {
    display: none;
  }
}

/* ==========================================================================
   FIX: REACTION POPOVER POSITIONING & VISIBILITY (DESKTOP & MOBILE)
   Ensures reaction emojis popup appears cleanly right above the React button,
   immune to parent backdrop-filter, transform, and overflow clipping.
   ========================================================================== */
.post,
.glass-post-container,
.card,
.panel,
.post-actions,
.post-body {
    overflow: visible !important;
}

.reactions-wrapper {
  position: relative !important;
}

.reactions-container {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    z-index: 99999 !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.18), 0 4px 12px rgba(28, 25, 23, 0.08) !important;
    white-space: nowrap !important;
    animation: dikelaReactionPop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes dikelaReactionPop {
    0% { opacity: 0; transform: translateY(8px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

html[dir="rtl"] .reactions-container {
    left: auto !important;
    right: 0 !important;
}

body:not(.night-mode) .reactions-container {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.18), 0 4px 12px rgba(28, 25, 23, 0.08) !important;
}

body.night-mode .reactions-container {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.20) !important;
}

.reactions_item {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    float: none !important;
  position: relative !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.reactions_item img {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important;
}

.reactions_item:hover img {
    transform: scale(1.42) translateY(-6px) !important;
    filter: drop-shadow(0 6px 12px rgba(245, 158, 11, 0.35)) !important;
}

/* Global Floating Spiritual Reaction Particles */
.dikela-floating-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999999;
    overflow: hidden;
}

.dikela-particle {
    position: absolute;
    user-select: none;
    pointer-events: none;
    font-size: 1.85rem;
    animation: dikelaFloatHolyUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.4));
}

@keyframes dikelaFloatHolyUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translate(calc(-50% + (var(--drift-x, 15px) * 0.3)), -30px) scale(1.25) rotate(calc(var(--drift-r, 10deg) * 0.5));
    }
    60% {
        opacity: 0.95;
        transform: translate(calc(-50% + var(--drift-x, 25px)), -90px) scale(1.15) rotate(var(--drift-r, 15deg));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + (var(--drift-x, 35px) * 1.5)), -170px) scale(0.9) rotate(calc(var(--drift-r, 20deg) * 1.5));
    }
}


/* ==========================================================================
   KETHANE LIVEKIT SPACES HUB (SALAS EN VIVO)
   Prominent, stunning 1-click live rooms widget at the top of the feed
   ========================================================================== */
.kethane-live-spaces-card {
    background: rgba(22, 27, 34, 0.75) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 16px 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 22px !important;
  position: relative !important;
}

body:not(.night-mode) .kethane-live-spaces-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.kethane-live-spaces-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body:not(.night-mode) .kethane-live-spaces-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.live-spaces-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #fff;
}

body:not(.night-mode) .live-spaces-title {
    color: #1e293b;
}

.live-pulse-dot {
    width: 9px;
    height: 9px;
    background: #ff0050;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0050;
    animation: livePulseGlow 1.8s infinite ease-in-out;
}

@keyframes livePulseGlow {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #ff0050, 0 0 20px rgba(255, 0, 80, 0.5); }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.badge-live-tag {
    background: linear-gradient(135deg, #00f2ea 0%, #0077ff 100%);
    color: #050c18;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-spaces-all-link {
    font-size: 0.82rem;
    color: var(--accent-cian, #00f2ea) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s;
}

.live-spaces-all-link:hover {
    color: #fff !important;
    transform: translateX(2px);
}

.kethane-live-spaces-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 576px) {
    .kethane-live-spaces-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.live-space-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

body:not(.night-mode) .live-space-btn {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.live-space-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Specific button theme glows */
.space-oracion:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(245, 158, 11, 0.08) !important;
}

.space-estudio:hover {
    border-color: rgba(0, 242, 234, 0.5) !important;
    background: rgba(0, 242, 234, 0.08) !important;
}

.space-jovenes:hover {
    border-color: rgba(255, 0, 122, 0.5) !important;
    background: rgba(255, 0, 122, 0.08) !important;
}

.space-libre:hover {
    border-color: rgba(16, 185, 129, 0.5) !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

.space-icon-wrapper {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.space-info {
    flex: 1;
    min-width: 0;
}

.space-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

body:not(.night-mode) .space-name {
    color: #0f172a;
}

.space-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

body:not(.night-mode) .space-sub {
    color: #64748b;
}

.space-cta-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.space-pill-oracion {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.space-pill-estudio {
    background: rgba(0, 242, 234, 0.15);
    color: #00f2ea;
    border: 1px solid rgba(0, 242, 234, 0.3);
}

.space-pill-jovenes {
    background: rgba(255, 0, 122, 0.15);
    color: #ff007a;
    border: 1px solid rgba(255, 0, 122, 0.3);
}

.space-pill-libre {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.live-space-btn:hover .space-cta-pill {
    transform: scale(1.06);
}



/* FEED INTERACTION BADGE (DUET / STITCH ATTRIBUTION IN TIMELINE) */
.kethane-feed-interaction-badge {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
}
.feed-interaction-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #e2e8f0;
    transition: color 0.2s;
}
.feed-interaction-link:hover {
    color: #fff;
}
.badge-tag {
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-tag.tag-duet {
    background: rgba(179, 136, 255, 0.2);
    border: 1px solid rgba(179, 136, 255, 0.4);
    color: #b388ff;
}
.badge-tag.tag-stitch {
    background: rgba(0, 229, 255, 0.2);
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: #00e5ff;
}
.badge-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
}


/* ============================================================
   WCAG AA/AAA CONTRAST & ACCESSIBLE INPUTS (AUDIT FIX)
   ============================================================ */
.text-muted,
body .text-muted,
.post-stats-alt,
.post-stats span,
.post-time,
.time,
.data-content .time,
.post-desc,
.stat-label,
small.text-muted {
    color: var(--k-text-muted) !important;
}

/* 1. MODO CLARO (Default / Light Mode) - Legibilidad y Alto Contraste */
body:not(.night-mode) .comment-form textarea,
body:not(.night-mode) .comment-form .form-control,
body:not(.night-mode) .comment-reply-form textarea,
body:not(.night-mode) .post-actions textarea,
body:not(.night-mode) .comment-edit textarea,
body:not(.night-mode) textarea.js_post-comment,
body:not(.night-mode) .form-control {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important; /* TEXTO OSCURO SLATE 900: 100% visible */
    caret-color: #00b4d8 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body:not(.night-mode) .comment-form textarea:focus,
body:not(.night-mode) .comment-form .form-control:focus,
body:not(.night-mode) .comment-reply-form textarea:focus,
body:not(.night-mode) .comment-edit textarea:focus,
body:not(.night-mode) textarea.js_post-comment:focus,
body:not(.night-mode) .form-control:focus {
    background: #ffffff !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2) !important;
    color: #0f172a !important;
    outline: none !important;
}

body:not(.night-mode) .comment-form textarea::placeholder,
body:not(.night-mode) .comment-reply-form textarea::placeholder,
body:not(.night-mode) .comment-edit textarea::placeholder,
body:not(.night-mode) textarea.js_post-comment::placeholder,
body:not(.night-mode) .form-control::placeholder,
body:not(.night-mode) ::placeholder {
    color: #64748b !important; /* Slate 500 para placeholder legible */
    opacity: 1 !important;
}

body:not(.night-mode) .comment-form .x-form-tools li i {
    color: #64748b !important;
    transition: color 0.2s ease !important;
}
body:not(.night-mode) .comment-form .x-form-tools li:hover i {
    color: #00b4d8 !important;
}

/* 2. MODO OSCURO (OLED Night Mode) */
body.night-mode .comment-form textarea,
body.night-mode .comment-form .form-control,
body.night-mode .comment-reply-form textarea,
body.night-mode .post-actions textarea,
body.night-mode .comment-edit textarea,
body.night-mode textarea.js_post-comment,
body.night-mode .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important; /* Blanco suave para fondo oscuro */
    caret-color: #00f2ea !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body.night-mode .comment-form textarea:focus,
body.night-mode .comment-form .form-control:focus,
body.night-mode .comment-reply-form textarea:focus,
body.night-mode .comment-edit textarea:focus,
body.night-mode textarea.js_post-comment:focus,
body.night-mode .form-control:focus {
    border-color: #00f2ea !important;
    box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.25) !important;
    color: #ffffff !important;
    outline: none !important;
}

body.night-mode .comment-form textarea::placeholder,
body.night-mode .comment-reply-form textarea::placeholder,
body.night-mode .comment-edit textarea::placeholder,
body.night-mode textarea.js_post-comment::placeholder,
body.night-mode .form-control::placeholder,
body.night-mode ::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

body.night-mode .comment-form .x-form-tools li i {
    color: #94a3b8 !important;
}
body.night-mode .comment-form .x-form-tools li:hover i {
    color: #00f2ea !important;
}



/* ==========================================================================
   DIKELA MOBILE & YOUTH-FORWARD DESIGN PERFECTION
   Optimizado para iPhone, Android y Pantallas Táctiles
   ========================================================================== */

/* 1. Logo & Header Responsive */
.main-header .logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.main-header .logo img {
  height: 42px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04)) !important;
}

.main-header .logo:hover img {
    transform: scale(1.04) !important;
}

@media (max-width: 767px) {
  .main-header .logo img {
    height: 32px !important;
    max-height: 33px !important;
    width: auto !important;
  }
    .main-header .tiktok-live-badge {
        padding: 2px 5px !important;
        font-size: 0.55rem !important;
    }
    .main-header .tiktok-live-badge i {
        font-size: 0.60rem !important;
    }
}

/* 2. Textos del Menú Lateral — 100% legibles y nítidos en Light Mode */
body:not(.night-mode) .nav-label,
body:not(.night-mode) .main-side-nav li a,
body:not(.night-mode) .main-side-nav li a span.nav-label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

body:not(.night-mode) .main-side-nav li a:hover span.nav-label {
    color: #b45309 !important;
}

/* 3. Mobile Bottom Bar — Glassmorphism Alabastro y Activos en Oro Ámbar */
@media (max-width: 767px) {
    body:not(.night-mode) .footer-bottom-bar {
        background: rgba(251, 249, 245, 0.96) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(217, 119, 6, 0.15) !important;
        box-shadow: 0 -4px 20px rgba(28, 25, 23, 0.05) !important;
    }

    body:not(.night-mode) .footer-bottom-bar-links .link a {
        color: #78716c !important;
        border-radius: 14px !important;
        transition: all 0.2s ease !important;
    }

    body:not(.night-mode) .footer-bottom-bar-links .link.active a {
        color: #b45309 !important;
    }

    body:not(.night-mode) .footer-bottom-bar-links .link.active .title {
        color: #b45309 !important;
        font-weight: 700 !important;
    }

    body:not(.night-mode) .footer-bottom-bar-links .link.active .svg-container.header-icon svg path,
    body:not(.night-mode) .footer-bottom-bar-links .link.active .svg-container.header-icon svg circle,
    body:not(.night-mode) .footer-bottom-bar-links .link.active .svg-container.header-icon svg rect {
        fill: #b45309 !important;
        stroke: #b45309 !important;
    }

    body:not(.night-mode) .footer-bottom-bar-links .link a[href*="voz-cristiana"],
    body:not(.night-mode) .footer-bottom-bar-links .link a[href*="Voz-Cristiana"] {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        box-shadow: 0 0 0 4px #ffffff, 0 6px 20px rgba(217, 119, 6, 0.40) !important;
    }

    /* 4. Tarjetas en móvil — app-like feel */
    body:not(.night-mode) .post,
    body:not(.night-mode) .card {
        border-radius: 18px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
    }
}

/* 5. Micro-interacciones táctiles */
.btn:active,
.footer-bottom-bar-links .link a:active,
.action-btn:active {
    transform: scale(0.96) !important;
}

/* 6. Dikela Mobile-First Core Hardening & Responsiveness Suite */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 12px)) !important;
        -webkit-overflow-scrolling: touch;
    }
    .main-wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Container and Grid Fluidity (Zero Edge Spill) */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    .row > [class*="col"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Media & Embed Universal Responsiveness */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }
    iframe {
        border: 0 !important;
    }

    /* Code blocks & Tables Containment */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-break: break-word !important;
        white-space: pre-wrap !important;
    }
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        width: 100% !important;
    }

    /* Profile Tabs Horizontal Touch Carousel */
    .profile-tabs-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 6px 10px !important;
    }
    .profile-tabs-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    .profile-tabs-wrapper a {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }

    /* Publisher Toolbar Horizontal Scroll */
    .publisher-tools,
    .x-form-tools {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-bottom: 2px !important;
    }
    .publisher-tools::-webkit-scrollbar,
    .x-form-tools::-webkit-scrollbar {
        display: none !important;
    }
    .x-form-tools > li {
        flex-shrink: 0 !important;
    }

    /* Newsfeed Filter Tabs Trailing Padding */
    .dikela-feed-filter-tabs {
        padding-right: 16px !important;
        scroll-padding-right: 16px !important;
    }

    /* Post Actions Touch Targets & Responsive Wrapping */
    .post-actions .action-btn,
    .post-actions a.action-btn {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        padding: 6px 10px !important;
        font-size: 0.80rem !important;
    }
    .post-actions .prayer-action-btn {
        min-height: 44px !important;
        font-size: 0.84rem !important;
    }

    /* Touch Feedback */
    .btn:active,
    .action-btn:active,
    .k-nav-item:active,
    .quick-pill:active {
        transform: scale(0.96) !important;
        transition: transform 0.1s ease !important;
    }

    /* Offcanvas Sidebar Polish: Disabled old pseudo-backdrop in favor of dedicated .dikela-drawer-backdrop */
    .sg-offcanvas.active .sg-offcanvas-mainbar::after,
    .sg-offcanvas:not(.active) .sg-offcanvas-mainbar::after {
        display: none !important;
    }

    /* Messenger & Chat Mobile Ergonomics */
    .js_live-messages-alt .js_scroller,
    .panel-messages .chat-conversations {
        height: auto !important;
        max-height: calc(100vh - 280px) !important;
        max-height: calc(100dvh - 280px) !important;
        min-height: 260px !important;
    }
    .chat-form {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    }
    .chat-form .emoji-menu {
        left: auto !important;
        right: 0 !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 250px !important;
    }
    .chat-to .tags {
        flex-wrap: wrap !important;
    }

    /* Content Tabs (14 sections: People, Groups, Events, Courses, Wallet, etc.) */
    .content-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }
    .content-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .content-tabs > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .content-tabs > ul > li {
        float: none !important;
        flex: 0 0 auto !important;
    }
    .content-tabs > ul > li > a {
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    /* Search Page Pills Horizontal Carousel */
    .nav-search {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
    }
    .nav-search::-webkit-scrollbar {
        display: none !important;
    }
    .nav-search .nav-item {
        flex: 0 0 auto !important;
    }
    .nav-search .nav-link {
        white-space: nowrap !important;
        padding: 6px 14px !important;
        font-size: 0.85rem !important;
    }

    /* Profile Header & Spiritual Badges Ergonomics */
    .profile-name-wrapper {
        padding-top: 48px !important;
    }
    .profile-name-wrapper h1 {
        font-size: 1.35rem !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
    }
    .dikela-spiritual-badges-list {
        justify-content: center !important;
    }
    .profile-buttons-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding-bottom: 16px !important;
    }

    /* Page Header Mini Compact on Mobile */
    .page-header {
        padding: 34px 14px !important;
    }
    .page-header h2 {
        font-size: 1.5rem !important;
    }
    .page-header p.text-xlg {
        font-size: 0.95rem !important;
        margin-bottom: 0 !important;
    }

    /* Form Controls & Inputs on Mobile */
    .form-control,
    .form-select,
    .input-group-text {
        padding: 0.6rem 0.85rem !important;
        font-size: 0.92rem !important;
    }
    .input-group {
        flex-wrap: nowrap !important;
    }

    /* Dropdowns & Popovers Viewport Protection */
    .dropdown-menu {
        max-width: calc(100vw - 20px) !important;
        word-wrap: break-word !important;
    }
    .action-dropdown-menu {
        max-width: calc(100vw - 24px) !important;
    }

    /* Comment Replies Nested Indent Polish */
    .comment.reply .comment-avatar-picture {
        min-width: 32px !important;
        min-height: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .comment.reply .comment-data,
    .comment.reply .comment-edit {
        margin-left: 40px !important;
    }

    /* Data Containers Responsive Stacking for Lists */
    .data-container {
        min-width: 0 !important;
    }
    .data-container .data-content {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .data-container .data-content .float-end {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Compact 4-Column Mobile Publisher Attachment Grid (Option C) */
    .publisher-tools-tabs ul.row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    .publisher-tools-tabs ul.row > li {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .publisher-tools-tab {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 4px !important;
        min-height: 64px !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
        font-size: 0.72rem !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }
    .publisher-tools-tab .main-icon,
    .publisher-tools-tab i {
        margin-right: 0 !important;
        margin-bottom: 5px !important;
        width: 20px !important;
        height: 20px !important;
    }
    .publisher-tools-tab strong {
        font-size: 0.72rem !important;
    }
    .publisher-tools-tab .badge {
        display: none !important;
    }
}

/* ==========================================================================
   DIKELA DESIGN SYSTEM CONSOLIDATION (OPTION D)
   ========================================================================== */
:root {
    --dikela-cyan: #00b4d8;
    --dikela-cyan-hover: #0096c7;
    --dikela-cyan-glow: rgba(0, 180, 216, 0.25);
    --dikela-amber: #f59e0b;
    --dikela-emerald: #10b981;
    --dikela-rose: #fe2c55;
    --dikela-dark: #0f172a;
    --dikela-darker: #06080d;
    --dikela-card-light: #ffffff;
    --dikela-card-dark: #0f172a;
    --dikela-border-light: rgba(226, 232, 240, 0.9);
    --dikela-border-dark: rgba(255, 255, 255, 0.08);
    /* === VARIABLES DIKELA FALTANTES - CORRECCION AUTOMATICA === */
    --dikela-sky: #00b4d8;
    --dikela-sky-dark: #0096c7;
    --dikela-gold: #c8a45a;
    --dikela-coral: #ff6b6b;
    --dikela-card: rgba(255, 255, 255, 0.95);
    --dikela-border: rgba(226, 232, 240, 0.9);
    --dikela-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --dikela-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    --dikela-text-main: #1e293b;
    --dikela-radius: 16px;
}

/* WCAG 2.1 Contrast Hardening for Night Mode */
body.night-mode .text-muted {
    color: #94a3b8 !important;
}
body.night-mode .post-time {
    color: #94a3b8 !important;
}
body.night-mode .card-header .text-muted {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   SHIMMER SKELETON LOADERS (OPTION A - CORE WEB VITALS & ZERO CLS)
   ========================================================================== */
.dikela-skeleton-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
body.night-mode .dikela-skeleton-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: dikelaShimmer 1.5s infinite;
    border-radius: 8px;
}
body.night-mode .skeleton-shimmer {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
}
@keyframes dikelaShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
}
.skeleton-line.sm { width: 35%; height: 10px; }
.skeleton-line.md { width: 65%; }
.skeleton-line.lg { width: 90%; }
.skeleton-media {
    width: 100%;
    height: 200px;
    border-radius: 14px;
    margin: 12px 0 8px;
}

/* ==========================================================================
   PULL-TO-REFRESH NATIVE UI (OPTION B)
   ========================================================================== */
#dikela-pull-to-refresh {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translate(-50%, -70px);
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1051;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
    opacity: 0;
    color: var(--dikela-cyan);
    font-size: 1.15rem;
}
body.night-mode #dikela-pull-to-refresh {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
    color: #38bdf8;
}
#dikela-pull-to-refresh.ptr-visible {
    opacity: 1;
}
#dikela-pull-to-refresh.ptr-refreshing i {
    animation: ptrSpin 0.75s linear infinite;
}
@keyframes ptrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   DOUBLE-TAP REACTION BLESSING (OPTION B)
   ========================================================================== */
.dikela-double-tap-burst {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    font-size: 3.4rem;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
    animation: doubleTapBurstAnim 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes doubleTapBurstAnim {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    25% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; }
    60% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -130px) scale(0.7) rotate(-5deg); opacity: 0; }
}

/* ==========================================================================
   VOICE RECORDER WAVEFORM CANVAS (OPTION C)
   ========================================================================== */
#dikelaVoiceWaveform {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.05);
    display: none;
    margin: 8px 0;
}

/* ==========================================================================
   IMMERSIVE LUXURY LIGHTBOX OVERHAUL & SWIPE-DISMISS
   ========================================================================== */
.lightbox {
    background: rgba(6, 9, 18, 0.94) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    z-index: 10050 !important;
}

.lightbox-container {
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    animation: dikelaLightboxPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes dikelaLightboxPop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-preview {
    background: #000000 !important;
  position: relative !important;
    touch-action: pan-y !important;
    will-change: transform, opacity !important;
}

/* Mobile Swipe Hint Bar */
.lightbox-preview::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.45);
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
    .lightbox-preview::before {
        display: none !important;
    }
}

.lightbox-preview img {
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75) !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Floating Glass Exit Button */
.lightbox-exit,
.lightbox-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
}

.lightbox-exit:hover,
.lightbox-close:hover {
    background: rgba(244, 63, 94, 0.85) !important;
    border-color: rgba(244, 63, 94, 0.9) !important;
    transform: scale(1.1) rotate(90deg) !important;
    opacity: 1 !important;
}

/* Floating Glass Next & Prev Arrows */
.lightbox-next,
.lightbox-prev {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
}

.lightbox-next:hover,
.lightbox-prev:hover {
    background: rgba(0, 180, 216, 0.85) !important;
    border-color: rgba(0, 180, 216, 0.9) !important;
    transform: translateY(-50%) scale(1.12) !important;
    opacity: 1 !important;
}

/* Lightbox Download Pill */
.lightbox-download {
    bottom: 14px !important;
    left: 14px !important;
}

.lightbox-download a {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.lightbox-download a:hover {
    background: #00b4d8 !important;
    border-color: #00b4d8 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

/* Lightbox Post Sidebar */
body:not(.night-mode) .lightbox-data {
    background: #ffffff !important;
    border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
}

body.night-mode .lightbox-data {
    background: #0f172a !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.lightbox-post {
    scrollbar-width: thin !important;
}

/* PWA Banner Mobile Ergonomics - Keep bottom navigation 100% accessible */
@media (max-width: 767px) {
    .pwa_install_banner {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35) !important;
        z-index: 1035 !important;
    }
}

/* ==========================================================================
   DIKELA INTUITIVE NAVIGATION UPGRADES (MOBILE & DESKTOP)
   ========================================================================== */

/* 1. Mobile Drawer (Dikela Native Slide-In Drawer System) */
.dikela-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10450 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
  will-change: opacity;
}

body.dikela-drawer-open .dikela-drawer-backdrop,
.sg-offcanvas.active ~ .dikela-drawer-backdrop,
.sg-offcanvas.active .dikela-drawer-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 991.98px) {
  /* Lock background scroll while drawer is open */
  body.dikela-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Prevent offcanvas parent container from cutting or displacing fixed drawer */
  .sg-offcanvas {
    position: static !important;
    min-height: unset !important;
    overflow: visible !important;
  }

  /* Keep background content in place - do NOT slide 100% off screen */
  .sg-offcanvas .sg-offcanvas-mainbar,
  .sg-offcanvas.active .sg-offcanvas-mainbar {
  position: relative !important;
    left: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* The Native Drawer Panel: flush on left edge, full height, crisp styling */
  .sg-offcanvas .sg-offcanvas-sidebar,
  .sg-offcanvas-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(325px, 85vw) !important;
    max-width: 335px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 10500 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 0 20px 20px 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: 14px 0 45px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }

  /* Slide in smoothly when active */
  .sg-offcanvas.active .sg-offcanvas-sidebar,
  body.dikela-drawer-open .sg-offcanvas-sidebar,
  .sg-offcanvas-sidebar.dikela-drawer-active,
  body.dikela-drawer-open .sg-offcanvas .sg-offcanvas-sidebar {
    left: 0 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Night Mode Drawer */
  body.night-mode .sg-offcanvas-sidebar,
  body.night-mode .sg-offcanvas .sg-offcanvas-sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 16px 0 50px rgba(0, 0, 0, 0.75) !important;
  }

  /* Inner Card Container: fits the entire drawer height flexbox */
  .sg-offcanvas-sidebar .main-side-nav-card {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* 2. Drawer Top Header: Single crisp bar with Logo and Close X */
  .dikela-mobile-drawer-header {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  position: relative !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.night-mode .dikela-mobile-drawer-header {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .dikela-drawer-brand-logo {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Tactile Close Button (38x38px target) */
  .dikela-mobile-drawer-header .btn-close-drawer {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #64748b !important;
    font-size: 1rem !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .dikela-mobile-drawer-header .btn-close-drawer:active {
    transform: scale(0.9) !important;
    background: rgba(225, 86, 55, 0.15) !important;
    color: #e15637 !important;
  }

  body.night-mode .dikela-mobile-drawer-header .btn-close-drawer {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
  }

  /* 3. User Card & Guest Welcome in Drawer */
  .dikela-drawer-user-card,
  .dikela-drawer-guest-card {
    flex-shrink: 0 !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 4. Scrollable Nav List: Smooth touch scrolling, no cut-offs */
  .sg-offcanvas-sidebar .main-side-nav-card .card-body.with-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 10px 14px 30px !important;
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Sleek modern scrollbar for drawer */
  .sg-offcanvas-sidebar .main-side-nav-card .card-body.with-nav::-webkit-scrollbar {
    width: 4px !important;
  }
  .sg-offcanvas-sidebar .main-side-nav-card .card-body.with-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3) !important;
    border-radius: 999px !important;
  }

  /* Section Header styling */
  .main-side-nav .sidebar-section-header {
    padding: 14px 12px 6px !important;
    font-size: 0.70rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #94a3b8 !important;
  }
  body.night-mode .main-side-nav .sidebar-section-header {
    color: #64748b !important;
  }

  /* Navigation Items: Touch targets >= 44px */
  .dikela-sidebar-v2 .dikela-nav-item {
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 3px !important;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
  }
  body.night-mode .dikela-sidebar-v2 .dikela-nav-item {
    color: #cbd5e1 !important;
  }

  .dikela-sidebar-v2 li.active .dikela-nav-item,
  body:not(.night-mode) .dikela-sidebar-v2 li.active .dikela-nav-item {
    background: rgba(225, 86, 55, 0.08) !important;
    color: #e15637 !important;
    font-weight: 700 !important;
    border: 1px solid rgba(225, 86, 55, 0.18) !important;
  }
  body.night-mode .dikela-sidebar-v2 li.active .dikela-nav-item {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    font-weight: 700 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
  }

  .dikela-sidebar-v2 .dikela-nav-item:active {
    transform: scale(0.98) !important;
    background: rgba(0, 0, 0, 0.04) !important;
  }
}

/* 2. Profile, Page, Group, and Event Tabs: Intuitive Horizontally Scrollable Bar */
.profile-tabs-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  justify-content: flex-start !important;
}

.profile-tabs-wrapper::-webkit-scrollbar {
  display: none !important;
}

body.night-mode .profile-tabs-wrapper {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.profile-tabs-wrapper a {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border-bottom: none !important;
  background: transparent !important;
}

body.night-mode .profile-tabs-wrapper a {
  color: #94a3b8 !important;
}

/* Force text labels to be visible on all devices so users always know what tab is what */
.profile-tabs-wrapper a span {
  display: inline-block !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.profile-tabs-wrapper a:hover {
  background: rgba(225, 86, 55, 0.08) !important;
  color: #e15637 !important;
}

body.night-mode .profile-tabs-wrapper a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fbbf24 !important;
}

.profile-tabs-wrapper a.active {
  background: linear-gradient(135deg, rgba(225, 86, 55, 0.15), rgba(245, 158, 11, 0.15)) !important;
  color: #e15637 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px rgba(225, 86, 55, 0.5) !important;
  border-bottom: none !important;
}

body.night-mode .profile-tabs-wrapper a.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(225, 86, 55, 0.2)) !important;
  color: #fbbf24 !important;
  box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.6) !important;
}

/* Dikela Profile Header & Avatar Glow */
.profile-avatar-wrapper img {
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 0 0 2.5px #f59e0b, 0 8px 24px rgba(225, 86, 55, 0.25) !important;
  border-radius: 50% !important;
}
body.night-mode .profile-avatar-wrapper img {
  border-color: #080c14 !important;
  box-shadow: 0 0 0 2.5px #fbbf24, 0 8px 28px rgba(0, 0, 0, 0.7) !important;
}

/* 3. Search Filter Tabs: Smooth Horizontally Scrollable Pills */
.nav-search {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding-bottom: 6px !important;
}

.nav-search::-webkit-scrollbar {
  display: none !important;
}

.nav-search .nav-item {
  flex: 0 0 auto !important;
}

.nav-search .nav-link {
  white-space: nowrap !important;
  padding: 8px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  transition: all 0.2s ease !important;
}

.nav-search .nav-link.active {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.35) !important;
}

.nav-search .nav-link:not(.active):hover {
  background: rgba(225, 86, 55, 0.08) !important;
  color: #e15637 !important;
}

/* 4. Radio Player Mobile Docking - Keep clear of bottom bar */
@media (max-width: 767px) {
  #kethane-radio-player {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 20px) !important;
    max-width: 440px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1030 !important;
  }
  .k-player-minimized {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 1030 !important;
  }
}

/* 5. Daytime Header Search Input High Contrast */
body:not(.night-mode) .search-wrapper .search-input {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body:not(.night-mode) .search-wrapper .search-input::placeholder {
  color: #64748b !important;
}
body:not(.night-mode) .search-wrapper .search-input-icon {
  color: #64748b !important;
}

/* 6. Quick Spiritual Comment Reply Pills */
.dikela-quick-reply-pill {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 3px 11px !important;
  border-radius: 14px !important;
  background: rgba(225, 86, 55, 0.08) !important;
  border: 1px solid rgba(225, 86, 55, 0.22) !important;
  color: #c2410c !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
  user-select: none !important;
}
.dikela-quick-reply-pill:hover,
.dikela-quick-reply-pill:active {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
  border-color: #e15637 !important;
  transform: scale(0.96) !important;
}
body.night-mode .dikela-quick-reply-pill {
  background: rgba(225, 86, 55, 0.14) !important;
  border-color: rgba(225, 86, 55, 0.28) !important;
  color: #fb923c !important;
}
body.night-mode .dikela-quick-reply-pill:hover,
body.night-mode .dikela-quick-reply-pill:active {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
}

/* Comment Form & Send Button Focus */
.x-form.comment-form {
  border-radius: 20px !important;
  border: 1.5px solid rgba(225, 86, 55, 0.15) !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.x-form.comment-form:focus-within {
  border-color: var(--dikela-coral, #e15637) !important;
  box-shadow: 0 0 0 3px rgba(225, 86, 55, 0.15) !important;
}
body.night-mode .x-form.comment-form {
  border-color: rgba(245, 158, 11, 0.20) !important;
  background: #0f172a !important;
}
body.night-mode .x-form.comment-form:focus-within {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22) !important;
}
.x-form-tools-post i {
  color: var(--dikela-coral, #e15637) !important;
  transition: transform 0.15s ease !important;
}
.x-form-tools-post:hover i {
  transform: scale(1.15) rotate(-8deg) !important;
}

/* ==========================================================================
   INTERVENCIÓN A & B (DESIGN MATURITY LEVEL 3.5):
   - Truncamiento Elegante de Posts Largos & Devocionales
   - Compresión del Above-The-Fold en Móvil
   ========================================================================== */

/* 1. Truncamiento de Posts Largos con Gradient Fade-Out */




@media (max-width: 576px) {
  
}

.dikela-readmore-wrapper {
  padding: 2px 18px 6px !important;
}

.post-text[data-readmore] {
  transition: height 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post-text[data-readmore][aria-expanded="false"] {
  position: relative !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

.post-text[data-readmore][aria-expanded="true"],
.post-text[data-readmore].is-expanded {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 2. Botón 'Ver más' / 'Ver devocional completo' Estilizado como Pill Cálido */
.post-replace > a[data-readmore-toggle],
a.dikela-readmore-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

.post-replace > a[data-readmore-toggle]:hover,
a.dikela-readmore-toggle:hover {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.18) !important;
}

.post-replace > a[data-readmore-toggle]:active,
a.dikela-readmore-toggle:active {
  transform: scale(0.97) !important;
}

/* Dark mode para readmore */
body.night-mode .post-replace > a[data-readmore-toggle],
body.night-mode a.dikela-readmore-toggle,
[data-bs-theme="dark"] .post-replace > a[data-readmore-toggle],
[data-bs-theme="dark"] a.dikela-readmore-toggle {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

body.night-mode .post-replace > a[data-readmore-toggle]:hover,
body.night-mode a.dikela-readmore-toggle:hover,
[data-bs-theme="dark"] .post-replace > a[data-readmore-toggle]:hover,
[data-bs-theme="dark"] a.dikela-readmore-toggle:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
}

/* 3. Compresión del Above-The-Fold en Móvil */
@media (max-width: 767px) {
  /* Reducir espacio superior de container en feed móvil */
  .sg-offcanvas.mt20 {
    margin-top: 6px !important;
  }
  
  .dikela-top-verse-container {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }
  
  /* Stories bar compacta */
  .stories-card-container {
    margin-bottom: 8px !important;
  }
  .stories-card-container .card-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  
  /* Tarjeta de bienvenida visitante compacta */
  .dikela-guest-welcome-card { margin-top: 16px !important; }
  
  /* Segment Bar switcher ("Para ti / Siguiendo") compacto */
  .dikela-feed-segment-bar {
    margin-bottom: 8px !important;
    padding: 3px !important;
  }
  .dikela-feed-tab-btn {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* Reducir padding de los posts individuales */
  .post {
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }

  /* Prevenir cualquier rebote o desbordamiento horizontal accidental */
  html, body, .main-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Asegurar que las tarjetas de feed no excedan el ancho de pantalla */
  .post.glass-post-container, .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   FASE 2: NATIVE MOBILE BOTTOM SHEETS & POST CARD TOUCH ERGONOMICS (DIKELA LUMEN)
   - Transforma todos los modales dinámicos en Bottom Sheets nativos tipo iOS/Android
   - Acción de Oración ("Oré por ti") como Hero CTA superior en posts de oración
   - Touch targets >= 44px simétricos en la barra de acciones de publicación
   - Optimización de menús contextuales, popover de reacciones y swipe-down
   ========================================================================== */

@media (max-width: 767px) {
  /* 1. NATIVE BOTTOM SHEETS PARA TODOS LOS MODALES EN MÓVIL */
  .modal:not(.modal-fullscreen) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  .modal:not(.modal-fullscreen):not(.show) {
    display: none !important;
    pointer-events: none !important;
  }

  .modal:not(.modal-fullscreen) .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    align-self: flex-end !important;
  position: relative !important;
    bottom: 0 !important;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    pointer-events: auto !important;
  }

  .modal.show:not(.modal-fullscreen) .modal-dialog {
    transform: translateY(0);
  }

  .modal:not(.modal-fullscreen) .modal-content {
    border-radius: 24px 24px 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22) !important;
    max-height: 86vh !important;
    padding-bottom: calc(var(--dk-safe-bottom, 0px) + 14px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body.night-mode .modal:not(.modal-fullscreen) .modal-content {
    background: #0f172a !important; /* Dikela Sanctuary Slate */
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.65) !important;
  }

  /* Indicador táctil / Manija superior de arrastre (Drag Handle Pill) */
  .modal:not(.modal-fullscreen) .modal-content::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 4px !important;
    background: #cbd5e1 !important;
    margin: 10px auto 4px auto !important;
    flex-shrink: 0 !important;
  }

  body.night-mode .modal:not(.modal-fullscreen) .modal-content::before {
    background: rgba(255, 255, 255, 0.22) !important;
  }

  /* Cabecera del Bottom Sheet */
  .modal:not(.modal-fullscreen) .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 10px 18px 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }

  body.night-mode .modal:not(.modal-fullscreen) .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .modal:not(.modal-fullscreen) .modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
  }

  body.night-mode .modal:not(.modal-fullscreen) .modal-title {
    color: #f8fafc !important;
  }

  /* Botón cerrar en el Bottom Sheet (fácil de tocar) */
  .modal:not(.modal-fullscreen) .modal-header .btn-close,
  .modal:not(.modal-fullscreen) .modal-header .close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.8 !important;
    transition: all 0.15s ease !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  body.night-mode .modal:not(.modal-fullscreen) .modal-header .btn-close,
  body.night-mode .modal:not(.modal-fullscreen) .modal-header .close {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* Cuerpo scrollable del Bottom Sheet */
  .modal:not(.modal-fullscreen) .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    max-height: calc(86vh - 80px - var(--dk-safe-bottom, 0px)) !important;
    padding: 16px 18px !important;
  }

  /* Backdrop con desenfoque de cristal (Glassmorphism) */
  .modal-backdrop.show {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0.65 !important;
  }

  /* 2. POST CARD TOUCH REDESIGN & ACTION BAR (ERGONOMÍA >= 44px) */
  .post-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 8px 6px 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    gap: 4px !important;
  }

  body.night-mode .post-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Botón Hero de Oración ("Oré por ti") cuando es Petición */
  .post-actions .prayer-action-btn {
    width: 100% !important;
    flex: 0 0 100% !important;
    min-height: 48px !important;
    margin-bottom: 6px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25) !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .post-actions .prayer-action-btn:active {
    transform: scale(0.97) !important;
  }

  /* Botones de acción estándar (Bendecir, Comentar, Compartir, WhatsApp) */
  .post-actions > .action-btn:not(.prayer-action-btn) {
    flex: 1 1 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 6px 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: transform 0.12s ease, background 0.12s ease !important;
    background: transparent !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  }

  /* Micro-interacción táctil */
  .post-actions > .action-btn:not(.prayer-action-btn):active {
    transform: scale(0.92) !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  body.night-mode .post-actions > .action-btn:not(.prayer-action-btn):active {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Tamaño unificado y centrado de iconos en la barra */
  .post-actions .action-icon,
  .post-actions svg.action-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 0 !important;
    transition: transform 0.15s ease !important;
  }

  /* Botón directo de WhatsApp en la barra de acciones */
  .post-actions .dikela-post-wa-share svg {
    color: #25d366 !important;
    fill: #25d366 !important;
  }

  .post-actions .dikela-post-wa-share:hover,
  .post-actions .dikela-post-wa-share:active {
    background: rgba(37, 211, 102, 0.12) !important;
  }

  /* Popover flotante de reacciones en móvil: no desbordar horizontalmente */
  .reactions-container {
    left: 4px !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    bottom: calc(100% + 6px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  .reactions-container::-webkit-scrollbar {
    display: none !important;
  }

  /* Hit targets de los emojis de reacción */
  .reactions_item {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  /* 3. MENÚ DE OPCIONES DEL POST Y STATS (TARGETS ERGONÓMICOS) */
  .post-header .post-meta .dropdown-toggle {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #94a3b8 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .post-header .post-meta .dropdown-toggle:active {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
  }

  body.night-mode .post-header .post-meta .dropdown-toggle:active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  /* Stat pills con hit target generoso para abrir Bottom Sheet */
  .post-stats .prayer-stats-pill,
  .post-stats [data-toggle="modal"] {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: rgba(245, 158, 11, 0.08) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .post-stats .prayer-stats-pill:active,
  .post-stats [data-toggle="modal"]:active {
    transform: scale(0.96) !important;
  }
}

@media (max-width: 575px) {
  /* En pantallas móviles estrechas, mantener simetría perfecta ocultando el texto del botón reaccionado */
  .post-actions .reaction-btn-name {
    display: none !important;
  }
}

/* ==========================================================================
   LUMEN SANCTUARY DESIGN SYSTEM (DIKELA BESPOKE IDENTITY)
   - Paleta Sagrada: Alabastro (#fbf9f5), Oro Ámbar (#f59e0b), Índigo Celestial (#1d4ed8)
   - Tipografía Sagrada Dual: Serif 'Lora' para versículos + Sans 'Inter/Outfit' para UI
   - 4 Arquetipos de Tarjeta: Papiro Iluminado, Candelario de Oración, Testimonio de Victoria, Comunidad
   - Header de Cristal Alabastro & Altar de Comunión en el Publicador
   ========================================================================== */

/* 1. LIENZO Y COLORES GLOBALES (ADIÓS AL GRIS CLON FACEBOOK) */
body {
  background-color: #fbf9f5 !important;
  color: #1c1917 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.night-mode {
  background-color: #090d16 !important;
  color: #f8fafc !important;
}

/* 2. BASE DE ELEVACIÓN DE TARJETAS (BORDES ORGÁNICOS Y CALIDEZ) */
.post,
.card,
.panel,
.x-form.publisher,
.stories-card-container,
.dikela-guest-welcome-card { margin-top: 16px !important; }

body.night-mode .post,
body.night-mode .card,
body.night-mode .panel,
body.night-mode .x-form.publisher,
body.night-mode .stories-card-container,
body.night-mode .dikela-guest-welcome-card { margin-top: 16px !important; }

/* 3. CABECERA CRISTAL LUMEN (ALABASTRO DÍA / SANTUARIO NOCHE) */
.main-header {
  background: rgba(251, 249, 245, 0.94) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(217, 119, 6, 0.14) !important;
  box-shadow: 0 4px 20px rgba(28, 25, 23, 0.03) !important;
}

body.night-mode .main-header {
  background: rgba(9, 13, 22, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.15) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.65) !important;
}

/* Acciones en la Cabecera: Tono Ámbar y Oro */
body:not(.night-mode) .main-header .navbar-wrapper > ul > li > a:not(.header-signin-btn):not(.header-guest-signin-btn):not(.user-menu) {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.25) !important;
  color: #b45309 !important;
}

body:not(.night-mode) .main-header .navbar-wrapper > ul > li > a:not(.header-signin-btn):not(.header-guest-signin-btn):not(.user-menu):hover {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #92400e !important;
}

body.night-mode .main-header .navbar-wrapper > ul > li > a:not(.header-signin-btn):not(.header-guest-signin-btn):not(.user-menu) {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

/* Buscador en la cabecera: estilo píldora con aura cálida */
.main-header .search-input {
  border-radius: 50px !important;
  border: 1.5px solid rgba(217, 119, 6, 0.20) !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
}

body:not(.night-mode) .main-header .search-input {
  background: #ffffff !important;
  color: #1c1917 !important;
}

body:not(.night-mode) .main-header .search-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20) !important;
}

body.night-mode .main-header .search-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

body.night-mode .main-header .search-input:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* ==========================================================================
   4 ARQUETIPOS DE TARJETAS CON IDENTIDAD PROPIA (DIKELA SANCTUARY)
   ========================================================================== */

/* 1. ARQUETIPO: ALTAR DE INTERCESIÓN & PETICIÓN DE ORACIÓN */
.post.post-prayer-sanctuary {
  background: linear-gradient(160deg, #ffffff 0%, #fffbf7 100%) !important;
  border: 1.5px solid rgba(225, 86, 55, 0.28) !important;
  border-left: 6px solid #e15637 !important;
  box-shadow: 0 8px 28px rgba(225, 86, 55, 0.10), 0 2px 8px rgba(28, 25, 23, 0.04) !important;
  border-radius: 20px !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.night-mode .post.post-prayer-sanctuary {
  background: linear-gradient(160deg, #0f172a 0%, #1a1622 100%) !important;
  border: 1.5px solid rgba(225, 86, 55, 0.35) !important;
  border-left: 6px solid #fb923c !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(225, 86, 55, 0.15) !important;
}

.prayer-request-top-banner {
  background: linear-gradient(135deg, rgba(225, 86, 55, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%) !important;
  border-bottom: 1px solid rgba(225, 86, 55, 0.20) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 19px 19px 0 0 !important;
}

.prayer-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  color: #c2410c !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.night-mode .prayer-chip {
  color: #fb923c !important;
}

.prayer-callout {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #78716c !important;
}

body.night-mode .prayer-callout {
  color: #94a3b8 !important;
}

.post.post-prayer-sanctuary .post-text,
.post.post-prayer-sanctuary .post-replace {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: #1c1917 !important;
}

body.night-mode .post.post-prayer-sanctuary .post-text,
body.night-mode .post.post-prayer-sanctuary .post-replace {
  color: #f1f5f9 !important;
}

/* 2. ARQUETIPO: DISCIPULADO DIARIO & REFLEXIÓN EDITORIAL */
.post.post-devotional-sanctuary {
  background: linear-gradient(160deg, #ffffff 0%, #f7fdf9 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  border-left: 6px solid #10b981 !important;
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.09), 0 2px 8px rgba(28, 25, 23, 0.04) !important;
  border-radius: 20px !important;
}

body.night-mode .post.post-devotional-sanctuary {
  background: linear-gradient(160deg, #0b1514 0%, #12221d 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-left: 6px solid #34d399 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.12) !important;
}

.devotional-request-top-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.04) 100%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.22) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 19px 19px 0 0 !important;
}

.devotional-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  color: #047857 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.night-mode .devotional-chip {
  color: #34d399 !important;
}

.devotional-callout {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #059669 !important;
}

body.night-mode .devotional-callout {
  color: #6ee7b7 !important;
}

.post.post-devotional-sanctuary .post-text,
.post.post-devotional-sanctuary .post-replace {
  font-size: 1.06rem !important;
  line-height: 1.78 !important;
  color: #0f172a !important;
}

body.night-mode .post.post-devotional-sanctuary .post-text,
body.night-mode .post.post-devotional-sanctuary .post-replace {
  color: #f1f5f9 !important;
}

/* 3. ARQUETIPO: PALABRA VIVA & VERSÍCULO BÍBLICO (PAPIRO ILUMINADO) */
.post.post-scripture-sanctuary,
.dikela-versiculo-card {
  background: linear-gradient(160deg, #ffffff 0%, #fffdf7 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.30) !important;
  border-left: 6px solid #f59e0b !important;
  box-shadow: 0 8px 28px -2px rgba(245, 158, 11, 0.12), 0 2px 8px rgba(28, 25, 23, 0.04) !important;
  border-radius: 20px !important;
  position: relative !important;
}

body.night-mode .post.post-scripture-sanctuary,
body.night-mode .dikela-versiculo-card {
  background: linear-gradient(160deg, #0f172a 0%, #151e30 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-left: 6px solid #fbbf24 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.12) !important;
}

.scripture-request-top-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.05) 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.22) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 19px 19px 0 0 !important;
}

.scripture-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  color: #b45309 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.night-mode .scripture-chip {
  color: #fbbf24 !important;
}

.scripture-callout {
  font-size: 0.78rem !important;
  color: #78716c !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

body.night-mode .scripture-callout {
  color: #94a3b8 !important;
}

/* Tipografía Sagrada Lora para el texto del versículo */
.post.post-scripture-sanctuary .post-text,
.post.post-scripture-sanctuary .post-replace,
.dikela-versiculo-card .dikela-verse-text {
  font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
  font-size: 1.16rem !important;
  line-height: 1.78 !important;
  color: #1c1917 !important;
  letter-spacing: 0.01em !important;
}

body.night-mode .post.post-scripture-sanctuary .post-text,
body.night-mode .post.post-scripture-sanctuary .post-replace,
body.night-mode .dikela-versiculo-card .dikela-verse-text {
  color: #fef3c7 !important;
}

/* 4. ARQUETIPO: TESTIMONIO DE FE & VICTORIA (AZUL CELESTIAL & AGUAS VIVAS) */
.post.post-testimony-sanctuary {
  background: linear-gradient(160deg, #ffffff 0%, #f4f9ff 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.24) !important;
  border-left: 6px solid #0284c7 !important;
  box-shadow: 0 8px 28px rgba(2, 132, 199, 0.09), 0 2px 8px rgba(28, 25, 23, 0.04) !important;
  border-radius: 20px !important;
}

body.night-mode .post.post-testimony-sanctuary {
  background: linear-gradient(160deg, #091322 0%, #0d1e33 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  border-left: 6px solid #38bdf8 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(2, 132, 199, 0.15) !important;
}

.testimony-request-top-banner {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.20) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 19px 19px 0 0 !important;
}

.testimony-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.night-mode .testimony-chip {
  color: #38bdf8 !important;
}

.testimony-callout {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
}

body.night-mode .testimony-callout {
  color: #38bdf8 !important;
}

/* 5. BOTÓN PROMINENTE DE ORACIÓN E INTERCESIÓN */
.prayer-action-btn {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  color: #c2410c !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.prayer-action-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #e15637 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.3) !important;
}

.prayer-action-btn.has-prayed {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3) !important;
}

body.night-mode .prayer-action-btn {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

body.night-mode .prayer-action-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #e15637 100%) !important;
  color: #ffffff !important;
}

body.night-mode .prayer-action-btn.has-prayed {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

/* 6. BOTÓN PROMINENTE DE AMÉN (PROMESAS Y DEVOCIONALES) */
.amen-action-btn {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  color: #047857 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.amen-action-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.amen-action-btn.has-amen {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.3) !important;
}

body.night-mode .amen-action-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

body.night-mode .amen-action-btn:hover,
body.night-mode .amen-action-btn.has-amen {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

/* 7. BOTÓN PROMINENTE DE GLORIA A DIOS (TESTIMONIOS) */
.gloria-action-btn {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  color: #0369a1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.gloria-action-btn:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.gloria-action-btn.has-gloria {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0369a1 !important;
  box-shadow: 0 2px 10px rgba(3, 105, 161, 0.3) !important;
}

body.night-mode .gloria-action-btn {
  background: rgba(2, 132, 199, 0.15) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
  color: #38bdf8 !important;
}

body.night-mode .gloria-action-btn:hover,
body.night-mode .gloria-action-btn.has-gloria {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
}

/* 8. ARQUETIPO: COMUNIDAD & BIENVENIDA */
.post.post-type-comunidad {
  background: var(--dk-surface) !important;
  border: 1.5px solid var(--dk-border) !important;
  border-left: 6px solid var(--dk-comunidad-accent) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  border-radius: 20px !important;
}

body.night-mode .post.post-type-comunidad {
  background: var(--dk-surface) !important;
  border: 1.5px solid var(--dk-border) !important;
  border-left: 6px solid var(--dk-comunidad-accent) !important;
  box-shadow: var(--dk-shadow-md) !important;
}

/* 7. ALTAR DE COMUNIÓN (PUBLICADOR CON IDENTIDAD PROPIA) */
.x-form.publisher {
  border: 1.5px solid rgba(217, 119, 6, 0.18) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px -2px rgba(28, 25, 23, 0.05), 0 2px 8px rgba(217, 119, 6, 0.05) !important;
}

body.night-mode .x-form.publisher {
  border: 1.5px solid rgba(245, 158, 11, 0.22) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Intention-Guided Publisher Selector */
.dikela-publisher-intentions {
  background: rgba(245, 240, 232, 0.45);
  border-bottom: 1px solid var(--dk-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.night-mode .dikela-publisher-intentions {
  background: rgba(18, 22, 30, 0.6);
  border-bottom-color: var(--dk-border);
}

.dikela-intention-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--dk-radius-pill);
  font-size: 0.80rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dk-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dikela-intention-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--dk-text-primary);
}

body.night-mode .dikela-intention-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dk-text-primary);
}

.dikela-intention-btn.active {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text-primary) !important;
  box-shadow: var(--dk-shadow-sm) !important;
}

.dikela-intention-btn.intention-prayer.active {
  background: var(--dk-peticion-bg) !important;
  border-color: var(--dk-peticion-border) !important;
  color: var(--dk-peticion-accent) !important;
}

.dikela-intention-btn.intention-testimony.active {
  background: var(--dk-testimonio-bg) !important;
  border-color: var(--dk-testimonio-border) !important;
  color: var(--dk-testimonio-accent) !important;
}

.dikela-intention-btn.intention-devotional.active {
  background: var(--dk-promesa-bg) !important;
  border-color: var(--dk-promesa-border) !important;
  color: var(--dk-promesa-accent) !important;
}

/* Dynamic Publisher Container Styling by Intention */
.x-form.publisher[data-dikela-intention="prayer"] {
  border-color: var(--dk-peticion-accent) !important;
  box-shadow: 0 8px 30px rgba(201, 122, 61, 0.15) !important;
}

.x-form.publisher[data-dikela-intention="testimony"] {
  border-color: var(--dk-testimonio-accent) !important;
  box-shadow: 0 8px 30px rgba(107, 143, 92, 0.15) !important;
}

.x-form.publisher[data-dikela-intention="devotional"] {
  border-color: var(--dk-promesa-accent) !important;
  box-shadow: 0 8px 30px rgba(91, 124, 153, 0.15) !important;
}

.dikela-quick-tag-pill {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 12px !important;
  background: rgba(225, 86, 55, 0.08) !important;
  border: 1px solid rgba(225, 86, 55, 0.22) !important;
  color: var(--dikela-coral) !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.dikela-quick-tag-pill:hover,
.dikela-quick-tag-pill:active {
  background: var(--dikela-coral) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Etiquetas Específicas del Altar */
.dikela-quick-tag-pill.tag-oracion {
  background: rgba(225, 86, 55, 0.10) !important;
  border-color: rgba(225, 86, 55, 0.30) !important;
  color: #c2410c !important;
}
.dikela-quick-tag-pill.tag-oracion:hover {
  background: #e15637 !important;
  color: #ffffff !important;
}

.dikela-quick-tag-pill.tag-versiculo {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #b45309 !important;
}
.dikela-quick-tag-pill.tag-versiculo:hover {
  background: #f59e0b !important;
  color: #ffffff !important;
}

.dikela-quick-tag-pill.tag-testimonio {
  background: rgba(2, 132, 199, 0.10) !important;
  border-color: rgba(2, 132, 199, 0.30) !important;
  color: #0369a1 !important;
}
.dikela-quick-tag-pill.tag-testimonio:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.dikela-quick-tag-pill.tag-alabanza {
  background: rgba(190, 24, 93, 0.10) !important;
  border-color: rgba(190, 24, 93, 0.30) !important;
  color: #9d174d !important;
}
.dikela-quick-tag-pill.tag-alabanza:hover {
  background: #be185d !important;
  color: #ffffff !important;
}

.dikela-quick-tag-pill.tag-familia {
  background: rgba(217, 119, 6, 0.10) !important;
  border-color: rgba(217, 119, 6, 0.30) !important;
  color: #9a3412 !important;
}
.dikela-quick-tag-pill.tag-familia:hover {
  background: #d97706 !important;
  color: #ffffff !important;
}

.dikela-quick-tag-pill.tag-discipulado {
  background: rgba(22, 163, 74, 0.10) !important;
  border-color: rgba(22, 163, 74, 0.30) !important;
  color: #15803d !important;
}
.dikela-quick-tag-pill.tag-discipulado:hover {
  background: #16a34a !important;
  color: #ffffff !important;
}

body.night-mode .dikela-quick-tag-pill {
  background: rgba(225, 86, 55, 0.16) !important;
  border-color: rgba(225, 86, 55, 0.35) !important;
  color: #fb923c !important;
}

body.night-mode .dikela-quick-tag-pill.tag-versiculo {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #fbbf24 !important;
}

body.night-mode .dikela-quick-tag-pill.tag-testimonio {
  background: rgba(2, 132, 199, 0.18) !important;
  border-color: rgba(2, 132, 199, 0.40) !important;
  color: #38bdf8 !important;
}

/* 8. BARRA INFERIOR MÓVIL: IDENTIDAD TRÍADA DIKELA */
@media (max-width: 767px) {
  body:not(.night-mode) .footer-bottom-bar {
    background: rgba(252, 251, 248, 0.96) !important;
    border-top: 1.5px solid rgba(225, 86, 55, 0.16) !important;
    box-shadow: 0 -4px 20px rgba(28, 25, 23, 0.05) !important;
  }

  body.night-mode .footer-bottom-bar {
    background: rgba(8, 12, 20, 0.95) !important;
    border-top: 1.5px solid rgba(225, 86, 55, 0.20) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.7) !important;
  }

  /* Elemento Activo en Navegación */
  body:not(.night-mode) .footer-bottom-bar-links .link.active a,
  body:not(.night-mode) .k-nav-item.active {
    color: var(--dikela-coral) !important;
  }
  body:not(.night-mode) .footer-bottom-bar-links .link.active .title,
  body:not(.night-mode) .k-nav-item.active .k-nav-label {
    color: var(--dikela-coral) !important;
    font-weight: 700 !important;
  }

  body.night-mode .footer-bottom-bar-links .link.active a,
  body.night-mode .k-nav-item.active {
    color: #fbbf24 !important;
  }
  body.night-mode .footer-bottom-bar-links .link.active .title,
  body.night-mode .k-nav-item.active .k-nav-label {
    color: #fbbf24 !important;
    font-weight: 700 !important;
  }

  /* Botón central (+): Tríada Oficial Dikela */
  .k-center-create-btn {
    background: linear-gradient(135deg, #e15637 0%, #f59e0b 50%, #0284c7 100%) !important;
    box-shadow: 0 4px 18px rgba(225, 86, 55, 0.42), 0 0 0 3px #ffffff !important;
    color: #ffffff !important;
  }
  body.night-mode .k-center-create-btn {
    box-shadow: 0 4px 18px rgba(225, 86, 55, 0.48), 0 0 0 3px #080c14 !important;
  }
}

/* 9. REFLEXIÓN DEVOCIONAL & DISCIPULADO CON TIPOGRAFÍA EDITORIAL */
.dikela-reflection-text {
  font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
  color: #292524 !important;
}

body.night-mode .dikela-reflection-text {
  color: #e2e8f0 !important;
}

.dikela-verse-ref-header strong {
  font-family: 'Outfit', sans-serif !important;
  color: #b45309 !important;
  letter-spacing: 0.02em !important;
}

/* 10. INSIGNIA PASTORAL IA & TRANSPARENCIA (LUIS FERROL) */
.badge-ia-pastoral {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(245, 158, 11, 0.10) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.32) !important;
  color: #065f46 !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.10) !important;
}

body.night-mode .badge-ia-pastoral {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
}

body.night-mode .dikela-verse-ref-header strong {
  color: #fbbf24 !important;
}

/* 10. DIKELA EMPTY STATE ESPIRITUAL */
.dikela-empty-state {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px dashed rgba(225, 86, 55, 0.22);
}

body.night-mode .dikela-empty-state {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(245, 158, 11, 0.2);
}

.dikela-empty-state-aura {
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(225, 86, 55, 0.08) 65%, transparent 75%);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.15);
  transition: transform 0.3s ease;
}

.dikela-empty-state:hover .dikela-empty-state-aura {
  transform: scale(1.08);
}

.dikela-empty-emoji {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(225, 86, 55, 0.25));
}

body.night-mode .dikela-empty-title {
  color: #f1f5f9 !important;
}

/* 11. DIKELA CELESTIAL AURORA: .page-header Modernization */
.page-header {
  background: linear-gradient(135deg, #080c14 0%, #0f172a 35%, #1e1b4b 70%, #2e1025 100%) !important;
  position: relative !important;
  border-bottom: 2.5px solid transparent !important;
  border-image: linear-gradient(90deg, #e15637, #f59e0b, #0284c7) 1 !important;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 30%, rgba(225, 86, 55, 0.18) 0%, transparent 45%),
              radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 45%);
  pointer-events: none;
}

.page-header h2 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #ffffff 0%, #fed7aa 60%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.page-header p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.95rem !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-header .circle-1,
.page-header .circle-2,
.page-header .circle-3 {
  opacity: 0.12 !important;
  filter: blur(40px) !important;
  background: radial-gradient(circle, #f59e0b, #e15637) !important;
}

/* 12. UNREAD NOTIFICATIONS & PRAYER REQUESTS: AURA DIKELA */
.feeds-item.unread,
.feeds-action-item.unread {
  background: rgba(225, 86, 55, 0.05) !important;
  border-left: 3px solid #e15637 !important;
  transition: background 0.2s ease;
}

body.night-mode .feeds-item.unread,
body.night-mode .feeds-action-item.unread {
  background: rgba(225, 86, 55, 0.1) !important;
  border-left: 3px solid #f59e0b !important;
}

.feeds-item.unread:hover,
.feeds-action-item.unread:hover {
  background: rgba(225, 86, 55, 0.08) !important;
}

/* 13. NOTIFICATION COUNTER BADGE */
.main-header .navbar-wrapper .counter {
  background: linear-gradient(135deg, #e15637, #ea580c) !important;
  box-shadow: 0 2px 6px rgba(225, 86, 55, 0.45) !important;
}

/* ========================================================
   DIKELA SIGNATURE REDESIGN: PUBLISHER & POST CARDS
   Bespoke, World-Class Social Experience (Anti-Prefabricado)
   ======================================================== */

/* --- A. EL PUBLICADOR (ALTAR DE COMUNIÓN) --- */
.x-form.publisher,
#publisher-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 20px !important;
}

body.night-mode .x-form.publisher,
body.night-mode #publisher-box {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Zona de Mensaje y Avatar */
.publisher-message {
  padding: 16px 18px 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.publisher-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
}

body.night-mode .publisher-avatar {
  border-color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.publisher-message .colored-text-wrapper {
  flex: 1 1 auto !important;
}

.publisher textarea:not(.form-control) {
  width: 100% !important;
  min-height: 48px !important;
  padding: 6px 4px !important;
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  resize: none !important;
  outline: none !important;
  font-family: inherit !important;
}

body.night-mode .publisher textarea:not(.form-control) {
  color: #f1f5f9 !important;
}

.publisher textarea:not(.form-control)::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.publisher-emojis {
  padding-top: 6px !important;
}

.publisher-emojis i {
  color: #94a3b8 !important;
  font-size: 1.25rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.publisher-emojis i:hover {
  color: #f59e0b !important;
  transform: scale(1.15) !important;
}

/* Barra de Chips Rápidos de Acción */
.dikela-publisher-quick-bar {
  padding: 8px 16px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .dikela-publisher-quick-bar {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

.dikela-pub-action-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

.dikela-pub-action-chip:hover {
  transform: translateY(-1px) !important;
}

.dikela-pub-action-chip:active {
  transform: scale(0.96) !important;
}

.dikela-pub-chip-photo {
  background: rgba(2, 132, 199, 0.09) !important;
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.22) !important;
}
.dikela-pub-chip-photo:hover {
  background: rgba(2, 132, 199, 0.16) !important;
}

.dikela-pub-chip-prayer {
  background: rgba(147, 51, 234, 0.09) !important;
  color: #9333ea !important;
  border-color: rgba(147, 51, 234, 0.22) !important;
}
.dikela-pub-chip-prayer:hover {
  background: rgba(147, 51, 234, 0.16) !important;
}

.dikela-pub-chip-voice {
  background: rgba(16, 185, 129, 0.09) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}
.dikela-pub-chip-voice:hover {
  background: rgba(16, 185, 129, 0.16) !important;
}

.dikela-pub-chip-live {
  background: rgba(239, 68, 68, 0.09) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}
.dikela-pub-chip-live:hover {
  background: rgba(239, 68, 68, 0.16) !important;
}

.dikela-pub-chip-feeling {
  background: rgba(245, 158, 11, 0.09) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}
.dikela-pub-chip-feeling:hover {
  background: rgba(245, 158, 11, 0.16) !important;
}

/* Pie del Publicador */
.publisher-footer {
  padding: 10px 16px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 0 0 20px 20px !important;
}

body.night-mode .publisher-footer {
  background: rgba(15, 23, 42, 0.95) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.publisher-footer .js_publisher-privacy button {
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

body.night-mode .publisher-footer .js_publisher-privacy button {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

.publisher-footer .js_publisher-btn {
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 7px 22px !important;
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.publisher-footer .js_publisher-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(225, 86, 55, 0.45) !important;
}

.publisher-footer .js_publisher-btn:active {
  transform: scale(0.96) !important;
}

/* --- B. TARJETAS DE PUBLICACIÓN (EL FEED) --- */
.post,
.post.glass-post-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post:hover {
  box-shadow: 0 8px 26px -2px rgba(15, 23, 42, 0.07), 0 3px 8px -1px rgba(15, 23, 42, 0.03) !important;
}

body.night-mode .post,
body.night-mode .post.glass-post-container {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

body.night-mode .post:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7) !important;
}

/* Cabecera del Post (Avatar + Autor + Fecha + Menú) */
.post-header {
  padding: 16px 18px 0 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  position: relative !important;
}

.post-avatar {
  display: block !important;
  position: relative !important;
  padding-right: 0 !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
}

.post-avatar-picture {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  padding-top: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: block !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}

.post-avatar-picture:hover {
  opacity: 0.9 !important;
  transform: none !important;
}

body.night-mode .post-avatar-picture {
  border-color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Post Meta (Nombre a la izquierda, Menú 3 puntos a la derecha) */
.post-meta {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  padding: 0 !important;
}

.post-meta .dropdown,
.post-meta .float-end {
  float: right !important;
  margin-left: 8px !important;
  position: relative !important;
}

.post-author {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.post-author a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.post-author a:hover {
  color: #e15637 !important;
  text-decoration: none !important;
}

body.night-mode .post-author a {
  color: #f8fafc !important;
}

body.night-mode .post-author a:hover {
  color: #fb923c !important;
}

.post-time {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 3px !important;
}

.post-time a {
  color: #94a3b8 !important;
  text-decoration: none !important;
}

.post-time a:hover {
  color: #64748b !important;
  text-decoration: underline !important;
}

/* Botón 3 Puntos Moderno */
.post-meta .dropdown-toggle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  transform: none !important;
}

.post-meta .dropdown-toggle:hover,
.post-meta .dropdown-toggle.show {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  transform: none !important;
}

body.night-mode .post-meta .dropdown-toggle:hover,
body.night-mode .post-meta .dropdown-toggle.show {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  transform: none !important;
}

.post-meta .dropdown-toggle i {
  font-size: 1rem !important;
}

.action-dropdown-menu {
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
}

body.night-mode .action-dropdown-menu {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Texto del Post */
.post-text {
  padding: 0 18px !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  color: #1e293b !important;
}

body.night-mode .post-text {
  color: #e2e8f0 !important;
}

.post-text a {
  color: #e15637 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.post-text a:hover {
  text-decoration: underline !important;
}

/* Media y Fotos en Post */
.post-media-meta,
.post-media,
.pg_wrapper {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Barra de Acciones del Post */
.post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: transparent !important;
}

body.night-mode .post-actions {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.post-actions .action-btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  color: #64748b !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.post-actions .action-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

.post-actions .action-btn:active {
  transform: scale(0.95) !important;
}

body.night-mode .post-actions .action-btn {
  color: #94a3b8 !important;
}

body.night-mode .post-actions .action-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
}

/* Colores Dinámicos en Hover de Acciones */
.post-actions .reactions-wrapper:hover {
  color: #e15637 !important;
  background: rgba(225, 86, 55, 0.07) !important;
}

.post-actions .js_comment:hover {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.07) !important;
}

.post-actions .js_share-native:hover {
  color: #8b5cf6 !important;
  background: rgba(139, 92, 246, 0.07) !important;
}

.post-actions .dikela-post-wa-share:hover {
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.07) !important;
}

.post-actions .action-icon,
.post-actions svg.action-icon {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.post-actions .action-btn:hover .action-icon,
.post-actions .action-btn:hover svg.action-icon {
  transform: scale(1.18) !important;
}

/* Barra de Estadísticas de Reacciones / Comentarios */
.post-stats {
  padding: 10px 18px 8px !important;
  font-size: 0.80rem !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.night-mode .post-stats {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

/* Sección de Comentarios */
.post-footer {
  background: rgba(248, 250, 252, 0.85) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 0 20px 20px !important;
  padding: 12px 18px 16px !important;
}

body.night-mode .post-footer {
  background: rgba(15, 23, 42, 0.75) !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

.comment-form textarea {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.comment-form textarea:focus {
  border-color: rgba(225, 86, 55, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(225, 86, 55, 0.1) !important;
}

body.night-mode .comment-form textarea {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

.dikela-quick-reply-pill {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(225, 86, 55, 0.08) !important;
  border: 1px solid rgba(225, 86, 55, 0.18) !important;
  color: #e15637 !important;
  transition: all 0.15s ease !important;
}

.dikela-quick-reply-pill:hover {
  background: #e15637 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Fix floating staging button overlapping publisher (cursor flutter fix) */
.posts-staging-btn {
  top: 90px !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 12px rgba(225, 86, 55, 0.4) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 20px !important;
  border-radius: 20px !important;
  font-weight: bold !important;
  z-index: 1010 !important;
}

body.publisher-focus .posts-staging-btn {
  pointer-events: none !important; /* Prevent interaction when publisher is focused */
  opacity: 0 !important; /* Hide it when writing a post to avoid visual clutter */
}

/* ==========================================================================
   DIKELA 1-TAP QUICK ENCOURAGEMENT BAR (COLD START BREAKER)
   ========================================================================== */
.dikela-card-quick-replies {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 10px !important;
  background: rgba(251, 249, 245, 0.75) !important;
  border-top: 1px dashed rgba(225, 86, 55, 0.15) !important;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}

body.night-mode .dikela-card-quick-replies {
  background: rgba(15, 23, 42, 0.55) !important;
  border-top-color: rgba(225, 86, 55, 0.22) !important;
}

.dikela-quick-reply-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #8c7b70 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.night-mode .dikela-quick-reply-label {
  color: #94a3b8 !important;
}

.dikela-quick-pills-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 0 !important;
  flex: 1 !important;
}

.dikela-quick-pills-scroll::-webkit-scrollbar {
  display: none !important;
}

.dikela-quick-pill {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(225, 86, 55, 0.22) !important;
  color: #4a3427 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
}

.dikela-quick-pill:hover {
  background: #e15637 !important;
  color: #ffffff !important;
  border-color: #e15637 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 10px rgba(225, 86, 55, 0.25) !important;
}

.dikela-quick-pill.is-sending {
  opacity: 0.65 !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

.dikela-quick-pill.is-done {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3) !important;
}

body.night-mode .dikela-quick-pill {
  background: #1e293b !important;
  border-color: rgba(225, 86, 55, 0.35) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .dikela-quick-pill:hover {
  background: #e15637 !important;
  color: #ffffff !important;
  border-color: #e15637 !important;
}

/* ==========================================================================
   DIKELA MODO SANTUARIO (DEVOTIONAL READER)
   ========================================================================== */
.dikela-santuario-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dikela-santuario-btn {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #9a3412 !important;
  background: rgba(254, 243, 199, 0.6) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.dikela-santuario-btn:hover {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
  border-color: #e15637 !important;
  box-shadow: 0 3px 10px rgba(225, 86, 55, 0.28) !important;
  transform: translateY(-1px) !important;
}

body.night-mode .dikela-santuario-btn {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.dikela-sanctuary-modal .modal-content {
  border-radius: 24px !important;
  border: 1px solid rgba(225, 86, 55, 0.2) !important;
  background: #fdfbf7 !important; /* Warm parchment default */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.3s ease, color 0.3s ease;
}

.dikela-sanctuary-modal.sanctuary-theme-dark .modal-content {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

.dikela-sanctuary-modal.sanctuary-theme-dark .modal-header,
.dikela-sanctuary-modal.sanctuary-theme-dark .modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(15, 23, 42, 0.8) !important;
}

.dikela-sanctuary-modal.sanctuary-theme-dark .dikela-sanctuary-reading-text {
  color: #e2e8f0 !important;
}

.dikela-sanctuary-modal.sanctuary-theme-dark #sanctuary-author-name {
  color: #f8fafc !important;
}

.dikela-sanctuary-header {
  background: rgba(254, 243, 199, 0.3) !important;
  border-bottom: 1px solid rgba(225, 86, 55, 0.12) !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 14px 20px !important;
}

.sanctuary-halo-icon {
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(225, 86, 55, 0.1);
  padding: 6px 10px;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.sanctuary-tool-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 5px 10px !important;
  transition: all 0.15s ease !important;
}

.sanctuary-tool-btn:hover {
  background: #e15637 !important;
  color: #ffffff !important;
  border-color: #e15637 !important;
}

.sanctuary-tool-btn.is-speaking {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  animation: pulse-green 1.2s infinite;
}

.dikela-sanctuary-reading-text {
  letter-spacing: 0.2px;
  word-break: break-word;
}

.dikela-sanctuary-reading-text p {
  margin-bottom: 1.4em !important;
}

.dikela-sanctuary-footer {
  background: rgba(254, 243, 199, 0.2) !important;
  border-top: 1px solid rgba(225, 86, 55, 0.12) !important;
  border-radius: 0 0 24px 24px !important;
}

/* ==========================================================================
   DIKELA BESPOKE SANCTUARY IDENTITY & NON-FACEBOOK ARCHITECTURE
   ========================================================================== */

/* 1. Universal Card Sophistication & Depth */
.post,
.card,
.main-side-nav-card {
  border-radius: 22px !important;
  border: 1px solid rgba(225, 86, 55, 0.10) !important;
  box-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(225, 86, 55, 0.04) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px -4px rgba(225, 86, 55, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(225, 86, 55, 0.22) !important;
}

body.night-mode .post,
body.night-mode .card,
body.night-mode .main-side-nav-card {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

body.night-mode .post:hover {
  border-color: rgba(225, 86, 55, 0.35) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.6), 0 0 20px rgba(225, 86, 55, 0.12) !important;
}

/* 2. Post Author & Spiritual Presence */
.post-header {
  padding: 16px 18px 10px !important;
}

.post-avatar-picture {
  border: 2px solid rgba(225, 86, 55, 0.35) !important;
  box-shadow: 0 2px 8px rgba(225, 86, 55, 0.18) !important;
  transition: transform 0.2s ease !important;
}

.post-avatar-picture:hover {
  transform: scale(1.06) !important;
  border-color: #e15637 !important;
}

.post-author {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.96rem !important;
  color: #1e293b !important;
  transition: color 0.15s ease !important;
}

body.night-mode .post-author {
  color: #f8fafc !important;
}

.post-author:hover {
  color: #e15637 !important;
}

/* 3. Post Text & Typography */
.post-text {
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
  color: #334155 !important;
  padding: 2px 18px 12px !important;
}

body.night-mode .post-text {
  color: #e2e8f0 !important;
}

/* 4. Glassmorphism Reactions Drawer */
.reactions-container {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1.5px solid rgba(225, 86, 55, 0.25) !important;
  border-radius: 50px !important;
  box-shadow: 0 16px 45px rgba(225, 86, 55, 0.22), 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 12px !important;
}

body.night-mode .reactions-container {
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(225, 86, 55, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(225, 86, 55, 0.2) !important;
}

.reactions-container .reactions_item {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.reactions-container .reactions_item:hover {
  transform: scale(1.38) translateY(-6px) !important;
}

/* 5. Clean Modern Buttons */
.btn-primary,
.btn-main {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.btn-main:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 22px rgba(225, 86, 55, 0.45) !important;
  filter: brightness(1.05) !important;
}

/* ==========================================================================
   DIKELA VISUAL REFINEMENT & FEED ERGONOMICS (ESTÉTICA Y ANCHO DE TEXTO)
   ========================================================================== */

/* 1. Ocultar icono cortado/defectuoso de publicaciones destacadas */
.post .boosted-icon,
.boosted-icon {
  display: none !important;
}

/* 2. Eliminar tarjeta interna en Altar de Intercesión para maximizar ancho de texto */
.prayer-request-top-banner,
.devotional-request-top-banner,
.scripture-request-top-banner,
.testimony-request-top-banner {
  display: none !important;
}

/* 3. Barra inferior: Iniciar sesión estrictamente en gris neutro */
.k-nav-item.k-nav-item-signin,
.k-nav-item.k-nav-item-signin .k-nav-icon,
.k-nav-item.k-nav-item-signin .k-nav-label {
  color: #64748b !important;
}

/* 4. Estilos de post limpios, sin doble margen en móvil */
@media (max-width: 767px) {
  .post,
  .post.glass-post-container {
    padding: 0 !important;
    margin-bottom: 14px !important;
  }
  .post-header {
    padding: 14px 16px 8px !important;
  }
  .post-body {
    padding: 0 16px 12px !important;
  }
  .post-text {
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
    letter-spacing: -0.01em !important;
  }
}

/* ==========================================================================
   5. TARJETA COMPACTA DE BIENVENIDA / REGISTRO PARA VISITANTES
   ========================================================================== */
.dikela-guest-welcome-card { margin-top: 16px !important; }

.dikela-guest-welcome-card .card-body {
  padding: 14px 16px !important;
}

.dikela-welcome-title {
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
  text-align: center !important;
}

.dikela-welcome-subtitle {
  font-size: 0.82rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.dikela-auth-btn {
  height: 44px !important;
  min-height: 44px !important;
  background: #ffffff !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 12px !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.dikela-auth-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.dikela-auth-btn:active {
  transform: scale(0.98) !important;
}

/* Modo oscuro para tarjeta de bienvenida */
body.night-mode .dikela-guest-welcome-card { margin-top: 16px !important; }
body.night-mode .dikela-welcome-title {
  color: #f1f5f9 !important;
}
body.night-mode .dikela-welcome-subtitle {
  color: #94a3b8 !important;
}
body.night-mode .dikela-auth-btn {
  background: #252e3e !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.night-mode .dikela-auth-btn:hover {
  background: #2d3748 !important;
}

/* ==========================================================================
   6. DIKELA MOBILE QUICK ACCESS PILLS
   ========================================================================== */
.dikela-mobile-quick-access {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.quick-access-scroll-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 6px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}

.quick-access-scroll-track::-webkit-scrollbar {
  display: none;
}

.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 9999px;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  cursor: pointer;
  outline: none !important;
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

body.night-mode .quick-pill {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.quick-pill:active {
  transform: scale(0.96);
}

.pill-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: #f1f5f9;
  color: #475569;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

body.night-mode .pill-icon-box {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.pill-icon-live {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

body.night-mode .pill-icon-live {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

.pill-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  margin-left: -2px;
}

.pill-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

body.night-mode .pill-title {
  color: #e2e8f0;
}

/* ==========================================================================
   7. DIKELA FEED SEGMENT BAR & TABS
   ========================================================================== */
.dikela-feed-segment-bar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.night-mode .dikela-feed-segment-bar,
[data-bs-theme="dark"] .dikela-feed-segment-bar {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.night-mode .dikela-feed-segment-bar .text-muted,
[data-bs-theme="dark"] .dikela-feed-segment-bar .text-muted {
  color: #cbd5e1 !important;
}

.dikela-feed-tab-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none !important;
  font-size: 0.92rem;
}

.dikela-feed-tab-btn.active {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.35) !important;
  font-weight: 700 !important;
}

.dikela-feed-tab-btn:not(.active):hover {
  background: rgba(225, 86, 55, 0.08);
  color: #e15637 !important;
}

.night-mode .dikela-feed-tab-btn:not(.active):hover,
[data-bs-theme="dark"] .dikela-feed-tab-btn:not(.active):hover {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24 !important;
}

/* ==========================================================================
   8. JQUERY UI TOOLTIP REFINEMENT & ACCESSIBILITY GUARD
   ========================================================================== */
.ui-helper-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.ui-tooltip {
  position: absolute !important;
  z-index: 99999 !important;
  max-width: 280px !important;
  width: auto !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  pointer-events: none !important;
}

.ui-tooltip-content {
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
}

/* ==========================================================================
   9. COOKIE CONSENT BANNER REFINEMENT (DIKELA WARM BRANDING & MOBILE CLEARANCE)
   ========================================================================== */
.cc-window.cc-floating {
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 18px !important;
  max-width: 400px !important;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.cc-window.cc-floating .cc-message {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
  color: #f1f5f9 !important;
}

.cc-window.cc-floating .cc-link {
  color: #f59e0b !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.cc-window.cc-floating .cc-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 12px rgba(225, 86, 55, 0.35) !important;
  transition: transform 0.15s ease !important;
}

.cc-window.cc-floating .cc-btn:active {
  transform: scale(0.96) !important;
}

@media (max-width: 767px) {
  .cc-window.cc-floating {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--dk-bottom-nav-h, 58px) + 8px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    z-index: 1030 !important;
    padding: 7px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  }
  .cc-window.cc-floating .cc-message {
    font-size: 0.70rem !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
    flex: 1 !important;
    color: #f8fafc !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 2.6em !important;
  }
  .cc-window.cc-floating .cc-btn {
    padding: 5px 14px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    width: auto !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   DIKELA CHAT - WHATSAPP / TELEGRAM DOUBLE CHECK STATUS SYSTEM
   ========================================================================== */

/* Time container in sent messages (right-aligned) */
.conversation.right .conversation-body .time {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
}

/* Chat status check container */
.chat-status-checks {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  line-height: 1;
  vertical-align: middle;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State 1: 1 Check Gris (✓) - Enviado al servidor */
.chat-status-checks.sending i,
.chat-status-checks.sending .fa-check {
  color: #94a3b8 !important;
  font-size: 10px !important;
  opacity: 0.85;
}

/* State 2: 2 Checks Grises (✓✓) - Entregado al dispositivo del receptor */
.chat-status-checks.delivered i,
.chat-status-checks.delivered .fa-check-double {
  color: #64748b !important;
  font-size: 11px !important;
  opacity: 0.9;
}

/* State 3: 2 Checks Azules (✓✓) - Leído en tiempo real (event_server_seen) */
.chat-status-checks.seen i,
.chat-status-checks.seen .fa-check-double {
  color: #0284c7 !important;
  font-size: 11px !important;
  text-shadow: 0 0 6px rgba(2, 132, 199, 0.4);
  transform: scale(1.05);
  animation: dikelaSeenPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dikelaSeenPop {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Night Mode adjustments */
body.night-mode .chat-status-checks.sending i {
  color: #64748b !important;
}

body.night-mode .chat-status-checks.delivered i {
  color: #94a3b8 !important;
}

body.night-mode .chat-status-checks.seen i,
body.night-mode .chat-status-checks.seen .fa-check-double {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* Dikela Chat Web Push Banner */
#dikela-chat-push-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(3, 105, 161, 0.08)) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.night-mode #dikela-chat-push-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.6)) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

/* ==========================================================================
   ESFERA FLOTANTE CHAT DIKELA Y PANEL EN VIVO (NO INVASIVO)
   ========================================================================== */

#dikela-chat-orb-wrapper {
  display: flex !important;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 12px;
  pointer-events: none;
}

#dikela-chat-orb {
  pointer-events: auto;
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: 0;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#dikela-chat-orb:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.6);
}

#dikela-chat-orb:active {
  transform: scale(0.94);
}

.dikela-orb-icon {
  font-size: 22px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Pulso de actividad en vivo (cuando hay gente chateando) */
.dikela-orb-pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}

.dikela-orb-pulse-ring.active {
  border-color: #22c55e;
  animation: dikelaLivePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes dikelaLivePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Badge de no leídos */
.dikela-orb-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  animation: dikelaBadgePop 0.3s ease-out;
}

@keyframes dikelaBadgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Teaser flotante que anuncia el mensaje reciente */
.dikela-orb-teaser {
  pointer-events: auto;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 8px 12px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  max-width: 270px;
  cursor: pointer;
  transform: translateX(10px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dikela-orb-teaser.visible {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}

.dikela-orb-teaser img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #38bdf8;
  flex-shrink: 0;
}

.dikela-orb-teaser-content {
  flex: 1;
  min-width: 0;
}

.dikela-orb-teaser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.dikela-orb-teaser-author {
  font-size: 0.78rem;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dikela-orb-teaser-live {
  font-size: 0.65rem;
  color: #22c55e;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.dikela-orb-teaser-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.dikela-orb-teaser-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
}
.dikela-orb-teaser-close:hover {
  color: #ffffff;
}

/* Panel Desplegable de Chat Dikela */
.dikela-chat-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.dikela-chat-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.dikela-chat-panel-header {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 19px;
  border-top-right-radius: 19px;
}

.dikela-chat-panel-notice {
  background: rgba(56, 189, 248, 0.08);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  font-size: 0.72rem;
  color: var(--dk-text-secondary, #64748b);
  padding: 6px 14px;
  display: flex;
  align-items: center;
}

.dikela-chat-panel-body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  background: #f8fafc;
}

.dikela-online-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #10b981;
  animation: dikelaDotPulse 2s infinite ease-in-out;
}
@keyframes dikelaDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.dikela-chat-typing {
  padding: 5px 14px;
  font-size: 0.73rem;
  color: #0284c7;
  background: rgba(240, 249, 255, 0.95);
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.dikela-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
}

.dikela-typing-dot {
  width: 4px;
  height: 4px;
  background: #0284c7;
  border-radius: 50%;
  animation: dikelaTypingWave 1.4s infinite ease-in-out both;
}
.dikela-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.dikela-typing-dot:nth-child(2) { animation-delay: -0.16s; }
.dikela-typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes dikelaTypingWave {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.15); opacity: 1; }
}

/* Botón Flotante 'Nuevos Mensajes' */
.dikela-scroll-bottom-btn {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1035;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.74rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: dikelaSlideFadeUp 0.3s ease-out;
}
.dikela-scroll-bottom-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.6);
}
@keyframes dikelaSlideFadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Botón Enviar Cooldown */
#dikela-chat-send-btn.is-cooldown {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  cursor: not-allowed !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.dikela-chat-panel-footer {
  padding: 10px 14px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

/* Night Mode para el Panel de Chat Dikela */
body.night-mode .dikela-chat-panel {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

body.night-mode .dikela-chat-panel-body {
  background: #0b1120 !important;
}

body.night-mode .dikela-chat-panel-notice {
  background: rgba(15, 23, 42, 0.6) !important;
  border-bottom-color: rgba(56, 189, 248, 0.2) !important;
  color: #94a3b8 !important;
}

body.night-mode .dikela-chat-panel-footer {
  background: #0f172a !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.night-mode #dikela-chat-input {
  background: #1e293b !important;
  color: #f8fafc !important;
}

body.night-mode .dikela-chat-guest-cta {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-top-color: rgba(56, 189, 248, 0.25) !important;
}
body.night-mode .dikela-chat-guest-cta strong {
  color: #38bdf8 !important;
}
body.night-mode .dikela-chat-guest-cta p {
  color: #94a3b8 !important;
}

body.night-mode .dikela-chat-typing {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-top-color: #334155 !important;
}

body.night-mode .dikela-typing-dot {
  background: #38bdf8 !important;
}

body.night-mode .dikela-scroll-bottom-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Responsive Móvil: No tapar la barra inferior ni botones vitales */
@media (max-width: 767.98px) {
  #dikela-chat-orb-wrapper {
  display: flex !important;
    bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 14px !important;
  }

  #dikela-chat-orb {
    width: 48px !important;
    height: 48px !important;
  }

  .dikela-orb-icon {
    font-size: 19px !important;
  }

  .dikela-orb-teaser {
    max-width: 220px !important;
    padding: 6px 10px !important;
  }

  .dikela-chat-panel {
    right: 12px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    height: calc(100dvh - 165px) !important;
    max-height: 480px !important;
  }

  /* Si la radio está activa en móvil, subir el orbe para evitar superposición */
  body:has(#kethane-radio-miniplayer.is-playing) #dikela-chat-orb-wrapper,
  body:has(#kethane-radio-miniplayer.is-active) #dikela-chat-orb-wrapper {
  display: flex !important;
    bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 72px) !important;
  }

  /* Si el Smart Banner PWA está visible en móvil, silenciar teaser y elevar el orbe */
  body:has(#dikelaPwaSmartBanner[style*="block"]) #dikela-orb-teaser,
  body:has(#dikelaPwaSmartBanner:not([style*="none"]):not([style*="display: none"])) #dikela-orb-teaser {
    display: none !important;
  }
  body:has(#dikelaPwaSmartBanner[style*="block"]) #dikela-chat-orb-wrapper,
  body:has(#dikelaPwaSmartBanner:not([style*="none"]):not([style*="display: none"])) #dikela-chat-orb-wrapper {
  display: flex !important;
    bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
}

/* ==========================================================================
   BANDA Y BANDEJA DE EMOJIS CRISTIANOS (CHAT DIKELA)
   ========================================================================== */

/* Banda Rápida Horizontal */
.dikela-christian-quickbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(248, 250, 252, 0.95);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dikela-christian-quickbar::-webkit-scrollbar {
  display: none;
}

.btn-quick-emoji {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}
.btn-quick-emoji:hover {
  transform: scale(1.25);
  background: rgba(56, 189, 248, 0.15);
}
.btn-quick-emoji:active {
  transform: scale(0.9);
}

.btn-quick-pill {
  font-size: 11px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.12);
  color: #0369a1;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

/* Bandeja Extendida de Emojis Cristianos (Popout Tray) */
.dikela-christian-picker-tray {
  position: absolute;
  bottom: 95px;
  left: 12px;
  right: 12px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 12px;
  z-index: 1050;
  max-height: 250px;
  overflow-y: auto;
  animation: fadeInDown 0.2s ease-out;
}

.btn-ce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-ce:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
  transform: scale(1.04);
}
.btn-ce .ce-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

.btn-ce-phrase {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(3, 105, 161, 0.06));
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: #0284c7;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-ce-phrase:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* Night Mode para Chat Dikela Completo */
body.night-mode .dikela-chat-panel,
[data-bs-theme="dark"] .dikela-chat-panel {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

body.night-mode .dikela-chat-panel-notice,
[data-bs-theme="dark"] .dikela-chat-panel-notice {
  background: rgba(30, 41, 59, 0.7) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

body.night-mode .dikela-chat-panel-body,
[data-bs-theme="dark"] .dikela-chat-panel-body {
  background: #090d16 !important;
}

body.night-mode .dikela-chat-panel-footer,
[data-bs-theme="dark"] .dikela-chat-panel-footer {
  background: #0f172a !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.night-mode #dikela-chat-input,
[data-bs-theme="dark"] #dikela-chat-input {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.night-mode #btn-toggle-christian-picker,
body.night-mode #btn-attach-dikela-photo,
[data-bs-theme="dark"] #btn-toggle-christian-picker,
[data-bs-theme="dark"] #btn-attach-dikela-photo {
  background: #1e293b !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}

body.night-mode #dikela-chat-image-preview,
[data-bs-theme="dark"] #dikela-chat-image-preview {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

body.night-mode #btn-dikela-load-older,
[data-bs-theme="dark"] #btn-dikela-load-older {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}

body.night-mode .dikela-chat-typing,
[data-bs-theme="dark"] .dikela-chat-typing {
  background: #0f172a !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
}

body.night-mode .dikela-chat-guest-cta,
[data-bs-theme="dark"] .dikela-chat-guest-cta {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Night Mode para Emojis Cristianos */
body.night-mode .dikela-christian-quickbar,
[data-bs-theme="dark"] .dikela-christian-quickbar {
  background: #0f172a !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
body.night-mode .btn-quick-pill,
[data-bs-theme="dark"] .btn-quick-pill {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
}
body.night-mode .dikela-christian-picker-tray,
[data-bs-theme="dark"] .dikela-christian-picker-tray {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
}
body.night-mode .btn-ce,
[data-bs-theme="dark"] .btn-ce {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}
body.night-mode .btn-ce .ce-label,
[data-bs-theme="dark"] .btn-ce .ce-label {
  color: #94a3b8 !important;
}
body.night-mode .btn-ce-phrase,
[data-bs-theme="dark"] .btn-ce-phrase {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
body.night-mode .btn-ce-phrase:hover,
[data-bs-theme="dark"] .btn-ce-phrase:hover {
  background: #38bdf8 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   DIKELA SPIRITUAL SOFT TOAST (Non-intrusive conversion snackbar)
   ========================================================================== */
.dikela-spiritual-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1070;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dikela-spiritual-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .dikela-spiritual-toast {
    left: auto;
    right: 24px;
    bottom: 24px;
  }
}
.dikela-spiritual-toast-card {
  pointer-events: auto;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 440px;
  width: 100%;
}
.dikela-spiritual-toast-card .toast-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dikela-spiritual-toast-card .toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.dikela-spiritual-toast-card .toast-title {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
}
.dikela-spiritual-toast-card .toast-subtitle {
  color: #94a3b8;
  font-size: 0.74rem;
  line-height: 1.2;
  margin-top: 2px;
}
.dikela-spiritual-toast-card .toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dikela-spiritual-toast-card .btn-toast-google {
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 700;
  font-size: 0.78rem;
  border-radius: 20px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.15s ease;
}
.dikela-spiritual-toast-card .btn-toast-google:hover {
  transform: scale(1.04);
}
.dikela-spiritual-toast-card .btn-toast-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s ease;
}
.dikela-spiritual-toast-card .btn-toast-dismiss:hover {
  color: #ffffff;
}








/* ==========================================================================
   DIKELA PHASE 2 ERGONOMIC & UX IMPROVEMENTS (AUDIT COMPLIANCE)
   ========================================================================== */

/* 1. Optimal reading line-width for posts & devotionals (50-70ch) */
.post-text {
  max-width: 68ch !important;
  word-break: break-word !important;
}

/* 2. Prevent bottom radio bar from obscuring sidebar navigation */
.sg-offcanvas-sidebar,
.dikela-sidebar-v2,
.main-side-nav-card .card-body.with-nav {
  padding-bottom: 85px !important;
}

/* 3. AI Persona & AI Assistant Badge High Contrast */
.badge-ia-persona {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
body.night-mode .badge-ia-persona {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Clean double chevron avoidance for collapse nav items */
.main-side-nav .dikela-nav-item[data-bs-toggle="collapse"] {
  position: relative !important;
}


/* ==========================================================================
   DIKELA WALL AESTHETIC ELEVATION (VISITOR & REGISTERED USER EXPERIENCE)
   ========================================================================== */

/* 1. HERO GUEST WELCOME CARD */
.dikela-guest-welcome-card { margin-top: 16px !important; }
.dikela-guest-welcome-card:hover {
  box-shadow: 0 8px 30px rgba(225, 86, 55, 0.11), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
body.night-mode .dikela-guest-welcome-card,
[data-bs-theme="dark"] .dikela-guest-welcome-card { margin-top: 16px !important; }

.btn-guest-google {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid #e2e8f0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-guest-google:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
body.night-mode .btn-guest-google,
[data-bs-theme="dark"] .btn-guest-google {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.night-mode .btn-guest-google:hover,
[data-bs-theme="dark"] .btn-guest-google:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.btn-guest-signup {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-guest-signup:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(225, 86, 55, 0.45) !important;
}

/* 2. MODERN PUBLISHER (CREAR PUBLICACIÓN) */
.publisher,
#publisher-box {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 3px 18px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.publisher:focus-within,
#publisher-box:focus-within {
  border-color: rgba(225, 86, 55, 0.3) !important;
  box-shadow: 0 6px 24px rgba(225, 86, 55, 0.08), 0 0 0 3px rgba(225, 86, 55, 0.08) !important;
}
body.night-mode .publisher,
body.night-mode #publisher-box,
[data-bs-theme="dark"] .publisher,
[data-bs-theme="dark"] #publisher-box {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Publisher Intentions */
.dikela-intention-btn {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: #64748b !important;
  transition: all 0.18s ease !important;
}
.dikela-intention-btn:hover {
  background: rgba(225, 86, 55, 0.08) !important;
  color: #e15637 !important;
  border-color: rgba(225, 86, 55, 0.2) !important;
  transform: translateY(-1px) !important;
}
.dikela-intention-btn.active {
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(225, 86, 55, 0.28) !important;
}

/* Publisher Textarea */
.publisher-message textarea {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
}
body.night-mode .publisher-message textarea,
[data-bs-theme="dark"] .publisher-message textarea {
  color: #f1f5f9 !important;
}

/* Publisher Quick Action Chips */
.dikela-pub-action-chip {
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}
.dikela-pub-action-chip:hover {
  background: #ffffff !important;
  border-color: rgba(225, 86, 55, 0.3) !important;
  color: #e15637 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1.5px) !important;
}
body.night-mode .dikela-pub-action-chip,
[data-bs-theme="dark"] .dikela-pub-action-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
body.night-mode .dikela-pub-action-chip:hover,
[data-bs-theme="dark"] .dikela-pub-action-chip:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fbbf24 !important;
}

/* 3. POST CARDS (TARJETAS DE PUBLICACIÓN) */
.glass-post-container,
.post {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 3px 16px rgba(15, 23, 42, 0.035), 0 1px 3px rgba(15, 23, 42, 0.015) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease !important;
}
.glass-post-container:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.02) !important;
}
body.night-mode .glass-post-container,
body.night-mode .post,
[data-bs-theme="dark"] .glass-post-container,
[data-bs-theme="dark"] .post {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Post Typography & Reading Comfort */
.post-text {
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}
body.night-mode .post-text,
[data-bs-theme="dark"] .post-text {
  color: #f1f5f9 !important;
}

/* Post Header Refinements */
.post-header {
  padding: 16px 18px 8px 18px !important;
}
.post-avatar img {
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.post-title a {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 0.95rem !important;
}
body.night-mode .post-title a,
[data-bs-theme="dark"] .post-title a {
  color: #f8fafc !important;
}
.post-time {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
}

/* Post Actions Bar (Amén, Comentar, Compartir) */
.post-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}
body.night-mode .post-actions,
[data-bs-theme="dark"] .post-actions {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.post-actions .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.post-actions .action-btn:hover {
  background: rgba(225, 86, 55, 0.08) !important;
  color: #e15637 !important;
  transform: translateY(-1.5px) !important;
}
.post-actions .action-btn i,
.post-actions .action-btn svg {
  font-size: 1rem !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.post-actions .action-btn:hover i,
.post-actions .action-btn:hover svg {
  transform: scale(1.15) !important;
}
body.night-mode .post-actions .action-btn,
[data-bs-theme="dark"] .post-actions .action-btn {
  color: #94a3b8 !important;
}
body.night-mode .post-actions .action-btn:hover,
[data-bs-theme="dark"] .post-actions .action-btn:hover {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
}

/* 4. COMMENTS ERGONOMICS (BURBUJAS MODERNAS) */
.comment {
  margin-top: 10px !important;
}
.comment .comment-inner {
  border-radius: 16px !important;
  background: #f8fafc !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: background 0.15s ease !important;
}
body.night-mode .comment .comment-inner,
[data-bs-theme="dark"] .comment .comment-inner {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.comment .comment-text {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

/* 5. SPIRITUAL SANCTUARY SPECIAL CARDS */
.post-prayer-sanctuary {
  border-left: 3.5px solid #ea580c !important;
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.02) 0%, #ffffff 100%) !important;
}
body.night-mode .post-prayer-sanctuary,
[data-bs-theme="dark"] .post-prayer-sanctuary {
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.08) 0%, #1e293b 100%) !important;
}
.post-devotional-sanctuary,
.post-scripture-sanctuary {
  border-left: 3.5px solid #f59e0b !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.02) 0%, #ffffff 100%) !important;
}
body.night-mode .post-devotional-sanctuary,
body.night-mode .post-scripture-sanctuary,
[data-bs-theme="dark"] .post-devotional-sanctuary,
[data-bs-theme="dark"] .post-scripture-sanctuary {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, #1e293b 100%) !important;
}
.post-testimony-sanctuary {
  border-left: 3.5px solid #9333ea !important;
  background: linear-gradient(180deg, rgba(147, 51, 234, 0.02) 0%, #ffffff 100%) !important;
}
body.night-mode .post-testimony-sanctuary,
[data-bs-theme="dark"] .post-testimony-sanctuary {
  background: linear-gradient(180deg, rgba(147, 51, 234, 0.08) 0%, #1e293b 100%) !important;
}

/* 6. VERSÍCULO DEL DÍA ELEVATION */
.dikela-versiculo-card {
  border-radius: 20px !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}
.dikela-verse-text {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  font-style: italic !important;
}


/* ==========================================================================
   DIKELA PHASE 1 FLOATING CLEANUP (UX AUDIT RESOLUTION)
   ========================================================================== */

/* 1. Radio minimizada por defecto en escritorio y móvil (solo se muestra al reproducir) */
#kethane-radio-miniplayer:not(.is-playing):not(.is-active) {
  display: none !important;
}

/* 2. Chat Dikela solo como icono FAB flotante discreto (sin globos teaser invasivos) */
#dikela-orb-teaser {
  display: none !important;
}

#dikela-chat-orb-wrapper {
  display: flex !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 1045 !important;
}

@media (max-width: 767.98px) {
  #dikela-chat-orb-wrapper {
    display: flex !important;
    position: fixed !important;
    bottom: 74px !important;
    right: 16px !important;
    z-index: 1035 !important;
  }
}

/* 3. Asegurar que ningún banner flotante residual tape el feed */
.dikela-guest-sticky-bar {
  display: none !important;
}


/* ==========================================================================
   DIKELA PHASE 2 & 3: SEARCH REFINEMENT, DEVOTIONAL TYPOGRAPHY & HASHTAG CHIPS
   ========================================================================== */

/* 1. Header Search Bar Refinement (Light & Night mode) */
.search-wrapper {
  position: relative !important;
}
.dikela-search-input {
  border-radius: 999px !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 8px 20px 8px 42px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.90rem !important;
  height: 40px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}
.dikela-search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
.dikela-search-input:focus {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #c97a3d !important;
  box-shadow: 0 0 0 3px rgba(201, 122, 61, 0.15) !important;
  outline: none !important;
}
.search-wrapper .search-input-icon {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  opacity: 0.85 !important;
}
.search-wrapper .search-input-icon svg,
.search-wrapper .search-input-icon .header-icon {
  fill: #94a3b8 !important;
}

body.night-mode .dikela-search-input {
  color: #f1f5f9 !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
body.night-mode .dikela-search-input::placeholder {
  color: #94a3b8 !important;
}
body.night-mode .dikela-search-input:focus {
  background: rgba(30, 41, 59, 1) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}
body.night-mode .search-wrapper .search-input-icon svg,
body.night-mode .search-wrapper .search-input-icon .header-icon {
  fill: #94a3b8 !important;
}

/* 2. Dropdown styling for search results */
.search-wrapper .dropdown-search {
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  margin-top: 6px !important;
}
body.night-mode .search-wrapper .dropdown-search {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #0f172a !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}
.search-wrapper .dropdown-widget-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 18px !important;
}
body.night-mode .search-wrapper .dropdown-widget-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.search-wrapper .dropdown-widget-header .title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #1e293b !important;
}
body.night-mode .search-wrapper .dropdown-widget-header .title {
  color: #f1f5f9 !important;
}
.search-wrapper .dropdown-widget-footer {
  display: block !important;
  padding: 10px 16px !important;
  text-align: center !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  color: #c97a3d !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.search-wrapper .dropdown-widget-footer:hover {
  background: #f1f5f9 !important;
  color: #9a531e !important;
}
body.night-mode .search-wrapper .dropdown-widget-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #f59e0b !important;
}

/* 3. Devotional Typography for Post Feeds */
.post-text {
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
  color: var(--dk-text-primary, #2b2620) !important;
  letter-spacing: 0.01em !important;
}
body.night-mode .post-text {
  color: #e2e8f0 !important;
}

/* Devotional quotes / Bible verses inside posts */
.post-text blockquote,
.post-text cite,
.post-text em {
  font-family: 'Lora', 'Georgia', serif !important;
  font-style: italic !important;
  color: var(--dk-text-primary, #1e293b) !important;
}
body.night-mode .post-text blockquote,
body.night-mode .post-text cite,
body.night-mode .post-text em {
  color: #f1f5f9 !important;
}

/* 4. Subtle, Refined Hashtag Micro-Chips (Warm pastel / non-intrusive) */
.post-text a[href*="/search/hashtag"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 8px !important;
  margin: 2px 2px !important;
  border-radius: 6px !important;
  background: rgba(201, 122, 61, 0.07) !important;
  color: #9a531e !important;
  border: 1px solid rgba(201, 122, 61, 0.16) !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  vertical-align: middle !important;
}

.post-text a[href*="/search/hashtag"]:hover {
  background: rgba(201, 122, 61, 0.15) !important;
  color: #78380e !important;
  border-color: rgba(201, 122, 61, 0.32) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

body.night-mode .post-text a[href*="/search/hashtag"] {
  background: rgba(251, 191, 36, 0.09) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}

body.night-mode .post-text a[href*="/search/hashtag"]:hover {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fef08a !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

/* ==========================================================================
   DIKELA MASTER UX REFINEMENTS (PRIORITIES 1, 2 & 3)
   ========================================================================== */

/* 1. Staging Pill (Punto 5): Fluye naturalmente con el feed sin tapar el versículo */
.posts-staging-btn {
  position: static !important;
  margin: 14px auto 16px auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(201, 122, 61, 0.25) !important;
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #fff !important;
  border: none !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  z-index: 10 !important;
}
.posts-staging-btn.x-hidden,
.posts-staging-btn[style*="display: none"],
.posts-staging-btn[style*="display:none"] {
  display: none !important;
}

/* 2. Chat Flotante Armonizado (Punto 4 & 6): Tono terracota espiritual sin tapar widgets */
#dikela-chat-orb {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

/* Margen de seguridad en columna derecha para que el FAB no tape enlaces legales ni ESTEI */
.sg-offcanvas-sidebar,
.dikela-sidebar-v2,
.right-sidebar {
  padding-bottom: 95px !important;
}

/* 3. Estandarización de Iconos del Menú Lateral (Punto 18) */
.dikela-icon-box {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}

/* 4. Tipografía Devocional de Versículos dentro de Publicaciones (Punto 4 & 17) */
.post-text blockquote,
.post-text cite {
  font-family: 'Lora', 'Georgia', serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--dk-text-primary, #1e293b) !important;
  border-left: 3px solid #c97a3d !important;
  padding-left: 14px !important;
  margin: 8px 0 !important;
}

/* 5. Logo Lockup Proporciones Perfectas (Punto 13) */
.main-header .logo img {
  height: 42px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04)) !important;
}

@media (max-width: 767px) {
  .main-header .logo img {
    height: 32px !important;
    max-height: 33px !important;
    width: auto !important;
  }
}


/* ==========================================================================
   DIKELA AUDITORIA VISUAL V3 - SOLUCION DEFINITIVA DE COMPOSITOR & FRONTEND
   ========================================================================== */

/* 1. Placeholder & Layout del Compositor (Elimina solapamiento de avatar y tirador) */
.publisher-message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  position: relative !important;
}

.publisher-message .publisher-avatar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.night-mode .publisher-message .publisher-avatar {
  border-color: #1e293b !important;
}

.publisher-message .colored-text-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.publisher-box textarea.js_publisher-scraper,
.publisher textarea.js_publisher-scraper,
.publisher .colored-text-wrapper textarea,
textarea.js_publisher-scraper {
  resize: none !important; /* QUITA TOTALMENTE EL TIRADOR DE REDIMENSIONADO */
  min-height: 56px !important;
  line-height: 1.5 !important;
  padding: 8px 10px !important;
  font-size: 0.96rem !important;
  box-sizing: border-box !important;
  height: auto !important;
  overflow-y: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2. Tarjeta de Saludo Matutino/Vespertino/Nocturno (Daytime Card) */
.dikela-daytime-card {
  position: relative !important;
  border-radius: 18px !important;
  margin-bottom: 1.25rem !important;
  transition: all 0.25s ease !important;
}

.dikela-daytime-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12) !important;
}

body.night-mode .dikela-daytime-card {
  background: linear-gradient(135deg, rgba(30, 27, 46, 0.95) 0%, rgba(20, 18, 30, 0.95) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* 3. Seccion Publicacion Destacada */
.dikela-featured-section-header {
  transition: transform 0.2s ease !important;
}

.dikela-boosted-post-wrapper {
  transition: all 0.25s ease !important;
}

body.night-mode .dikela-featured-section-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(225, 86, 55, 0.10) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

body.night-mode .dikela-boosted-post-wrapper {
  border-color: rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* 4. Badges de Inteligencia Artificial Pastoral (Typo fix and high contrast WCAG AAA) */
.badge-ia-pastoral,
.badge-ai-pastoral,
[class*="pastoral-ia"],
.badge-ai-tag,
.chip-ai {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(5, 150, 105, 0.14) !important;
  color: #065f46 !important;
  border: 1px solid rgba(5, 150, 105, 0.35) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  padding: 2.5px 8px !important;
  border-radius: 9999px !important;
  vertical-align: middle !important;
  letter-spacing: 0.02em !important;
}

body.night-mode .badge-ia-pastoral,
body.night-mode .badge-ai-pastoral,
body.night-mode [class*="pastoral-ia"],
body.night-mode .badge-ai-tag,
body.night-mode .chip-ai {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
}

/* 5. Unificacion de Botones Marrones a Terracota/Ambar Oficial */
.btn-course-free,
.btn-brown-unify,
[style*="background: #78350f"],
[style*="background:#78350f"],
[style*="background: rgb(120, 53, 15)"] {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.3) !important;
}

/* 6. Dikela Pro Icono en Cabecera */
.main-header .btn i.fa-crown,
.main-header a[href*="packages"] i,
.main-header a[href*="packages"] svg {
  display: inline-block !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  opacity: 1 !important;
  vertical-align: -1px !important;
}

/* 7. Pie de Pagina & Accesibilidad Contraste (WCAG AA 4.5:1) */
.dikela-footer-nav-link,
.dikela-sidebar-footer-link {
  color: #475569 !important;
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.dikela-footer-nav-link:hover,
.dikela-sidebar-footer-link:hover {
  color: #e15637 !important;
}

body.night-mode .dikela-footer-nav-link,
body.night-mode .dikela-sidebar-footer-link {
  color: #94a3b8 !important;
}

body.night-mode .dikela-footer-nav-link:hover,
body.night-mode .dikela-sidebar-footer-link:hover {
  color: #fbbf24 !important;
}

/* 8. Textos secundarios con contraste optimizado */
.text-muted,
.post-time,
.post-time a {
  color: #475569 !important;
}

body.night-mode .text-muted,
body.night-mode .post-time,
body.night-mode .post-time a {
  color: #94a3b8 !important;
}

/* 9. Contador de presencia en vivo cuando es 0 */
.dikela-live-presence-pill[data-count="0"] {
  display: none !important;
}


/* ==========================================================================
   DIKELA MOBILE FULL-WIDTH & NO-CUTOFF ENHANCEMENTS ("A Toda Pantalla Sin Cortes")
   ========================================================================== */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .main-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .sg-offcanvas.container,
  .sg-offcanvas.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sg-offcanvas-mainbar > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .sg-offcanvas-mainbar > .row > .col-lg-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  /* Top Header Mobile Full-Fit: zero cutoffs on right */
  .main-header {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .main-header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .main-header .logo img {
    max-height: 28px !important;
    max-width: 95px !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  .main-header .navbar-wrapper > ul > li {
    flex-shrink: 0 !important;
    display: inline-flex !important;
  }
  /* Floating elements: eliminate collisions and truncation */
  #dikela-guest-conversion-bar {
    display: none !important;
  }
  #dikela-chat-orb-wrapper {
  display: flex !important;
    bottom: 68px !important;
    right: 14px !important;
    z-index: 1035 !important;
  }
  /* Make all feed cards span edge-to-edge with 8px screen margin */
  .card {
    border-radius: 16px !important;
  }
}


/* ==========================================================================
   DIKELA MOBILE DEFINITIVE FULL-WIDTH & NO-CUTOFF RULES ("A Toda Pantalla Sin Cortes")
   ========================================================================== */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .main-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 1. Header mobile full-fit: strictly hide desktop items and enforce clean sizing */
  .main-header {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .main-header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .main-header .logo img {
    max-height: 28px !important;
    max-width: 88px !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  .main-header .navbar-wrapper > ul > li.d-none,
  .main-header .navbar-wrapper > ul > li.d-lg-block,
  .main-header .navbar-wrapper > ul > li.d-xxl-block,
  .main-header .navbar-wrapper > ul > li[class*="d-none"]:not([class*="d-inline"]):not([class*="d-block"]),
  .main-header .navbar-wrapper > ul > li[class*="d-lg-"],
  .main-header .navbar-wrapper > ul > li[class*="d-xxl-"],
  .main-header .navbar-wrapper > ul > li[class*="d-sm-"] {
    display: none !important;
  }
  .main-header .navbar-wrapper > ul > li > a:not(.header-signin-btn):not(.user-menu) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  .main-header .navbar-wrapper .header-icon,
  .main-header .navbar-wrapper .svg-container,
  .main-header .navbar-wrapper .svg-container svg {
    width: 16px !important;
    height: 16px !important;
  }
  .dikela-streak-badge {
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
  }

  /* 2. Full-Width Container & Columns ("A toda pantalla") */
  .container.sg-offcanvas,
  .container-fluid.sg-offcanvas,
  .sg-offcanvas {
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-top: 4px !important;
    box-sizing: border-box !important;
  }
  .sg-offcanvas > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sg-offcanvas-mainbar > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .sg-offcanvas-mainbar > .row > .col-lg-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Cards full-width with clean rounded borders */
  .card,
  .dikela-versiculo-card,
  .stories-card-container,
  .dikela-guest-altar-card,
  .publisher,
  .post {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
  }
  .dikela-versiculo-card {
    padding: 12px 12px 14px 12px !important;
    margin-bottom: 10px !important;
  }
  .dikela-mobile-quick-access {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  /* 4. Floating Elements Collision Prevention */
  #dikela-guest-conversion-bar {
    display: none !important;
  }
  #dikela-chat-orb-wrapper {
  display: flex !important;
    bottom: 68px !important;
    right: 14px !important;
    z-index: 1035 !important;
  }
}

/* ==========================================================================
   ENHANCEMENTS: COMPOSITOR CLARO Y COMPACTACION MOVIL
   ========================================================================== */
.publisher-message .colored-text-wrapper {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
.publisher-message .colored-text-wrapper:focus-within {
  background: #ffffff !important;
  border-color: #e15637 !important;
  box-shadow: 0 0 0 3px rgba(225, 86, 55, 0.12) !important;
}
body.night-mode .publisher-message .colored-text-wrapper {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Indicador de desborde horizontal para historias y chips */
.dikela-publisher-intentions {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   DIKELA DESIGN SYSTEM UNIFICATION & STORIES COMPACT FIX
   ========================================================================== */
.stories-card-container {
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.stories-wrapper {
  padding: 6px 12px 10px 12px !important;
  min-height: auto !important;
}

#stories {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

#stories::-webkit-scrollbar {
  display: none !important;
}

.add-story {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  margin-bottom: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 12px rgba(225, 86, 55, 0.35) !important;
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 50%, #0284c7 100%) !important;
  padding: 2.5px !important;
}

.add-story .img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
}

.add-story .add {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  left: auto !important;
  transform: none !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

#stories .story {
  width: 62px !important;
  min-width: 62px !important;
  margin-right: 0 !important;
}

#stories .story > .item-link > .item-preview {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  border-radius: 50% !important;
  padding: 2.5px !important;
}

/* Unified Card System: Same radius, same soft shadow, same padding */
.card,
.post,
.dikela-prompt-card,
.dikela-versiculo-card {
  border-radius: 18px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .card,
body.night-mode .post,
body.night-mode .dikela-prompt-card,
body.night-mode .dikela-versiculo-card {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

/* --- Publisher Mobile Optimization --- */
@media (max-width: 767.98px) {
  .publisher-tools-tabs ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
  }
  .publisher-tools-tabs ul li {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 4px;
  }
  .publisher-tools-tabs ul li.col-md-6, .publisher-tools-tabs ul li.col-md-4 {
    width: auto;
  }
  .publisher-tools-tab {
    padding: 8px 6px;
    font-size: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    justify-content: flex-start;
  }
  .publisher-tools-tab .main-icon,
  .publisher-tools-tab i.fa-solid,
  .publisher-tools-tab i.fas,
  .publisher-tools-tab span {
    font-size: 16px !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }
}

/* --- [DIKELA UX] Publisher Drag & Drop Hover --- */
.publisher.publisher-drag-hover {
  border: 2px dashed var(--accent, #4e73df) !important;
  background-color: rgba(78, 115, 223, 0.05) !important;
  box-shadow: 0 0 15px rgba(78, 115, 223, 0.25) !important;
  transition: all 0.2s ease !important;
}


/* ==========================================================================
   DIKELA MOBILE RESPONSIVE MASTER FIX (Zero Overlaps, Perfect Alignment)
   ========================================================================== */
@media (max-width: 576px) {
  /* 1. Barra de acciones del post: Distribucion limpia sin solapamientos */
  .post-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 4px 6px !important;
    gap: 6px !important;
  }

  /* Si hay botón de oración grande ("Oré por ti"), ocupa su fila completa */
  .post-actions .prayer-action-btn,
  .post-actions .amen-action-btn,
  .post-actions .gloria-action-btn {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 6px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
  }

  /* Botones secundarios (Comentar, Compartir, WhatsApp) */
  .post-actions > .action-btn:not(.prayer-action-btn):not(.amen-action-btn):not(.gloria-action-btn) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.03) !important;
  }

  /* Boton de WhatsApp */
  .post-actions .dikela-post-wa-share {
    flex: 1.2 1 auto !important;
    background: rgba(37, 211, 102, 0.08) !important;
    border: 1px solid rgba(37, 211, 102, 0.25) !important;
  }
  .post-actions .dikela-post-wa-share span {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #25d366 !important;
  }

  /* Ocultar Review (estrella) en móvil para evitar choque con WhatsApp */
  .post-actions .action-btn[data-url*="review.php"] {
    display: none !important;
  }

  /* 2. Caja de Comentarios en Movil (CERO solapamientos de iconos) */
  .comment-data {
    width: 100% !important;
  }

  .comment-form.x-form {
  position: relative !important;
    width: 100% !important;
    border-radius: 24px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin-top: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  }

  .comment-form.x-form textarea.js_post-comment {
    width: 100% !important;
    min-height: 44px !important;
    max-height: 120px !important;
    padding: 11px 125px 11px 14px !important; /* Margen derecho protegido para iconos */
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    border: none !important;
    border-radius: 24px !important;
    background: transparent !important;
    resize: none !important;
    box-shadow: none !important;
    display: block !important;
  }

  /* Barra de herramientas fijada a la derecha y centrada verticalmente */
  .comment-form.x-form .x-form-tools {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    z-index: 10 !important;
    background: transparent !important;
  }

  .comment-form.x-form .x-form-tools > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .comment-form.x-form .x-form-tools > li i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: #64748b !important;
  }

  .comment-form.x-form .x-form-tools .x-form-tools-post i {
    color: #0284c7 !important;
    font-size: 17px !important;
  }

  /* Chips de respuestas rapidas de fe */
  .dikela-quick-comments-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 4px 2px !important;
    margin-bottom: 6px !important;
  }
  .dikela-quick-comments-row::-webkit-scrollbar {
    display: none !important;
  }
  .dikela-quick-reply-pill {
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
  }
}


/* ==========================================================================
   DIKELA MOBILE STREAMLINED FEED (Ultra-clean, Breathable, No Overlaps)
   ========================================================================== */
@media (max-width: 576px) {
  /* Reducir padding de las tarjetas de post para que respiren */
  .post {
    padding: 12px 14px 10px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  }

  /* Barra de acciones en UNA SOLA fila horizontal equilibrada */
  .post-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 0 6px !important;
    margin-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    gap: 4px !important;
  }

  /* Botón de Oración ("Oré por ti / ¡Has orado!") */
  .post-actions .prayer-action-btn,
  .post-actions .amen-action-btn,
  .post-actions .gloria-action-btn {
    width: auto !important;
    flex: 1 1 auto !important;
    min-height: 36px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.80rem !important;
    white-space: nowrap !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #065f46 !important;
  }
  .post-actions .prayer-action-btn.has-prayed {
    background: #d1fae5 !important;
    border-color: #34d399 !important;
    color: #047857 !important;
  }

  /* Botones secundarios (Comentar, Compartir, WhatsApp) */
  .post-actions > .action-btn:not(.prayer-action-btn):not(.amen-action-btn):not(.gloria-action-btn) {
    flex: 0 1 auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: transparent !important;
  }

  /* WhatsApp botón compacto */
  .post-actions .dikela-post-wa-share {
    padding: 6px 10px !important;
    border-radius: 20px !important;
    background: rgba(37, 211, 102, 0.1) !important;
    border: 1px solid rgba(37, 211, 102, 0.25) !important;
  }
  .post-actions .dikela-post-wa-share span {
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
  }

  /* Ocultar cualquier estrella o review sobrante */
  .post-actions .action-btn[data-url*="review.php"] {
    display: none !important;
  }

  /* Ocultar orbe flotante invasivo en móvil */
  #dikela-chat-orb-wrapper {
    display: none !important;
  }
}


/* ==========================================================================
   BULLETPROOF COMMENT BOX & ACTIONS FIX (Eliminates ALL Overlaps)
   ========================================================================== */
.comment-form .x-form {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 1px solid #d1d5db !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
}

.comment-form textarea.js_post-comment {
  width: 100% !important;
  min-height: 40px !important;
  max-height: 100px !important;
  padding: 9px 115px 9px 14px !important;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  border: none !important;
  border-radius: 22px !important;
  background: transparent !important;
  resize: none !important;
  box-sizing: border-box !important;
  display: block !important;
}

.comment-form .x-form-tools {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  z-index: 10 !important;
  background: transparent !important;
  width: auto !important;
}

.comment-form .x-form-tools > li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  cursor: pointer !important;
}

.comment-form .x-form-tools > li i {
  font-size: 15px !important;
  color: #64748b !important;
  display: block !important;
  margin: 0 !important;
}

.comment-form .x-form-tools .x-form-tools-post i {
  color: #0284c7 !important;
  font-size: 15px !important;
}

/* Post Actions Bar: Perfect single row with no collision */
.post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}

.post-actions .action-btn {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.post-actions .dikela-post-wa-share {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 16px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}


/* ==========================================================================
   PERFECT MOBILE VIEWPORT ADAPTATION (360px, 375px, 390px, 412px)
   ========================================================================== */
#pwa-push-prompt {
  top: 76px !important;
  bottom: auto !important;
}

@media (max-width: 576px) {
  /* Comment Form Container: Never overflow on 360px */
  .comment-data {
    margin-left: 38px !important;
    width: calc(100% - 38px) !important;
  }
  
  .comment-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .comment-avatar-picture {
    width: 32px !important;
    height: 32px !important;
  }

  .comment-form.x-form {
    width: 100% !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
  }

  .comment-form textarea.js_post-comment {
    width: 100% !important;
    min-height: 38px !important;
    max-height: 90px !important;
    padding: 8px 96px 8px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  /* Compact tool icons that fit even in 360px */
  .comment-form .x-form-tools {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 2px !important;
  }

  .comment-form .x-form-tools > li {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .comment-form .x-form-tools > li i {
    font-size: 13.5px !important;
  }

  .comment-form .x-form-tools .x-form-tools-post i {
    font-size: 14px !important;
  }

  /* Post actions: clean distribution on narrow screens */
  .post-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    gap: 4px !important;
  }

  .post-actions .action-btn {
    padding: 4px 6px !important;
    min-height: 34px !important;
  }

  .post-actions .prayer-action-btn {
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
  }

  .post-actions .dikela-post-wa-share {
    padding: 4px 8px !important;
    font-size: 0.76rem !important;
  }
}


/* ==========================================================================
   ULTRA RESPONSIVE POLISH ACROSS ALL SCREEN RESOLUTIONS (320px - 412px)
   ========================================================================== */

/* 1. Header breathing room on compact phones (<= 380px: iPhone SE, compact Androids) */
@media (max-width: 380px) {
  .dikela-visits-pill {
    display: none !important;
  }
  .header-points-badge,
  .header-online-badge {
    display: none !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 3px !important;
  }
  .main-header .navbar-wrapper > ul > li > a:not(.header-signin-btn):not(.user-menu) {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
  .header-signin-btn,
  .header-guest-signin-btn {
    padding: 0 8px !important;
    font-size: 0.70rem !important;
    height: 26px !important;
    line-height: 24px !important;
  }
}

/* 2. PWA push prompt non-blocking mobile positioning */
@media (max-width: 767.98px) {
  #pwa-push-prompt {
    position: absolute !important;
    top: 60px !important;
    bottom: auto !important;
    font-size: 0.76rem !important;
    padding: 6px 12px !important;
    max-width: 90vw !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
  }
}

/* 3. Ensure sufficient bottom margin on mobile so comment box / send button never overlaps navbar */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(var(--dk-bottom-nav-h, 58px) + 24px) !important;
  }
  .single-post-view .post,
  .post:last-child {
    margin-bottom: 24px !important;
  }
}

/* 4. Versiculo del Dia actions single row on narrow mobile */
@media (max-width: 576px) {
  .dikela-primary-actions {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .dikela-primary-actions .btn-verse-amen {
    padding: 3px 8px !important;
    font-size: 0.76rem !important;
    min-height: 28px !important;
  }
  .dikela-primary-actions .btn-whatsapp-share {
    padding: 3px 8px !important;
    font-size: 0.74rem !important;
    min-height: 28px !important;
  }
  .dikela-primary-actions .btn-verse-devocional {
    padding: 3px 8px !important;
    font-size: 0.74rem !important;
    min-height: 28px !important;
  }
}
/* === INLINED DIKELA MESSENGER & CHAT WIDGET STYLES (ELIMINATED @IMPORT WATERFALL) === */

/* --- Start dikela_messenger_v5.css --- */
/* ====================================================================
   DIKELA MESSENGER v5.0 - SNGINE NEXT-GEN CHAT ARCHITECTURE
   Inspirado en Sngine 5.0 Messenger:
   - Panel de 2 columnas con bordes curvos y sombras suaves.
   - Píldoras de filtro (Todos, No leídos, Grupos).
   - Buscador integrado de conversaciones.
   - Burbujas de mensaje modernas estilo iMessage / Messenger.
   - Input de mensaje flotante, ergonómico y responsive.
   ==================================================================== */

:root {
  --dikela-chat-bg: #f8fafc;
  --dikela-chat-card-bg: #ffffff;
  --dikela-chat-bubble-received: #f1f5f9;
  --dikela-chat-bubble-sent: #2563eb;
  --dikela-chat-text-received: #0f172a;
  --dikela-chat-text-sent: #ffffff;
  --dikela-chat-border: rgba(226, 232, 240, 0.8);
}

body.night-mode {
  --dikela-chat-bg: #0b1120;
  --dikela-chat-card-bg: #1e293b;
  --dikela-chat-bubble-received: #334155;
  --dikela-chat-bubble-sent: #3b82f6;
  --dikela-chat-text-received: #f8fafc;
  --dikela-chat-text-sent: #ffffff;
  --dikela-chat-border: rgba(51, 65, 85, 0.7);
}

/* Wrapper & Cards */
.dikela-messenger-wrapper {
  margin-top: 15px !important;
  margin-bottom: 30px !important;
}

.dikela-threads-card,
.dikela-chat-card,
.dikela-empty-chat-card {
  background: var(--dikela-chat-card-bg) !important;
  border-radius: 20px !important;
  border: 1px solid var(--dikela-chat-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}

/* Sidebar Threads Header */
.dikela-threads-header {
  padding: 18px 18px 10px 18px !important;
}

.dikela-threads-badge-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border-radius: 10px;
  font-size: 15px;
}

.dikela-new-chat-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
  transition: all 0.2s ease;
}

body.night-mode .dikela-new-chat-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

.dikela-new-chat-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Search input */
.dikela-threads-search-wrap .input-group {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dikela-chat-border);
}

.dikela-threads-search-wrap input {
  font-size: 0.88rem;
}

.dikela-threads-search-wrap input:focus {
  box-shadow: none;
}

/* Filter Pills (All / Unread / Groups) */
.dikela-threads-pills-bar {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.dikela-threads-pills-bar::-webkit-scrollbar {
  display: none;
}

.dikela-filter-pill {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

body.night-mode .dikela-filter-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

.dikela-filter-pill:hover {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.dikela-filter-pill.active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Feed Conversation Items */
.dikela-feed-conversation-item {
  border-bottom: 1px solid var(--dikela-chat-border);
  transition: background 0.15s ease;
}

.dikela-feed-conversation-item:hover {
  background: rgba(37, 99, 235, 0.03);
}

.dikela-feed-conversation-item.unread {
  background: rgba(37, 99, 235, 0.05);
}

.dikela-feed-conversation-item .name {
  color: var(--dikela-chat-text-received);
}

body.night-mode .dikela-feed-conversation-item .name {
  color: #f1f5f9;
}

/* Conversation Main Card */
.dikela-conversation-header {
  border-bottom: 1px solid var(--dikela-chat-border) !important;
}

.dikela-tool-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid var(--dikela-chat-border) !important;
  transition: all 0.2s ease;
}

body.night-mode .dikela-tool-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc;
}

.dikela-tool-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Chat Messages Scroll Container */
.dikela-chat-scroll {
  padding: 16px 20px !important;
  background: var(--dikela-chat-bg) !important;
}

body.night-mode .dikela-chat-scroll {
  background: #0f172a !important;
}

/* Modern Message Bubbles */
.conversation {
  margin-bottom: 14px;
}

.conversation .conversation-user img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

.conversation .conversation-body .text {
  font-size: 0.93rem;
  line-height: 1.5;
  padding: 11px 16px !important;
  border-radius: 18px !important;
  background: var(--dikela-chat-bubble-received) !important;
  color: var(--dikela-chat-text-received) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.conversation.right .conversation-body .text {
  background: var(--dikela-chat-bubble-sent) !important;
  color: var(--dikela-chat-text-sent) !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.conversation.right .conversation-body .text a {
  color: #ffffff !important;
  text-decoration: underline;
}

.conversation .conversation-body .time {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
}

.conversation.right .conversation-body .time {
  justify-content: flex-end;
}

/* Floating Input Bar (Sngine v5 style) */
.dikela-chat-input-bar {
  background: var(--dikela-chat-card-bg) !important;
  padding: 14px 18px !important;
  border-top: 1px solid var(--dikela-chat-border) !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dikela-chat-input-bar .chat-form-message {
  flex-grow: 1;
  background: var(--dikela-chat-bg) !important;
  border: 1px solid var(--dikela-chat-border) !important;
  border-radius: 24px !important;
  padding: 10px 18px !important;
}

body.night-mode .dikela-chat-input-bar .chat-form-message {
  background: #0f172a !important;
}

.dikela-chat-input-bar .chat-form-message textarea {
  font-size: 0.92rem;
  color: inherit;
  width: 100%;
}

.dikela-chat-input-bar .x-form-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dikela-chat-input-bar .x-form-tools li {
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #64748b;
  transition: all 0.2s ease;
}

body.night-mode .dikela-chat-input-bar .x-form-tools li {
  color: #94a3b8;
}

.dikela-chat-input-bar .x-form-tools li:hover {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.dikela-chat-input-bar .x-form-tools .dikela-send-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.dikela-chat-input-bar .x-form-tools .dikela-send-btn:hover {
  transform: scale(1.06);
  background: #1d4ed8 !important;
}

/* Empty State Graphic */
.dikela-empty-chat-graphic {
  position: relative;
  width: 110px;
  height: 80px;
}

.dikela-chat-graphic-bubble {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.bubble-left {
  top: 0;
  left: 10px;
  background: #2563eb;
  color: #fff;
  animation: bubbleFloat 3s ease-in-out infinite;
}

.bubble-right {
  bottom: 0;
  right: 10px;
  background: #f1f5f9;
  color: #ea580c;
  animation: bubbleFloat 3s ease-in-out infinite 1.5s;
}

body.night-mode .bubble-right {
  background: #334155;
  color: #f97316;
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --- End dikela_messenger_v5.css --- */

/* --- Start dikela_messenger_three_pane.css --- */
/* ====================================================================
   DIKELA MESSENGER v5.0 - SNGINE NEXT-GEN THREE-PANE CHAT
   Diseño exacto de 3 columnas (Threads + Active Chat + Info Panel)
   ==================================================================== */

:root {
  --dikela-bg-app: #f4f6f9;
  --dikela-card-bg: #ffffff;
  --dikela-border: #e9edf2;
  --dikela-text-main: #0f172a;
  --dikela-text-muted: #64748b;
  --dikela-primary: #2563eb;
  --dikela-bubble-left: #f1f5f9;
  --dikela-bubble-right: #2563eb;
  --dikela-bubble-text-left: #0f172a;
  --dikela-bubble-text-right: #ffffff;
}

body.night-mode {
  --dikela-bg-app: #0b1120;
  --dikela-card-bg: #1e293b;
  --dikela-border: #334155;
  --dikela-text-main: #f8fafc;
  --dikela-text-muted: #94a3b8;
  --dikela-primary: #3b82f6;
  --dikela-bubble-left: #334155;
  --dikela-bubble-right: #3b82f6;
  --dikela-bubble-text-left: #f8fafc;
  --dikela-bubble-text-right: #ffffff;
}

/* Outer Three-Pane Grid Container */
.dikela-messenger-v5-wrapper {
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

.dikela-messenger-grid {
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 120px);
}

@media (max-width: 1200px) {
  .dikela-messenger-grid {
    grid-template-columns: 320px 1fr 280px;
    gap: 12px;
  }
}

@media (max-width: 991px) {
  .dikela-messenger-grid {
    grid-template-columns: 1fr;
    display: block;
  }
  .dikela-col-info {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 320px;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dikela-col-info.active {
    transform: translateX(0);
  }
}

/* ===================================================
   COLUMNA 1: THREADS (LEFT PANEL)
   =================================================== */
.dikela-card-threads {
  background: var(--dikela-card-bg);
  border: 1px solid var(--dikela-border);
  border-radius: 20px;
  height: 100%;
  display: flex;
  flex-column: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.dikela-threads-top {
  padding: 18px 20px 12px 20px;
  border-bottom: 1px solid var(--dikela-border);
}

.dikela-threads-title {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--dikela-text-main);
  letter-spacing: -0.3px;
}

.dikela-compose-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: var(--dikela-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s ease;
}

body.night-mode .dikela-compose-btn {
  background: rgba(255, 255, 255, 0.08);
}

.dikela-compose-btn:hover {
  background: var(--dikela-primary);
  color: #fff;
  transform: scale(1.05);
}

/* Search Box */
.dikela-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

body.night-mode .dikela-search-box {
  background: rgba(255, 255, 255, 0.06);
}

.dikela-search-box:focus-within {
  background: var(--dikela-card-bg);
  border-color: var(--dikela-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dikela-search-box .search-icon {
  color: var(--dikela-text-muted);
  font-size: 13px;
  margin-right: 8px;
}

.dikela-search-box .search-input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--dikela-text-main);
  outline: none;
}

.dikela-search-box .search-clear-btn {
  background: none;
  border: none;
  color: var(--dikela-text-muted);
  cursor: pointer;
  padding: 0 4px;
}

/* Pill Tabs (All / Unread / Groups) */
.dikela-filter-pills-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.dikela-pill {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--dikela-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.night-mode .dikela-pill {
  background: rgba(255, 255, 255, 0.06);
}

.dikela-pill:hover {
  color: var(--dikela-primary);
  background: rgba(37, 99, 235, 0.1);
}

.dikela-pill.active {
  background: var(--dikela-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Threads List Items */
.dikela-threads-ul .feeds-item {
  border-bottom: 1px solid var(--dikela-border);
  transition: background 0.15s ease;
}

.dikela-threads-ul .feeds-item:hover {
  background: rgba(37, 99, 235, 0.04);
}

.dikela-threads-ul .feeds-item.active {
  background: rgba(37, 99, 235, 0.08);
}

/* ===================================================
   COLUMNA 2: ACTIVE CHAT (CENTER PANEL)
   =================================================== */
.dikela-chat-box {
  background: var(--dikela-card-bg);
  border: 1px solid var(--dikela-border);
  border-radius: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

/* Top Header */
.dikela-chat-top-header {
  background: var(--dikela-card-bg);
  border-bottom: 1px solid var(--dikela-border);
  padding: 14px 20px;
}

.btn-tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dikela-border);
  background: rgba(0, 0, 0, 0.02);
  color: var(--dikela-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.night-mode .btn-tool-icon {
  background: rgba(255, 255, 255, 0.04);
}

.btn-tool-icon:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--dikela-primary);
  border-color: var(--dikela-primary);
  transform: translateY(-1px);
}

.btn-tool-info {
  background: rgba(37, 99, 235, 0.08);
  color: var(--dikela-primary);
}

/* Messages Area */
.dikela-messages-feed {
  background: #f8fafc;
}

body.night-mode .dikela-messages-feed {
  background: #0f172a;
}

/* Floating Input Bar (with '+' button) */
.dikela-input-bar {
  background: var(--dikela-card-bg);
  border-top: 1px solid var(--dikela-border);
  padding: 12px 18px;
}

.dikela-input-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f5f9;
  border: 1px solid var(--dikela-border);
  border-radius: 24px;
  padding: 6px 12px 6px 8px;
}

body.night-mode .dikela-input-inner {
  background: #0f172a;
}

.dikela-input-inner .btn-attach {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: var(--dikela-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.dikela-input-inner .btn-attach:hover {
  background: var(--dikela-primary);
  color: #fff;
}

.dikela-input-inner textarea {
  border: none;
  background: transparent;
  flex-grow: 1;
  font-size: 0.92rem;
  color: var(--dikela-text-main);
  outline: none;
  resize: none;
  max-height: 80px;
  line-height: 1.4;
  padding: 6px 4px;
}

.dikela-input-inner .btn-icon {
  background: none;
  border: none;
  color: var(--dikela-text-muted);
  cursor: pointer;
  padding: 6px;
  font-size: 16px;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.dikela-input-inner .btn-icon:hover {
  color: var(--dikela-primary);
}

.dikela-input-inner .btn-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dikela-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
}

.dikela-input-inner .btn-send:hover {
  transform: scale(1.08);
  background: #1d4ed8;
}

/* ===================================================
   COLUMNA 3: INFO PANEL (RIGHT PROFILE SIDEBAR)
   =================================================== */
.dikela-info-card {
  background: var(--dikela-card-bg);
  border: 1px solid var(--dikela-border);
  border-radius: 20px;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dikela-info-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--dikela-border);
}

.dikela-info-header h5 {
  font-size: 1.1rem;
  color: var(--dikela-text-main);
}

.btn-close-info {
  background: none;
  border: none;
  color: var(--dikela-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.btn-close-info:hover {
  color: var(--dikela-text-main);
  background: rgba(0, 0, 0, 0.05);
}

.dikela-info-avatar {
  width: 84px;
  height: 84px;
  object-fit: cover;
}

/* Media Grid in Info Panel (3 Columns) */
.dikela-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.dikela-media-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.dikela-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.dikela-media-item:hover img {
  transform: scale(1.08);
}

/* --- End dikela_messenger_three_pane.css --- */

/* --- Start dikela_chatbox_widget_v5.css --- */
/* ====================================================================
   DIKELA FLOATING CHATBOX WIDGET v5.0 - SNGINE NEXT-GEN CHAT
   Modernización de la ventana flotante (popup) en la esquina inferior:
   - Bordes redondeados modernos (16px), sombra sutil.
   - Header limpio con nombre, estado online, botones circulares.
   - Área de mensajes y selector "Para:" estilo Sngine v5.
   - Barra de entrada moderna con botón '+' para adjuntar.
   ==================================================================== */

.chat-widget.chat-box {
  width: 360px !important;
  border-radius: 18px 18px 0 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  background: #ffffff !important;
  overflow: hidden;
  bottom: 0 !important;
  z-index: 1050 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

body.night-mode .chat-widget.chat-box {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Chatbox Header */
.chat-widget-head {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 16px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 18px 18px 0 0 !important;
}

body.night-mode .chat-widget-head {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.chat-widget-head .chat-user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

body.night-mode .chat-widget-head .chat-user-card {
  color: #f8fafc !important;
}

.chat-widget-head .chat-user-card .avatar {
  position: relative;
  width: 36px;
  height: 36px;
}

.chat-widget-head .chat-user-card .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-widget-head .chat-user-card .avatar .online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid #fff;
  border-radius: 50%;
}

body.night-mode .chat-widget-head .chat-user-card .avatar .online-status {
  border-color: #1e293b;
}

/* Header Buttons */
.chat-head-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-head-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.night-mode .chat-head-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.chat-head-btn:hover {
  background: #2563eb;
  color: #ffffff;
  transform: scale(1.06);
}

.chat-head-btn svg,
.chat-head-btn i {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

/* Chatbox "To:" selector in fresh card */
.chat-box .chat-to {
  padding: 10px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.night-mode .chat-box .chat-to {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.chat-box .chat-to .to {
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 0.85rem !important;
  position: static !important;
}

.chat-box .chat-to .typeahead input {
  border: none !important;
  background: transparent !important;
  font-size: 0.88rem !important;
  outline: none !important;
  color: inherit !important;
}

/* Chatbox Messages Container */
.chat-box .chat-conversations {
  background: #f8fafc !important;
  padding: 12px 14px !important;
  height: 300px !important;
  max-height: 340px !important;
}

body.night-mode .chat-box .chat-conversations {
  background: #0f172a !important;
}

/* Chatbox Floating Input Area */
.chat-box .chat-form {
  background: #ffffff !important;
  padding: 10px 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.night-mode .chat-box .chat-form {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.chat-box .chat-form-message {
  flex-grow: 1 !important;
  background: #f1f5f9 !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

body.night-mode .chat-box .chat-form-message {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.chat-box .chat-form-message textarea {
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  max-height: 60px !important;
}

.chat-box .x-form-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-box .x-form-tools li {
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
}

body.night-mode .chat-box .x-form-tools li {
  color: #94a3b8 !important;
}

.chat-box .x-form-tools li:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}

.chat-box .x-form-tools .x-form-tools-post {
  background: #2563eb !important;
  color: #ffffff !important;
}

.chat-box .x-form-tools .x-form-tools-post:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* --- End dikela_chatbox_widget_v5.css --- */

/* --- Start dikela_messenger_solid.css --- */
/* ====================================================================
   DIKELA MESSENGER v5.0 - SNGINE NEXT-GEN NATIVE STYLES
   Alineación de 3 columnas (Threads + Chat + Info)
   con soporte total para envío de mensajes, fotos y notas de voz.
   ==================================================================== */

/* Contenedor Principal */
.dikela-messenger-v5-page {
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

/* Columna 1: Threads Sidebar */
.dikela-threads-card {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}

body.night-mode .dikela-threads-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.dikela-threads-icon-box {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
}

.dikela-compose-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
  transition: all 0.2s ease;
}

body.night-mode .dikela-compose-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

.dikela-compose-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

/* Pills Bar */
.dikela-pill-btn {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.night-mode .dikela-pill-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

.dikela-pill-btn:hover {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

.dikela-pill-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Columna 2: Chat Card */
.dikela-chat-card {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}

body.night-mode .dikela-chat-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.dikela-messages-feed {
  background: #f8fafc !important;
  padding: 16px 20px !important;
}

body.night-mode .dikela-messages-feed {
  background: #0f172a !important;
}

/* Barra de Entrada de Mensaje (x-form chat-form) */
.dikela-chat-input-bar {
  background: #ffffff !important;
  padding: 12px 18px !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 0 20px 20px !important;
}

body.night-mode .dikela-chat-input-bar {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.dikela-chat-input-bar .chat-form-message {
  flex-grow: 1 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
  max-height: 80px !important;
}

body.night-mode .dikela-chat-input-bar .chat-form-message {
  background: #0f172a !important;
  border-color: #334155 !important;
}

.dikela-chat-input-bar .chat-form-message textarea {
  font-size: 0.92rem !important;
  color: inherit !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  resize: none !important;
  line-height: 1.4 !important;
}

.dikela-chat-input-bar .x-form-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dikela-chat-input-bar .x-form-tools li {
  cursor: pointer !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
}

body.night-mode .dikela-chat-input-bar .x-form-tools li {
  color: #94a3b8 !important;
}

.dikela-chat-input-bar .x-form-tools li:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}

.dikela-chat-input-bar .x-form-tools .dikela-send-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35) !important;
}

.dikela-chat-input-bar .x-form-tools .dikela-send-btn:hover {
  transform: scale(1.06) !important;
  background: #1d4ed8 !important;
}

/* Columna 3: Info Panel */
.dikela-info-card {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}

body.night-mode .dikela-info-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.dikela-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.dikela-media-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.dikela-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.dikela-media-item:hover img {
  transform: scale(1.08);
}


/* ====================================================================
   DIKELA MESSENGER MOBILE OPTIMIZATION & CONFLICT RESOLUTION
   ==================================================================== */
@media (max-width: 767px) {
  /* Prevent drawer styles from breaking the messenger page */
  .dikela-messenger-v5-page {
    margin-top: 6px !important;
    margin-bottom: 75px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .dikela-messenger-v5-page > .row {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reset global fixed-drawer properties forced by custom.css */
  .dikela-messenger-v5-page .dikela-threads-col,
  .dikela-messenger-v5-page .sg-offcanvas-sidebar {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
    padding: 0 !important;
  }

  .dikela-messenger-v5-page .dikela-chat-col,
  .dikela-messenger-v5-page .sg-offcanvas-mainbar {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* State 1: Viewing Threads List (page has .active) */
  .dikela-messenger-v5-page.active .dikela-threads-col {
    display: block !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dikela-messenger-v5-page.active .dikela-chat-col,
  .dikela-messenger-v5-page.active .dikela-info-col {
    display: none !important;
  }

  /* State 2: Viewing Conversation (page does NOT have .active) */
  .dikela-messenger-v5-page:not(.active) .dikela-threads-col {
    display: none !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .dikela-messenger-v5-page:not(.active) .dikela-chat-col {
    display: block !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dikela-messenger-v5-page:not(.active) .dikela-info-col {
    display: none !important;
  }

  .dikela-back-mobile-bar {
    display: block !important;
    margin-bottom: 8px !important;
  }

  .dikela-back-mobile-bar button {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.85rem !important;
  }
}

/* --- End dikela_messenger_solid.css --- */


/* ==========================================================================
   DIKELA REDISEÑO OFICIAL - SISTEMA "SANCTUARY GOLD" & EXPERIENCIA MODERNA
   Integración Producción 2026 - Mobile First & Rendimiento
   ========================================================================== */

/* Fonts preloaded in _head.tpl */

:root {
  /* Paleta Sanctuary Gold */
  --dk-gold: #C8A45A;
  --dk-gold-light: #E8D5A0;
  --dk-gold-dark: #A07D38;
  --dk-blue: #3B6B9E;
  --dk-blue-light: #5A8EC4;
  --dk-blue-dark: #2A4F75;
  --dk-terracotta: #E8734A;
  --dk-green: #5B9E6F;
  --dk-red: #DC4545;

  /* Superficies Luminosas y Elevación */
  --dk-bg-clean: #FAF8F3;
  --dk-card-clean: #FFFFFF;
  --dk-border-subtle-clean: rgba(0, 0, 0, 0.08);
  --dk-shadow-soft: 0 4px 16px rgba(43, 38, 32, 0.06);
  --dk-shadow-hover: 0 8px 24px rgba(43, 38, 32, 0.10);

  /* Tipografías */
  --dk-font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dk-font-verse: 'Lora', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--dk-font-main) !important;
  background-color: var(--dk-bg-clean) !important;
  color: #2D3748 !important;
  -webkit-font-smoothing: antialiased;
}

/* 1. HEADER AUTO-HIDE & VIDRIO ESMERILADO (FROSTED GLASS) */
.main-header {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--dk-border-subtle-clean) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.main-header.header-hidden {
  transform: translateY(-100%) !important;
}

body.night-mode .main-header {
  background: rgba(18, 22, 30, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Insignia LIVE Elegante */
@media (max-width: 767.98px) {
  .tiktok-live-badge,
  #tiktok-live-header-btn {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .tiktok-live-badge,
  #tiktok-live-header-btn {
    background: rgba(220, 69, 69, 0.10) !important;
    border: 1px solid rgba(220, 69, 69, 0.3) !important;
    color: var(--dk-red) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
}

.live-dot-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--dk-red) !important;
  box-shadow: 0 0 6px var(--dk-red) !important;
  animation: pulse-dot 1.8s infinite !important;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

/* 2. VERSÍCULO HERO CARD — ALTAR DEL AMANECER */
.dikela-versiculo-card {
  background: linear-gradient(145deg, #FDF9F0 0%, #F8EED9 50%, #F1E2BF 100%) !important;
  border: 1px solid rgba(200, 164, 90, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 25px rgba(200, 164, 90, 0.12) !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

body.night-mode .dikela-versiculo-card {
  background: linear-gradient(145deg, #1A1F2C 0%, #151821 100%) !important;
  border: 1px solid rgba(200, 164, 90, 0.25) !important;
}

.dikela-badge-promesa {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--dk-gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
}

body.night-mode .dikela-badge-promesa {
  color: var(--dk-gold-light) !important;
}

.dikela-verse-text,
#dikela-verse-text-content {
  font-family: var(--dk-font-verse) !important;
  font-size: 1.25rem !important;
  line-height: 1.75 !important;
  font-style: italic !important;
  color: #2D3748 !important;
  margin: 16px 0 !important;
}

body.night-mode .dikela-verse-text,
body.night-mode #dikela-verse-text-content {
  color: #F7FAFC !important;
}

/* Pills de Versión Bíblica */
.dikela-ver-pill {
  border-radius: 14px !important;
  padding: 3px 10px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #524A3E !important;
  transition: all 0.2s ease !important;
}

.dikela-ver-pill.active {
  background: var(--dk-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--dk-gold) !important;
  box-shadow: 0 2px 6px rgba(200, 164, 90, 0.3) !important;
}

/* Botón Amén Principal con Oro y Vibración */
.btn-verse-amen,
#dikela-btn-amen {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border-radius: 22px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 164, 90, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-verse-amen:hover,
#dikela-btn-amen:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(200, 164, 90, 0.45) !important;
}

.btn-verse-amen:active,
#dikela-btn-amen:active {
  transform: scale(0.96) !important;
}

/* Botón WhatsApp */
.btn-whatsapp-share {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #128C7E !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
  border-radius: 22px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-whatsapp-share:hover {
  background: #25D366 !important;
  color: #FFFFFF !important;
}

/* 3. POSTS & TARJETAS DEL FEED — ELEVACIÓN Y ENTRADA SUAVE */
.post,
.card,
.panel-post {
  border-radius: 18px !important;
  border: 1px solid var(--dk-border-subtle-clean) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  background-color: #FFFFFF !important;
}

.post:hover {
  box-shadow: var(--dk-shadow-soft) !important;
}

body.night-mode .post,
body.night-mode .card,
body.night-mode .panel-post {
  background-color: #1A202C !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Animación Staggered de Aparición */
@keyframes dkCardFadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js_post {
  animation: dkCardFadeInUp 0.35s ease both !important;
}

/* 4. BARRA DE NAVEGACIÓN MÓVIL (BOTTOM NAV) — AUTO-HIDE Y ACCIÓN ELEVADA */
.footer-bottom-bar {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--dk-border-subtle-clean) !important;
}

.footer-bottom-bar.nav-hidden {
  transform: translateY(100%) !important;
}

/* Botón Central Crear/Publicar en Móvil */
.footer-bottom-bar .bottom-bar-action-publish,
.footer-bottom-bar .user-action-create {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(200, 164, 90, 0.45) !important;
}

/* 5. RESPONSIVE BREAKPOINTS (DESDE 360px HASTA >1400px) */
@media (max-width: 767.98px) {
  .dikela-versiculo-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .dikela-verse-text,
  #dikela-verse-text-content {
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
  }
  .dikela-primary-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .btn-verse-amen,
  #dikela-btn-amen {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 480px) {
  .main-header {
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }
  .dikela-verse-text,
  #dikela-verse-text-content {
    font-size: 1.0rem !important;
  }
}

@media (min-width: 1400px) {
  .dikela-verse-text,
  #dikela-verse-text-content {
    font-size: 1.35rem !important;
  }
}
/* ==========================================================================
   DIKELA NEXT-GEN ELEVATION — WORLD-CLASS CLEAN & INTUITIVE DESIGN
   Inspired by Threads, Linear & Substack Notes
   ========================================================================== */

:root {
  --dk-bg-canvas: #FAF8F5;
  --dk-bg-surface: #FFFFFF;
  --dk-gold: #C8A45A;
  --dk-gold-dark: #9E7D32;
  --dk-gold-light: #F4E8D1;
  --dk-gold-subtle: rgba(200, 164, 90, 0.12);
  --dk-text-title: #1A1F2C;
  --dk-text-body: #334155;
  --dk-text-muted: #8A94A6;
  --dk-border-hairline: rgba(0, 0, 0, 0.04);
  --dk-border-gold: rgba(200, 164, 90, 0.28);
  --dk-shadow-ambient: 0 4px 20px -2px rgba(28, 25, 23, 0.03), 0 2px 6px -1px rgba(28, 25, 23, 0.02);
  --dk-shadow-lift: 0 12px 32px -4px rgba(200, 164, 90, 0.12), 0 4px 12px -2px rgba(28, 25, 23, 0.04);
  --dk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background-color: var(--dk-bg-canvas) !important;
  color: var(--dk-text-body) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 1. HEADER FROSTED GLASS & MODERN SEARCH */
.main-header {
  background: rgba(250, 248, 245, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--dk-border-gold) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.35s var(--dk-ease) !important;
}

.search-bar {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 16px !important;
  transition: all 0.25s ease !important;
}

.search-bar:focus-within {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 164, 90, 0.15) !important;
}

.search-bar input {
  background: transparent !important;
  border: none !important;
  font-size: 0.92rem !important;
  color: var(--dk-text-title) !important;
  outline: none !important;
  padding: 6px 8px !important;
  width: 100% !important;
}

.search-shortcut {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--dk-text-muted) !important;
  background: #F1ECE3 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  user-select: none !important;
  margin-left: 6px !important;
}

.btn-login {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 8px 22px !important;
  box-shadow: 0 4px 14px rgba(200, 164, 90, 0.35) !important;
  transition: all 0.2s var(--dk-ease) !important;
  cursor: pointer !important;
}

.btn-login:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(200, 164, 90, 0.45) !important;
}

/* 2. SIDEBAR IZQUIERDA UNIFICADA Y ELEGANTE */
.sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 20px !important;
}

.nav-item {
  border-radius: 16px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  color: #4B5563 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.2s var(--dk-ease) !important;
}

.nav-item:hover {
  background: rgba(200, 164, 90, 0.08) !important;
  color: var(--dk-gold-dark) !important;
  transform: translateX(3px) !important;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(200, 164, 90, 0.16) 0%, rgba(200, 164, 90, 0.04) 100%) !important;
  color: var(--dk-gold-dark) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--dk-gold) !important;
}

.community-card {
  border-radius: 22px !important;
  background: linear-gradient(150deg, #FFFFFF 0%, #FAF6ED 100%) !important;
  border: 1px solid var(--dk-border-gold) !important;
  box-shadow: var(--dk-shadow-ambient) !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
}

.radio-player {
  border-radius: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dk-border-hairline) !important;
  box-shadow: var(--dk-shadow-ambient) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}

.radio-play-btn {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(200, 164, 90, 0.35) !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease !important;
}

.radio-play-btn:hover {
  transform: scale(1.08) !important;
}

/* 3. CENTER FEED: DIKELA TV STRIP (ARMONIZADO CON LA PALETA) */
.tv-banner {
  background: linear-gradient(90deg, #FFFFFF 0%, #FAF8F3 100%) !important;
  border: 1px solid var(--dk-border-gold) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 20px rgba(200, 164, 90, 0.08) !important;
  padding: 14px 20px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.25s var(--dk-ease) !important;
}

.tv-banner:hover {
  box-shadow: var(--dk-shadow-lift) !important;
  transform: translateY(-1px) !important;
}

.tv-banner-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--dk-gold-dark) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
}

.tv-banner-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tv-banner-text strong {
  color: var(--dk-text-title) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

.tv-live-pill {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.tv-live-dot {
  width: 6px !important;
  height: 6px !important;
  background: #DC2626 !important;
  border-radius: 50% !important;
  animation: pulse 1.5s infinite !important;
}

.tv-banner-text span {
  color: var(--dk-text-muted) !important;
  font-size: 0.86rem !important;
}

.tv-banner-btn {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(200, 164, 90, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.tv-banner-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(200, 164, 90, 0.45) !important;
}

/* 4. PUBLISHER BOX EXPANSIVO */
.publisher-box {
  background: #FFFFFF !important;
  border-radius: 22px !important;
  border: 1px solid var(--dk-border-hairline) !important;
  box-shadow: var(--dk-shadow-ambient) !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.pub-user-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.publisher-input-wrap {
  flex: 1 !important;
}

.publisher-input {
  background: #FAF8F4 !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-size: 0.95rem !important;
  color: var(--dk-text-title) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.publisher-input:hover {
  background: #F4EFE6 !important;
  border-color: var(--dk-border-gold) !important;
}

.pub-action {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--dk-text-muted) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pub-action:hover {
  background: rgba(200, 164, 90, 0.12) !important;
  color: var(--dk-gold-dark) !important;
  transform: translateY(-2px) !important;
}

/* 5. FEED TABS FLOTANTES */
.feed-tabs {
  background: #F1ECE3 !important;
  border-radius: 999px !important;
  padding: 5px !important;
  margin: 18px 0 22px !important;
  display: flex !important;
  gap: 4px !important;
  border: none !important;
}

.feed-tab {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all 0.2s var(--dk-ease) !important;
}

.feed-tab.active {
  background: #FFFFFF !important;
  color: var(--dk-gold-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 6. HERO CARD DEL VERSÍCULO (AURA DORADA EDITORIAL) */
.verse-hero-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #FAF7F0 100%) !important;
  border: 1px solid var(--dk-border-gold) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 30px rgba(200, 164, 90, 0.12) !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s var(--dk-ease) !important;
}

.verse-hero-card:hover {
  box-shadow: 0 12px 40px rgba(200, 164, 90, 0.18) !important;
}

.verse-label {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--dk-gold-dark) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.version-btn {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid var(--dk-border-gold) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: var(--dk-text-body) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.version-btn.active {
  background: var(--dk-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--dk-gold) !important;
  box-shadow: 0 2px 8px rgba(200, 164, 90, 0.35) !important;
}

.verse-text {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 1.35rem !important;
  line-height: 1.85 !important;
  font-style: italic !important;
  color: #1E293B !important;
  margin: 20px 0 !important;
  border: none !important;
  padding: 0 !important;
}

.verse-action-btn.primary {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 14px rgba(200, 164, 90, 0.35) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s var(--dk-ease) !important;
}

.verse-action-btn.primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(200, 164, 90, 0.48) !important;
}

/* 7. POST CARDS — CARDLESS & BORDERLESS ELEGANCE */
.post-card {
  background: var(--dk-bg-surface) !important;
  border-radius: 22px !important;
  border: 1px solid var(--dk-border-hairline) !important;
  box-shadow: var(--dk-shadow-ambient) !important;
  padding: 26px !important;
  margin-bottom: 20px !important;
  transition: all 0.28s var(--dk-ease) !important;
}

.post-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--dk-shadow-lift) !important;
}

.post-avatar img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.author-name-row strong {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--dk-text-title) !important;
}

.author-role {
  background: rgba(200, 164, 90, 0.14) !important;
  color: var(--dk-gold-dark) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

.post-time {
  color: var(--dk-text-muted) !important;
  font-size: 0.82rem !important;
}

/* Cita bíblica editorial dentro de publicaciones */
.post-quote-box {
  background: rgba(200, 164, 90, 0.06) !important;
  border-left: 3px solid var(--dk-gold) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin: 14px 0 !important;
  position: relative !important;
}

.post-quote-box .quote-icon {
  color: var(--dk-gold) !important;
  font-size: 0.9rem !important;
  margin-bottom: 6px !important;
  display: block !important;
  opacity: 0.7 !important;
}

.post-quote-box p {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #1E293B !important;
  margin: 0 0 6px 0 !important;
}

.post-quote-box .quote-source {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--dk-gold-dark) !important;
  display: block !important;
}

/* Hashtags elegantes tipo chips dorados */
.post-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.post-tag {
  background: rgba(200, 164, 90, 0.08) !important;
  color: var(--dk-gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.22) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.post-tag:hover {
  background: var(--dk-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--dk-gold) !important;
}

/* Estadísticas y Acciones sin cortes duros */
.post-stats {
  display: flex !important;
  gap: 16px !important;
  color: var(--dk-text-muted) !important;
  font-size: 0.84rem !important;
  padding: 12px 0 8px !important;
  border: none !important;
}

.post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  margin-top: 6px !important;
}

.post-action-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.post-action-btn:hover {
  background: rgba(100, 116, 139, 0.08) !important;
  color: var(--dk-text-title) !important;
}

.post-action-btn.amen-btn:hover,
.post-action-btn.amen-btn.active {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--dk-gold-dark) !important;
}

.post-action-btn.whatsapp-btn {
  background: rgba(37, 211, 102, 0.1) !important;
  color: #128C7E !important;
}

.post-action-btn.whatsapp-btn:hover {
  background: #25D366 !important;
  color: #FFFFFF !important;
}

/* 8. SIDEBAR DERECHA (WIDGETS REFINADOS) */
.sidebar-widget {
  background: #FFFFFF !important;
  border-radius: 22px !important;
  border: 1px solid var(--dk-border-hairline) !important;
  box-shadow: var(--dk-shadow-ambient) !important;
  padding: 22px !important;
  margin-bottom: 20px !important;
  transition: all 0.25s var(--dk-ease) !important;
}

.sidebar-widget:hover {
  box-shadow: var(--dk-shadow-lift) !important;
}

.widget-btn.primary {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 14px rgba(200, 164, 90, 0.35) !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.widget-btn.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(200, 164, 90, 0.45) !important;
}

.trending-hash {
  width: 32px !important;
  height: 32px !important;
  background: rgba(200, 164, 90, 0.12) !important;
  color: var(--dk-gold-dark) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}

.trending-info strong {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--dk-text-title) !important;
}

.trending-meta {
  color: var(--dk-text-muted) !important;
  font-size: 0.78rem !important;
}

/* 9. TOAST FLOTANTE "NUNCA ORAS SOLO" */
.prayer-floating {
  background: rgba(26, 32, 44, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--dk-border-gold) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2) !important;
  padding: 10px 22px !important;
}

.prayer-float-btn {
  background: linear-gradient(135deg, var(--dk-gold), var(--dk-gold-dark)) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
}

/* ==========================================================================
   DIKELA MASTER DEFINITIVE RESPONSIVE HEADER (320px - 1920px)
   Validado para: 320, 360, 375, 390, 412, 428 px, Tablet (768px) y Desktop (1920px)
   ========================================================================== */

/* 1. ESTRUCTURA BASE Y PREVENCIÓN DE OVERFLOW GLOBAL */
html, body {
  overflow-x: hidden !important;
}

.main-header {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.main-header .container,
.main-header .container-fluid {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.main-header .row {
  max-width: 100% !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Columna derecha: jamás colapsar ni encoger */
.main-header .col-auto:last-child,
.main-header .col-auto.d-flex.justify-content-end {
  flex-shrink: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

.main-header .navbar-wrapper {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.main-header .navbar-wrapper > ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

.main-header .navbar-wrapper > ul > li {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. REGLA MAESTRA DE FORMA: RACHA, PRESENCIA, VISITAS Y AVATAR
   NUNCA deben heredar forma circular fija de 40px ni 28px */
.main-header .navbar-wrapper .dikela-streak-badge,
.main-header .navbar-wrapper .dikela-live-presence-pill,
.main-header .navbar-wrapper .dikela-visits-pill,
html body .main-header .navbar-wrapper > ul > li > a.dikela-streak-badge,
html body .main-header .navbar-wrapper > ul > li > a.dikela-live-presence-pill,
html body .main-header .navbar-wrapper > ul > li > a.dikela-visits-pill {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-decoration: none !important;
}

/* Menú de usuario / Avatar */
.main-header .navbar-wrapper .user-menu,
html body .main-header .navbar-wrapper li.dropdown > a.user-menu {
  width: auto !important;
  min-width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.main-header .navbar-wrapper .user-menu img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

/* 3. BREAKPOINT: MÓVILES EXTREMADAMENTE ESTRECHOS (≤ 345px, ej. 320px) */
@media (max-width: 345px) {
  .main-header {
    height: 52px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 4px !important;
    padding-right: 4px !important;
    height: 52px !important;
  }
  .main-header .menu-icon,
  .main-header .btn-dikela-hamburger {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
  }
  .main-header .logo img {
    max-width: 68px !important;
    height: 22px !important;
  }
  /* Ocultar icono de lupa en el header porque ya está en la barra inferior fija */
  .main-header .header-search-btn {
    display: none !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 2.5px !important;
  }
  .main-header .navbar-wrapper > ul > li > a.header-icon-link,
  .main-header .navbar-wrapper > ul > li.dropdown > a:not(.user-menu) {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .main-header .navbar-wrapper .header-icon,
  .main-header .navbar-wrapper svg.header-icon {
    width: 16px !important;
    height: 16px !important;
  }
  /* Presencia ultra-compacta: punto + número (ocultar icono users y texto) */
  .main-header .dikela-presence-users-icon,
  .main-header .dikela-presence-label,
  .main-header .dikela-visits-label {
    display: none !important;
  }
  .main-header .dikela-presence-pulse-dot {
    width: 6px !important;
    height: 6px !important;
    margin-right: 3px !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 5px !important;
    font-size: 0.70rem !important;
    gap: 2px !important;
    border-radius: 999px !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge i {
    font-size: 0.72rem !important;
    margin-right: 2px !important;
  }
  .header-guest-signin-btn {
    height: 26px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    font-size: 0.70rem !important;
  }
}

/* 4. BREAKPOINT: MÓVILES MEDIOS (346px - 380px, ej. 360px y 375px) */
@media (min-width: 346px) and (max-width: 380px) {
  .main-header {
    height: 54px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
    height: 54px !important;
  }
  .main-header .menu-icon,
  .main-header .btn-dikela-hamburger {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  }
  .main-header .logo img {
    max-width: 76px !important;
    height: 24px !important;
  }
  .main-header .header-search-btn {
    display: inline-flex !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 3px !important;
  }
  .main-header .navbar-wrapper > ul > li > a.header-icon-link,
  .main-header .navbar-wrapper > ul > li.dropdown > a:not(.user-menu) {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .main-header .navbar-wrapper .header-icon,
  .main-header .navbar-wrapper svg.header-icon {
    width: 17px !important;
    height: 17px !important;
  }
  /* Ocultar texto 'en vivo' / 'visitas' para que quepa perfecto en 360px/375px */
  .main-header .dikela-presence-label,
  .main-header .dikela-visits-label {
    display: none !important;
  }
  .main-header .dikela-presence-pulse-dot {
    width: 6.5px !important;
    height: 6.5px !important;
    margin-right: 3px !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.74rem !important;
    gap: 3px !important;
    border-radius: 999px !important;
  }
  .header-guest-signin-btn {
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
  }
}

/* 5. BREAKPOINT: MÓVILES ESTÁNDAR Y GRANDES (381px - 440px, ej. 390px, 412px, 428px) */
@media (min-width: 381px) and (max-width: 440px) {
  .main-header {
    height: 56px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    height: 56px !important;
  }
  .main-header .menu-icon,
  .main-header .btn-dikela-hamburger {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
  }
  .main-header .logo img {
    max-width: 86px !important;
    height: 26px !important;
  }
  .main-header .header-search-btn {
    display: inline-flex !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 4px !important;
  }
  .main-header .navbar-wrapper > ul > li > a.header-icon-link,
  .main-header .navbar-wrapper > ul > li.dropdown > a:not(.user-menu) {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .main-header .navbar-wrapper .header-icon,
  .main-header .navbar-wrapper svg.header-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .main-header .dikela-presence-label,
  .main-header .dikela-visits-label {
    display: none !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 7px !important;
    font-size: 0.76rem !important;
    gap: 4px !important;
    border-radius: 999px !important;
  }
  .header-guest-signin-btn {
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    font-size: 0.74rem !important;
  }
}

/* 6. BREAKPOINT: PHABLETS Y MÓVILES ANCHOS (441px - 767.98px) */
@media (min-width: 441px) and (max-width: 767.98px) {
  .main-header {
    height: 56px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .main-header .logo img {
    max-width: 95px !important;
    height: 28px !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 5px !important;
  }
  .main-header .navbar-wrapper > ul > li > a.header-icon-link,
  .main-header .navbar-wrapper > ul > li.dropdown > a:not(.user-menu) {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    gap: 5px !important;
  }
  /* Si la pantalla es >= 576px, mostrar texto 'en vivo' */
  @media (max-width: 575.98px) {
    .main-header .dikela-presence-label,
    .main-header .dikela-visits-label {
      display: none !important;
    }
  }
  @media (min-width: 576px) {
    .main-header .dikela-presence-label,
    .main-header .dikela-visits-label {
      display: inline-block !important;
    }
  }
}

/* 7. BREAKPOINT: TABLETS (768px - 1199.98px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .main-header {
    height: 64px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    height: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .main-header .search-wrapper {
    max-width: 280px !important;
    width: 100% !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 5px !important;
  }
  /* Dikela Pro compacto en tablet */
  .main-header a[aria-label="Dikela Pro"],
  .main-header .btn[href*="packages"] {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    gap: 4px !important;
  }
  @media (max-width: 991.98px) {
    .main-header .dikela-presence-label,
    .main-header .dikela-visits-label {
      display: none !important;
    }
  }
  @media (min-width: 992px) {
    .main-header .dikela-presence-label,
    .main-header .dikela-visits-label {
      display: inline-block !important;
    }
  }
}

/* 8. BREAKPOINT: ESCRITORIO (>= 1200px y 1920px) */
@media (min-width: 1200px) {
  .main-header {
    height: 68px !important;
  }
  .main-header .container,
  .main-header .container-fluid {
    height: 68px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .main-header .search-wrapper {
    max-width: 440px !important;
  }
  .main-header .navbar-wrapper > ul {
    gap: 8px !important;
  }
  .main-header .navbar-wrapper .dikela-streak-badge,
  .main-header .navbar-wrapper .dikela-live-presence-pill,
  .main-header .navbar-wrapper .dikela-visits-pill {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
    gap: 6px !important;
  }
  .main-header .dikela-presence-label,
  .main-header .dikela-visits-label {
    display: inline-block !important;
  }
}

/* OCULTAR ELEMENTOS DE ESCRITORIO EN MÓVIL (< 768px) */
@media (max-width: 767.98px) {
  .main-header #tiktok-live-header-btn,
  .main-header .tiktok-live-badge,
  .main-header .search-wrapper,
  .main-header .col.d-none.d-md-flex,
  .main-header div.d-none.d-md-flex,
  .main-header .col:has(.search-wrapper) {
    display: none !important;
  }
}
/* ==========================================================================
   DIKELA.ORG - RESPONSIVE TOTAL (PRODUCCIÓN 2026)
   Optimizaciones multi-dispositivo (320px, 360px, 375px, 390px, 412px, 428px, 768px, 1280px, 1920px)
   Modo Claro y Modo Oscuro (body.night-mode)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET GLOBAL & PREVENCIÓN DE SCROLL HORIZONTAL
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100vw !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Ocultar desbordamiento en contenedores estructurales */
html body .main-wrapper,
html body .app-layout,
html body .content-sub {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

/* Elementos decorativos de fondo: no generar scroll horizontal */
html body .decorative-circle,
html body .circle-1,
html body .circle-2,
html body .circle-3,
html body .circle-4,
html body .bg-circle {
  max-width: 100vw !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   1. PROBLEMA 1: BARRA DERECHA & VERSÍCULO DEL DÍA (Amén, WhatsApp, Devocional)
   -------------------------------------------------------------------------- */
html body .dikela-versiculo-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body .dikela-versiculo-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .dikela-verse-topbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .dikela-actions-border {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .dikela-primary-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .dikela-primary-actions .btn-verse-amen,
html body .dikela-primary-actions #dikela-btn-amen,
html body .dikela-primary-actions .btn-whatsapp-share,
html body .dikela-primary-actions .btn-verse-devocional {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 6px 10px !important;
  font-size: 0.80rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
}

html body .dikela-secondary-actions {
  flex-shrink: 0 !important;
  align-self: center !important;
}

html body .dikela-secondary-actions .btn-verse-secondary {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .dikela-discipulado-strip {
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   2. PROBLEMA 2: PUBLICACIÓN DESTACADA & BADGE COMUNIDAD (Ajuste a 360px y menores)
   -------------------------------------------------------------------------- */
html body .dikela-featured-section-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}

html body .dikela-featured-section-header h6 {
  font-size: 0.84rem !important;
  white-space: normal !important;
}

html body .dikela-featured-section-header .badge {
  font-size: 0.68rem !important;
  padding: 4px 8px !important;
  white-space: nowrap !important;
}

html body .post-badge-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 8px !important;
}

html body .post-badge-row .post-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   3. PROBLEMA 3: ESTADÍSTICAS DEL POST (Eliminar floats y alinear en flex limpio)
   -------------------------------------------------------------------------- */
html body .post-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
}

html body .post-stats .float-start,
html body .post-stats .float-end {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  margin: 0 !important;
}

html body .post-stats .ml10,
html body .post-stats .mr10 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .prayer-stats-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.80rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body .post-stats span.pointer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   4. PROBLEMA 4: PESTAÑAS (Oración / Testimonios / Discipulado / Feed) SCROLL TÁCTIL
   -------------------------------------------------------------------------- */
html body .dikela-mobile-quick-access {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 4px 0 8px 0 !important;
}

html body .quick-access-scroll-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding: 4px 12px 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  touch-action: pan-x !important;
}

html body .quick-access-scroll-track::-webkit-scrollbar {
  display: none !important;
}

html body .quick-pill {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Pestañas de Feed Segmentado (Para Ti / Oración / Discipulado / Siguiendo) */
html body .dikela-feed-segment-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

html body .dikela-feed-segment-bar::-webkit-scrollbar {
  display: none !important;
}

html body .dikela-feed-tab-btn {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
}

/* Feed tabs en index.redesign */
html body .feed-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

html body .feed-tabs::-webkit-scrollbar {
  display: none !important;
}

html body .feed-tab {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
}

/* Category pills en Reels y Biblioteca */
html body .category-scroll,
html body .category-scroll-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

html body .category-scroll::-webkit-scrollbar {
  display: none !important;
}

html body .category-pill,
html body .cat-pill {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
}

/* Profile tabs en Perfil (/administrador) */
html body .profile-tabs,
html body .profile-nav-tabs,
html body .nav.nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

html body .profile-tabs::-webkit-scrollbar,
html body .profile-nav-tabs::-webkit-scrollbar,
html body .nav.nav-tabs::-webkit-scrollbar {
  display: none !important;
}

html body .profile-tabs .nav-link,
html body .profile-nav-tabs .nav-link,
html body .nav.nav-tabs .nav-link {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* --------------------------------------------------------------------------
   5. PROBLEMA 5: CHIPS DE ETIQUETAS (Wrap limpio y adaptable)
   -------------------------------------------------------------------------- */
html body .post-tags,
html body .dikela-tags-container,
html body .quick-tag-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
}

html body .post-tag,
html body .quick-tag-badge,
html body .dikela-tag-pill,
html body .dikela-quick-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-size: 0.80rem !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  min-height: 34px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --------------------------------------------------------------------------
   6. PROBLEMA 6: BUFFER INFERIOR & BURBUJA DE CHAT / FAB (No tapar contenido)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Padding inferior de seguridad en todas las vistas móviles */
  html body,
  html body .main-wrapper,
    html body .app-layout,
  html body .feed-center,
  html body .container-fluid,
  html body .page-wrapper {
    padding-bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 16px) + 28px) !important;
  }

  /* Orbe de chat posicionado sobre la barra inferior sin tapar navegación */
  html body #dikela-chat-orb-wrapper {
    display: flex !important;
    position: fixed !important;
    bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 16px) + 10px) !important;
    right: 12px !important;
    z-index: 1035 !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Silenciar globos emergentes automáticos que bloquean toques */
  html body #dikela-orb-teaser {
    display: none !important;
  }

  /* Botón flotante central de la barra inferior */
  html body .footer-bottom-bar .center-action .k-center-create-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Elementos táctiles en barra inferior */
  html body .footer-bottom-bar .k-nav-item,
  html body .bottom-nav-item {
    min-height: 48px !important;
    min-width: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   7. PROBLEMA 7: ACCIONES DEL POST (¡Has orado!, Comentar, Compartir, WhatsApp)
   -------------------------------------------------------------------------- */
html body .post-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 4px !important;
}

html body .post-actions .action-btn,
html body .post-action-btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .prayer-action-btn,
html body .amen-action-btn,
html body .gloria-action-btn,
html body .reactions-wrapper,
html body .js_comment,
html body .js_share-native,
html body .dikela-post-wa-share {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .prayer-btn-content,
html body .amen-btn-content,
html body .gloria-btn-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* En móviles estrechos (320px - 390px): adaptar tamaños de texto sin desbordar */
@media (max-width: 428px) {
  html body .post-actions {
    gap: 4px !important;
    padding: 6px 2px !important;
  }

  html body .post-actions .action-btn,
  html body .post-action-btn {
    padding: 6px 6px !important;
    font-size: 0.76rem !important;
  }

  html body .prayer-btn-label,
  html body .amen-btn-label,
  html body .gloria-btn-label,
  html body .dikela-post-wa-share span {
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  html body .post-actions .action-btn,
  html body .post-action-btn {
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
  }

  html body .prayer-btn-label,
  html body .amen-btn-label,
  html body .gloria-btn-label,
  html body .dikela-post-wa-share span {
    font-size: 0.70rem !important;
  }
}

/* --------------------------------------------------------------------------
   8. AJUSTES ESPECÍFICOS DE PÁGINAS AUDITADAS
   -------------------------------------------------------------------------- */

/* INICIO: Feed Center, TV Banner, Publisher */
html body .app-layout {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .feed-center {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body .tv-banner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}

html body .tv-banner-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 180px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .tv-banner-text {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .tv-banner-text strong {
  display: block !important;
  font-size: 0.88rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .tv-banner-text span {
  display: block !important;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html body .tv-banner-btn {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .publisher-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}

html body .publisher-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .publisher-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body .pub-action {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767.98px) {
  html body .app-layout {
    grid-template-columns: 1fr !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 360px) {
  html body .app-layout {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* BIBLIOTECA (/biblioteca.php) */
html body .biblioteca-nav {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}

html body .nav-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1240px !important;
  box-sizing: border-box !important;
}

html body .brand-wrap {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

html body .brand-title {
  font-size: 0.95rem !important;
}

html body .brand-subtitle {
  font-size: 0.70rem !important;
}

html body .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

html body .btn-comunidad-back,
html body .user-pill,
html body .btn-ingresar-gold {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  box-sizing: border-box !important;
}

html body .category-scroll-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  overflow: hidden !important;
}

html body .category-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 8px !important;
}

html body .category-scroll::-webkit-scrollbar {
  display: none !important;
}

html body .cat-pill {
  flex-shrink: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
}

html body .search-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .btn-search-archive {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* SALAS LIVE (/salas_live.html) */
html body .salas-top-nav {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

html body .salas-top-nav::-webkit-scrollbar {
  display: none !important;
}

/* REELS (/reels) */
html body .topbar-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CHATBOX / MENSAJES (/messages) EMOJI BUTTONS */
html body .btn-quick-emoji {
  min-height: 44px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --------------------------------------------------------------------------
   9. SOPORTE COMPLETO MODO OSCURO (body.night-mode)
   -------------------------------------------------------------------------- */
body.night-mode .dikela-featured-section-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(225, 86, 55, 0.08) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

body.night-mode .dikela-featured-section-header h6 {
  color: #fcd34d !important;
}

body.night-mode .dikela-featured-section-header .badge {
  background: rgba(225, 86, 55, 0.22) !important;
  color: #fb923c !important;
  border-color: rgba(225, 86, 55, 0.4) !important;
}

body.night-mode .post-badge-row .post-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.night-mode .post-actions {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.night-mode .post-actions .action-btn,
body.night-mode .post-action-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.night-mode .post-actions .action-btn:hover,
body.night-mode .post-action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.night-mode .prayer-stats-pill .prayer-stats-label {
  color: #a8a29e !important;
}

body.night-mode .post-stats span.pointer {
  color: #cbd5e1 !important;
}

body.night-mode .post-tags .post-tag {
  background: rgba(200, 164, 90, 0.12) !important;
  color: #fcd34d !important;
  border-color: rgba(200, 164, 90, 0.30) !important;
}

body.night-mode .tv-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
  border-color: rgba(200, 164, 90, 0.35) !important;
}

body.night-mode .publisher-box {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.night-mode .publisher-input {
  color: #f8fafc !important;
}

body.night-mode .feed-tabs {
  background: transparent !important;
}

body.night-mode .feed-tab {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.night-mode .feed-tab.active {
  background: linear-gradient(135deg, #c9a84c, #9a7b2c) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   DIKELA.ORG - AUDIT RESPONSIVE HARDENING (FASE 2)
   Mobile Ultra-Compact (320px - 360px), Mobile (375px - 412px), Tablet (768px - 1024px)
   ========================================================================== */

/* 1. Prevenir overflow en popovers de usuario en móviles */
@media (max-width: 575.98px) {
  .user-popover-wrapper,
  .user-popover-content {
    width: min(340px, 92vw) !important;
    max-width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  .hr-heading-text {
    overflow: hidden !important;
  }
}

/* 2. Ergonomía táctil para controles interactivos en móviles (WCAG 2.5.5) */
@media (max-width: 767.98px) {
  .btn-quick-tag,
  .dikela-quick-tag-pill,
  .post-actions .action-btn,
  .post-action-btn,
  .quick-pill,
  .pub-action {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Tablas responsivas automáticas para prevenir overflow horizontal */
  table:not(.table-responsive) {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 3. Tablets (768px - 991px): espaciado armónico */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sg-offcanvas-mainbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 4. Escritorio ancho (1200px - 1920px): contención fluida */
@media (min-width: 1200px) {
  .container.sg-offcanvas {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   DIKELA MASTER DESIGN ELEVATION & FLUID RESPONSIVE SYSTEM
   Sprint 1, 2, 3: Hero TV, Publisher Chips, Feed Tabs, Micro-interactions
   ========================================================================== */

/* --- 1. HERO BANNER DIKELA TV ELEVATION --- */
.tv-banner {
  position: relative !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF7 50%, #FEF3C7 100%) !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
  border-radius: 22px !important;
  padding: 16px 20px !important;
  box-shadow: 0 10px 28px -6px rgba(217, 119, 6, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

.tv-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px -6px rgba(217, 119, 6, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}

.tv-banner-badge-live {
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.live-dot-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
  animation: live-pulse-anim 1.8s infinite !important;
}

@keyframes live-pulse-anim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.tv-banner-content {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.tv-banner-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d97706 !important;
  font-size: 1.25rem !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
  flex-shrink: 0 !important;
}

.tv-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tv-hd-pill {
  background: #d97706 !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  letter-spacing: 0.05em !important;
}

.tv-banner-text strong {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #0f172a !important;
}

.tv-banner-text span:not(.tv-hd-pill) {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

.tv-banner-btn {
  padding: 9px 22px !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.25s ease !important;
}

.tv-banner-btn:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4) !important;
}

/* Mobile TV banner adaptability */
@media (max-width: 640px) {
  .tv-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    text-align: left !important;
  }
  .tv-banner-content {
    justify-content: flex-start !important;
  }
  .tv-banner-btn {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px !important;
  }
}

/* --- 2. UPGRADED PUBLISHER CARD & CHIPS --- */
.publisher-box.upgraded-publisher {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 22px -4px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.publisher-box.upgraded-publisher:hover {
  border-color: rgba(217, 119, 6, 0.3) !important;
  box-shadow: 0 10px 28px -4px rgba(217, 119, 6, 0.1) !important;
  transform: translateY(-2px) !important;
}

.publisher-top-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.publisher-top-row .publisher-avatar {
  font-size: 2.2rem !important;
  color: #cbd5e1 !important;
  line-height: 1 !important;
}

.publisher-top-row .publisher-input-wrap {
  flex: 1 !important;
}

.publisher-top-row .publisher-input {
  width: 100% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 10px 18px !important;
  font-size: 0.92rem !important;
  color: #64748b !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.publisher-top-row .publisher-input:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.publisher-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.publisher-chips-row::-webkit-scrollbar {
  display: none !important;
}

.pub-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  min-height: 38px !important;
}

.pub-chip:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.96) !important;
}

.pub-chip.chip-prayer {
  background: #faf5ff !important;
  color: #9333ea !important;
  border: 1px solid #e9d5ff !important;
}

.pub-chip.chip-verse {
  background: #fefce8 !important;
  color: #ca8a04 !important;
  border: 1px solid #fef08a !important;
}

.pub-chip.chip-testimony {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.pub-chip.chip-media {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

/* --- 3. FEED TABS WITH SMOOTH HORIZONTAL SCROLL --- */
.feed-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px 2px !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.feed-tabs::-webkit-scrollbar {
  display: none !important;
}

.feed-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 18px !important;
  border-radius: 24px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  background: #FFFFFF !important;
  color: #64748b !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.feed-tab:hover {
  color: #0f172a !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
  transform: translateY(-1px) !important;
}

.feed-tab.active {
  background: linear-gradient(135deg, #e15637 0%, #ea580c 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.3) !important;
}

/* --- 4. FLUID TYPOGRAPHY & CARD POLISH --- */
.post-text {
  font-size: clamp(0.96rem, 1.2vw, 1.05rem) !important;
  line-height: 1.62 !important;
  color: #1e293b !important;
}

.post-card {
  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  box-shadow: 0 6px 20px -3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.post-card:hover {
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.07) !important;
  transform: translateY(-2px) !important;
}

/* --- 5. GLASSMORPHIC MOBILE BOTTOM NAV WITH SAFE INSETS --- */
.mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.mobile-bottom-nav .bottom-nav-item.create-btn .create-icon-wrap {
  background: linear-gradient(135deg, #d97706 0%, #ea580c 100%) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
  transition: transform 0.2s ease !important;
}

.mobile-bottom-nav .bottom-nav-item.create-btn:active .create-icon-wrap {
  transform: scale(0.92) !important;
}

/* --- 6. INTERACTIVE PRAYER / AMEN GLOW --- */
.verse-action-btn.primary,
.amen-btn {
  transition: all 0.2s ease !important;
}

.verse-action-btn.primary:active,
.amen-btn:active {
  transform: scale(0.94) !important;
}

.verse-action-btn.primary.active,
.amen-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45) !important;
}

/* ==========================================================================
   DIKELA PRAYER RETENTION LOOP (PASO 1)
   ========================================================================== */
.pray-together-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 700 !important;
  color: #d97706 !important;
  background: #fffdf5 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.pray-together-btn:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #d97706 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.2) !important;
}

.pray-together-btn.active-prayed {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.35) !important;
}

.dikela-pray-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 600 !important;
  color: #92400e !important;
  background: #fef3c7 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
}

@media (max-width: 575.98px) {
  #dikela-toast-container {
    top: auto !important;
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    right: 14px !important;
    max-width: 100% !important;
  }
}

/* Prayer button mobile text visibility */
.post-action-btn.pray-together-btn span,
.pray-together-btn span {
  display: inline-block !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}

.post-action-btn.pray-together-btn i,
.pray-together-btn i {
  vertical-align: middle !important;
}

.post-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* ==========================================================================
   DIKELA GROWTH MODAL BULLETPROOF STYLES
   ========================================================================== */
#modal-dikela-growth-gate {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
  display: none;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
}

#modal-dikela-growth-gate.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
}

#modal-dikela-growth-gate .modal-dialog {
  position: relative !important;
  width: 92% !important;
  max-width: 440px !important;
  margin: auto !important;
  pointer-events: auto !important;
  z-index: 100000 !important;
}

#modal-dikela-growth-gate .modal-content {
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

/* Modal buttons fix */
#modal-dikela-growth-gate .d-flex.flex-column,
#modal-dikela-growth-gate .modal-body .d-flex:last-of-type {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#modal-dikela-growth-gate a.btn {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: normal !important;
  text-align: center !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  margin: 0 !important;
}

#modal-dikela-growth-gate .modal-header {
  text-align: center !important;
  flex-direction: column !important;
}

/* ==========================================================================
   DIKELA SNGINE v5 HISTORIAS DE FE (MODERN 9:16 VERTICAL CARDS)
   ========================================================================== */

.stories-card-container {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 22px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 20px -3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 18px !important;
}

.stories-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
}

.stories-header-row strong {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.stories-dove-icon {
  font-size: 1.15rem !important;
}

.stories-pill-24h {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

.stories-sub-hint {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.stories-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 2px 8px 2px !important;
  scroll-snap-type: x mandatory !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* Base Card Style 9:16 Vertical */
.story-v5-card,
#stories .story {
  width: 122px !important;
  height: 195px !important;
  min-width: 122px !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
}

.story-v5-card:hover,
#stories .story:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

/* Card 1: Add Story / Compartir Fe */
.add-story-card,
.add-story {
  width: 122px !important;
  height: 195px !important;
  min-width: 122px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1.5px dashed rgba(217, 119, 6, 0.35) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  padding-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.add-story-card:hover,
.add-story:hover {
  transform: translateY(-3px) scale(1.025) !important;
  border-color: #d97706 !important;
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2) !important;
}

.story-card-top-avatar,
.add-story .img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 136px !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  border-radius: 16px 16px 0 0 !important;
  transition: transform 0.3s ease !important;
}

.add-story-card:hover .story-card-top-avatar,
.add-story:hover .img {
  transform: scale(1.06) !important;
}

.story-add-badge-wrap,
.add-story .add {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #d97706 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45) !important;
  z-index: 2 !important;
  margin-top: 114px !important;
  margin-bottom: 4px !important;
  font-size: 0.95rem !important;
  transition: transform 0.2s ease !important;
}

.add-story-card:hover .story-add-badge-wrap,
.add-story:hover .add {
  transform: rotate(90deg) scale(1.1) !important;
}

.story-add-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.80rem !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
}

/* User Story Cards */
.story-author-ring,
#stories .story > .item-link > .item-preview {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 2.5px !important;
  background: linear-gradient(135deg, #d97706 0%, #ea580c 50%, #f59e0b 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.5) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.story-author-ring.live-ring {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

.story-author-ring.blue-ring {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.5) !important;
}

.story-author-ring.emerald-ring {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.5) !important;
}

.story-author-ring img,
#stories .story > .item-link > .item-preview img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  object-fit: cover !important;
}

.story-live-badge {
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  background: rgba(239, 68, 68, 0.9) !important;
  color: #fff !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.04em !important;
}

.story-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%) !important;
  border-radius: 18px !important;
  z-index: 2 !important;
}

.story-card-info,
#stories .story > .item-link > .info {
  position: absolute !important;
  bottom: 12px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  text-align: left !important;
  width: auto !important;
  padding: 0 !important;
}

.story-card-info strong,
#stories .story > .item-link > .info b {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.2 !important;
}

.story-card-info span {
  font-size: 0.70rem !important;
  color: #cbd5e1 !important;
  display: block !important;
  margin-top: 1px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Mobile Responsiveness for 9:16 Story Cards */
@media (max-width: 575.98px) {
  .stories-card-container {
    padding: 12px 14px !important;
    border-radius: 20px !important;
  }
  .story-v5-card,
  #stories .story,
  .add-story-card,
  .add-story {
    width: 104px !important;
    height: 168px !important;
    min-width: 104px !important;
    border-radius: 16px !important;
  }
  .story-card-top-avatar,
  .add-story .img {
    height: 116px !important;
  }
  .story-add-badge-wrap,
  .add-story .add {
    width: 32px !important;
    height: 32px !important;
    margin-top: 98px !important;
    font-size: 0.82rem !important;
  }
  .story-add-label {
    font-size: 0.74rem !important;
  }
  .story-author-ring,
  #stories .story > .item-link > .item-preview {
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    left: 8px !important;
  }
  .story-card-info strong,
  #stories .story > .item-link > .info b {
    font-size: 0.76rem !important;
  }
  .story-card-info span {
    font-size: 0.65rem !important;
  }
}
\n/* ==========================================================================
   DIKELA SNGINE v5 HISTORIAS DE FE (MODERN 9:16 VERTICAL CARDS - BULLETPROOF)
   ========================================================================== */

.stories-card-container {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 22px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 20px -3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 18px !important;
}

body.night-mode .stories-card-container {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.stories-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 2px 8px 2px !important;
  scroll-snap-type: x mandatory !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

#stories {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Card 1: Add Story / Compartir Fe */
.add-story {
  width: 122px !important;
  height: 195px !important;
  min-width: 122px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1.5px dashed rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  padding-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.add-story:hover {
  transform: translateY(-3px) scale(1.025) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.2) !important;
}

.add-story .img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 136px !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  border-radius: 16px 16px 0 0 !important;
  transition: transform 0.3s ease !important;
}

.add-story:hover .img {
  transform: scale(1.06) !important;
}

.add-story .add {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45) !important;
  z-index: 2 !important;
  margin-top: 114px !important;
  margin-bottom: 4px !important;
  transition: transform 0.2s ease !important;
}

.add-story:hover .add {
  transform: rotate(90deg) scale(1.1) !important;
}

.add-story .add svg,
.add-story .add .main-icon {
  width: 14px !important;
  height: 14px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}

.story-add-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.80rem !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
}

body.night-mode .add-story {
  background: #1e293b !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

body.night-mode .add-story .add {
  border-color: #1e293b !important;
}

body.night-mode .story-add-label {
  color: #f1f5f9 !important;
}

/* Card 2+: User Story Cards (Zuck.js Timeline) */
.story-v5-card,
#stories .story {
  width: 122px !important;
  height: 195px !important;
  min-width: 122px !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  background: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
}

.story-v5-card:hover,
#stories .story:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

#stories .story > .item-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Preview Image fills 100% of the vertical card */
#stories .story > .item-link > .item-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: #0f172a !important;
  display: block !important;
  z-index: 1 !important;
  transform: none !important;
}

#stories .story > .item-link > .item-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  border: none !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

#stories .story:hover > .item-link > .item-preview img {
  transform: scale(1.06) !important;
}

/* Dark gradient overlay for crystal-clear readability */
#stories .story > .item-link:before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 40%, rgba(15, 23, 42, 0.90) 100%) !important;
  border-radius: 18px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Top-left Christian dove indicator badge */
#stories .story > .item-link:after {
  content: '🕊️' !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* Story Author Info at bottom */
#stories .story > .item-link > .info {
  position: absolute !important;
  bottom: 10px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 4 !important;
  text-align: left !important;
  width: auto !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#stories .story > .item-link > .info .name,
#stories .story > .item-link > .info strong,
#stories .story > .item-link > .info b {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  line-height: 1.25 !important;
}

#stories .story > .item-link > .info .time,
#stories .story > .item-link > .info span {
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  display: block !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Seen / Viewed Stories */
#stories .story.seen > .item-link > .item-preview img {
  opacity: 0.7 !important;
  filter: grayscale(25%) !important;
}

/* Zuck Modal Story Viewer - Fullscreen, centered, top z-index */
#zuck-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.94) !important;
  outline: none !important;
}

#zuck-modal-content {
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
}

#zuck-modal .story-viewer .slides .item {
  background: #000000 !important;
}

#zuck-modal .story-viewer .slides .item > .media {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#zuck-modal-content .story-viewer .head .left .info .name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Mobile Responsiveness for 9:16 Story Cards */
@media (max-width: 575.98px) {
  .stories-card-container {
    padding: 12px 14px !important;
    border-radius: 20px !important;
  }
  .story-v5-card,
  #stories .story,
  .add-story-card,
  .add-story {
    width: 104px !important;
    height: 168px !important;
    min-width: 104px !important;
    border-radius: 16px !important;
  }
  .story-card-top-avatar,
  .add-story .img {
    height: 116px !important;
  }
  .story-add-badge-wrap,
  .add-story .add {
    width: 32px !important;
    height: 32px !important;
    margin-top: 98px !important;
    font-size: 0.82rem !important;
  }
  .story-add-label {
    font-size: 0.74rem !important;
  }
  #stories .story > .item-link > .info .name,
  #stories .story > .item-link > .info strong,
  #stories .story > .item-link > .info b {
    font-size: 0.76rem !important;
  }
  #stories .story > .item-link > .info .time,
  #stories .story > .item-link > .info span {
    font-size: 0.62rem !important;
  }
}\n
/* ==========================================================================
   DIKELA UNIFIED HEADER BUTTON SYSTEM & RESPONSIVE POLISH
   ========================================================================== */
.header-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #64748b !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
}

.header-nav-btn:hover,
.header-nav-btn:focus,
.header-nav-btn[aria-expanded="true"] {
  background: rgba(0, 180, 216, 0.08) !important;
  color: #00b4d8 !important;
  border-color: rgba(0, 180, 216, 0.15) !important;
  transform: translateY(-1px);
}

.header-nav-btn:active {
  transform: translateY(0);
}

.header-nav-btn i {
  font-size: 20px !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

.header-nav-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

.header-nav-btn:hover i {
  transform: scale(1.08);
}

/* Badges / Counters */
.header-nav-btn .counter {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 0 4px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: 999px !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .header-nav-btn {
  color: #94a3b8 !important;
}
[data-theme="dark"] .header-nav-btn:hover,
[data-theme="dark"] .header-nav-btn:focus,
[data-theme="dark"] .header-nav-btn[aria-expanded="true"] {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
}
[data-theme="dark"] .header-nav-btn .counter {
  border-color: #0f172a !important;
}

/* Mobile search visibility clamp */
.header-search-btn {
  display: none !important;
}
@media (max-width: 767.98px) {
  .header-search-btn {
    display: inline-flex !important;
  }
}

/* Header clearance on desktop */
@media (min-width: 992px) {
  body {
    padding-top: 66px !important;
  }
  .main-wrapper {
    padding-top: 10px !important;
  }
}


/* ============================================================
   [DIKELA] MOBILE PUBLISHER & MEDIA UPLOAD SUITE (FOTOS, VIDEOS, REELS)
   ============================================================ */

/* 1. Bar de Acciones Rápidas de 1 Clic */
.dikela-publisher-quick-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(248, 250, 252, 0.5) !important;
}
body.night-mode .dikela-publisher-quick-bar {
  background: rgba(15, 23, 42, 0.4) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.dikela-publisher-quick-bar::-webkit-scrollbar {
  display: none !important;
}

/* Chips de Acción */
.dikela-pub-action-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  position: relative !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.dikela-pub-action-chip:active {
  transform: scale(0.94) !important;
}

/* Colores específicos para cada medio */
.dikela-pub-chip-camera {
  background: rgba(244, 63, 94, 0.08) !important;
  color: #e11d48 !important;
  border-color: rgba(244, 63, 94, 0.22) !important;
}
.dikela-pub-chip-photos {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}
.dikela-pub-chip-video {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
}
.dikela-pub-chip-reel {
  background: rgba(245, 158, 11, 0.10) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
.dikela-pub-chip-prayer {
  background: rgba(168, 85, 247, 0.08) !important;
  color: #9333ea !important;
  border-color: rgba(168, 85, 247, 0.22) !important;
}
.dikela-pub-chip-voice {
  background: rgba(20, 184, 166, 0.08) !important;
  color: #0d9488 !important;
  border-color: rgba(20, 184, 166, 0.22) !important;
}
.dikela-pub-chip-live {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}
.dikela-pub-chip-feeling {
  background: rgba(234, 179, 8, 0.08) !important;
  color: #ca8a04 !important;
  border-color: rgba(234, 179, 8, 0.22) !important;
}

body.night-mode .dikela-pub-chip-camera {
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fb7185 !important;
}
body.night-mode .dikela-pub-chip-photos {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
}
body.night-mode .dikela-pub-chip-video {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #a5b4fc !important;
}
body.night-mode .dikela-pub-chip-reel {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
}
body.night-mode .dikela-pub-chip-prayer {
  background: rgba(168, 85, 247, 0.14) !important;
  color: #d8b4fe !important;
}
body.night-mode .dikela-pub-chip-voice {
  background: rgba(20, 184, 166, 0.14) !important;
  color: #2dd4bf !important;
}

/* El input transparente cubre todo el chip para que cualquier toque active la subida */
.dikela-pub-action-chip.attach {
  position: relative !important;
  overflow: hidden !important;
}
.dikela-pub-action-chip.attach .x-uploader {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
  cursor: pointer !important;
  opacity: 0.001 !important;
}
.dikela-pub-action-chip.attach .x-uploader input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 6 !important;
  display: block !important;
}

/* 2. Tarjeta Flotante de Progreso de Subida en Tiempo Real */
.dikela-upload-progress-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)) !important;
  border: 1.5px solid rgba(225, 86, 55, 0.25) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(225, 86, 55, 0.08) !important;
  transition: all 0.3s ease !important;
}
body.night-mode .dikela-upload-progress-box {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.dikela-upload-pulse-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(225, 86, 55, 0.14), rgba(245, 158, 11, 0.22)) !important;
  color: #e15637 !important;
  font-size: 1.25rem !important;
}
.dikela-upload-title {
  font-size: 0.88rem !important;
  color: #1e293b !important;
}
body.night-mode .dikela-upload-title {
  color: #f8fafc !important;
}
.dikela-upload-pct-badge {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #e15637, #f59e0b) !important;
  color: #fff !important;
  padding: 4px 10px !important;
}
.dikela-upload-progress-track {
  height: 8px !important;
  border-radius: 99px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}
body.night-mode .dikela-upload-progress-track {
  background: rgba(255, 255, 255, 0.1) !important;
}
.dikela-upload-footer-meta {
  font-size: 0.72rem !important;
  color: #64748b !important;
}
body.night-mode .dikela-upload-footer-meta {
  color: #94a3b8 !important;
}

/* 3. Desplegable Móvil de Opciones Secundarias */
.dikela-toggle-more-tools-btn {
  background: rgba(248, 250, 252, 0.8) !important;
  border: 1.5px dashed rgba(100, 116, 139, 0.3) !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
  transition: all 0.2s ease !important;
}
.dikela-toggle-more-tools-btn:hover,
.dikela-toggle-more-tools-btn.active {
  background: rgba(225, 86, 55, 0.08) !important;
  border-color: #e15637 !important;
  color: #e15637 !important;
}

@media (max-width: 767.98px) {
  .publisher-tools-tabs {
    display: none !important;
  }
  .publisher-tools-tabs.dikela-tools-expanded {
    display: block !important;
    animation: fadeIn 0.25s ease forwards !important;
  }
  .publisher-footer-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .publisher-footer-buttons .d-grid {
    flex: 1 1 auto !important;
    display: block !important;
  }
  .dikela-publisher-submit-btn {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
}

/* 4. Botón Publicar de Alta Conversión */
.dikela-publisher-submit-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  min-height: 42px !important;
  padding: 8px 24px !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dikela-publisher-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(225, 86, 55, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}
.dikela-publisher-submit-btn:disabled,
.dikela-publisher-submit-btn.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 5. Previsualización de Fotos en Cuadrícula Ergonómica */
.publisher-attachments.js_attachments-photos ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  list-style: none !important;
}
.publisher-attachments.js_attachments-photos ul li.item {
  position: relative !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.publisher-attachments.js_attachments-photos ul li.item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.publisher-attachments.js_attachments-photos ul li.item .btn-close {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background-color: rgba(15, 23, 42, 0.75) !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  background-size: 10px !important;
  filter: invert(1) !important;
  opacity: 0.9 !important;
  z-index: 10 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* 6. Previsualización de Video y Reel */
.publisher-meta[data-meta="video"],
.publisher-meta[data-meta="reel"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin: 8px 14px !important;
  font-weight: 600 !important;
  color: #065f46 !important;
}
body.night-mode .publisher-meta[data-meta="video"],
body.night-mode .publisher-meta[data-meta="reel"] {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}
.publisher-custom-thumbnail {
  margin: 8px 14px !important;
}


/* ==========================================================================
   DIAMOND PRO & TABLET NATIVE UX INTEGRATION (DIKELA 2026)
   ========================================================================== */

/* 1. TABLET NEWSFEED: Hide rigid col-md-4 sidebar and expand feed to 100% */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sg-offcanvas-sidebar:not(.dikela-drawer-active):not(.active) {
    display: none !important;
  }
  .sg-offcanvas-mainbar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* 2. TABLET BOTTOM NAVIGATION BAR: Accessible on touch screens up to 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-bottom-bar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1040 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1.5px solid rgba(225, 86, 55, 0.16) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08) !important;
    height: 70px !important;
  }
  body.night-mode .footer-bottom-bar {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top: 1.5px solid rgba(225, 86, 55, 0.22) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.6) !important;
  }
  .footer-bottom-bar-inner {
    max-width: 620px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: 100% !important;
  }
  body:not(.reels-tiktok-mode) {
    padding-bottom: 74px !important;
  }
}

/* 3. DIAMOND PRO: Reactions Picker Floating Fix (Single Row & Z-Index) */
.reactions-container {
  z-index: 99999 !important;
}

@media (max-width: 991.98px) {
  .reactions-container {
    width: auto !important;
    white-space: nowrap !important;
    border-radius: 40px !important;
    position: fixed !important;
    background: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
    z-index: 99999 !important;
    padding: 6px 10px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  body.night-mode .reactions-container {
    background: #1e293b !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.6) !important;
  }
  .reactions-container .reactions_item {
    float: none !important;
    display: inline-block !important;
    width: 44px !important;
    height: 40px !important;
    margin: 0 2px !important;
    padding: 0 !important;
  }
  .reactions-container .reactions_item .emoji {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .reactions-container .reactions_item .emoji img {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
  }
  .reactions-container:has(.js_react-comment) {
    left: auto !important;
    right: 12px !important;
  }
}

/* 4. DIAMOND PRO: Notification Widget Nuclear Overrides (Clean Flex & No Overlap) */
.js_live-notifications .dropdown-widget {
  max-width: calc(100vw - 20px) !important;
}
.js_live-notifications .js_scroller ul,
.js_live-notifications .js_scroller > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: static !important;
  float: none !important;
}
.js_live-notifications .feeds-item {
  display: block !important;
  position: static !important;
  float: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.js_live-notifications .feeds-item .data-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: static !important;
  float: none !important;
  min-height: 0 !important;
  height: auto !important;
}
.js_live-notifications .feeds-item .data-avatar {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  display: block !important;
  float: none !important;
  position: static !important;
}
.js_live-notifications .feeds-item .data-content {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  float: none !important;
  position: static !important;
}

/* 5. Touch Target Enhancements (No Accidental Micro-Taps) */
@media (max-width: 991.98px) {
  .header-nav-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   DIKELA NATIVE MOBILE APP UX: AUTO-HIDE BARS & TOUCH HIGHLIGHT PURGE
   ========================================================================== */

/* 1. Header & Bottom Bar Auto-Hide on Scroll */
.main-header {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.main-header.nav-hidden {
  transform: translateY(-100%) !important;
}

.footer-bottom-bar {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.footer-bottom-bar.nav-hidden {
  transform: translateY(100%) !important;
}

/* 2. Purge Browser Tap Highlight (No Blue/Grey Boxes on Tap) */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* 3. Disable Accidental Text Selection on Navigation Elements */
.main-header,
.footer-bottom-bar,
.btn,
.k-nav-item,
.topbar-tabs,
.category-pill,
.reactions-container,
.center-action {
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* ==========================================================================
   DIKELA MULTI-DEVICE MASTER RESPONSIVE STANDARDS (MÓVILES & TABLETS 2026)
   Covers: Fold (280px), Android (360-412px), iPhone (375-440px), Tablets (600-1376px)
   ========================================================================== */

/* 1. PREVENCIÓN DE AUTO-ZOOM EN SAFARI IOS: Inputs a 16px o más */
@media screen and (max-width: 1024px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select,
  .form-control {
    font-size: 16px !important;
  }
}

/* 2. BARRA DE NAVEGACIÓN INFERIOR & SAFE AREAS (Notch y barra de gestos iPhone) */
.footer-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

body:not(.reels-tiktok-mode) {
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 3. TAMAÑO MÍNIMO DE BOTONES TÁCTILES: 44 x 44 px */
.header-nav-btn,
.btn-dikela-hamburger,
.footer-bottom-bar a,
.footer-bottom-bar button,
.k-nav-item,
.k-center-create-btn,
.action-btn,
.topbar-tab,
.topbar-btn,
.kethane-tv-action-btn,
.category-pill {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 4. REELS & IMMERSION: 100dvh para evitar recortes con la barra del navegador */
#kethane-reels-feed,
.kethane-reel-item,
.kethane-tv-reel-item {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

.sg-offcanvas-sidebar,
.sg-offcanvas .sg-offcanvas-sidebar {
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* 5. CASO EXTREMO: Plegables cerrados (Galaxy Fold a 280px) & móviles de 320px */
@media (max-width: 320px) {
  .logo img {
    max-height: 28px !important;
    width: auto !important;
  }
  .header-nav-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 2px !important;
  }
  .footer-bottom-bar-inner {
    padding: 0 4px !important;
    gap: 2px !important;
  }
  .k-nav-label {
    font-size: 0.60rem !important;
  }
  .card, .post {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .quick-pills-scroll,
  .kethane-category-bar {
    gap: 4px !important;
    padding: 6px 8px !important;
  }
}

/* 6. BREAKPOINTS MOBILE-FIRST:
   - Base: 320px en adelante (móviles)
   - 480px: Móviles grandes / Phablets
   - 768px: Tablets vertical (iPad mini, iPad Air, Galaxy Tab)
   - 1024px: Tablets horizontal / Laptops chicas
   - 1280px: Escritorio
*/

/* --- 480px: Móviles grandes (iPhone Plus/Max, Galaxy Ultra, Pixel 7/8) --- */
@media (min-width: 480px) and (max-width: 767.98px) {
  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .footer-bottom-bar-inner {
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* --- 768px: Tablets vertical (iPad Mini 744px, Tab 753-800px, iPad 820px, iPad Pro 834px) --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Ocultar sidebar fijo que comprime el muro; habilitar navegación off-canvas */
  .sg-offcanvas-sidebar:not(.dikela-drawer-active):not(.active) {
    display: none !important;
  }
  .sg-offcanvas-mainbar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .footer-bottom-bar {
    display: block !important;
    height: 70px !important;
  }
  .footer-bottom-bar-inner {
    max-width: 620px !important;
    margin: 0 auto !important;
  }
  /* Reels centrados y elegantes en tablet */
  #kethane-reels-feed {
    max-width: 580px !important;
    margin: 0 auto !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* --- 1024px: Tablets horizontal (1024x768, 1180x820, iPad Pro 12.9") --- */
@media (min-width: 1024px) {
  /* En horizontal / pantallas amplias: Layout de 2 columnas balanceado */
  .sg-offcanvas-sidebar {
    display: block !important;
    position: sticky !important;
    top: 80px !important;
  }
}

/* ==========================================================================
   DIKELA / SNGINE PORTAL THEME — SENIOR MOBILE-FIRST RESPONSIVE MASTER
   Adheres to strict mobile-first architecture (min-width breakpoints)
   Matrix Viewports: 280px - 1920px
   Author: Senior Front-End Responsive Engineer
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET & BASE FOUNDATIONS (Base: 320px+, with Fold 280px safeguards)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

:root {
  --header-h: 56px;
  --bottom-nav-h: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gold: #C8A45A;
  --gold-dark: #A07D38;
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  font-size: 16px !important;
  line-height: 1.55 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
}

/* Multimedia responsive safeguard */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. HEADER SUPERIOR & NAVEGACIÓN MÓVIL (Base Móvil)
   -------------------------------------------------------------------------- */
.main-header, header.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: var(--safe-top) !important;
  box-sizing: border-box !important;
}

body.night-mode .main-header {
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  padding: 0 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: none !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
}

body.night-mode .mobile-menu-btn {
  color: #f1f5f9 !important;
}

.logo-text {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Header Center Search: Colapsada en móvil pequeño para dar paso a logo + contador + login */
.header-center {
  display: none !important;
}

/* Header Right: Contador (435.234) + Botón Entrar ajustados para entrar siempre a 320px */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.visitor-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--gold-dark) !important;
  background: rgba(200, 164, 90, 0.12) !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.visitor-count i {
  font-size: 0.72rem !important;
}

.btn-login, #headerLoginBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(200, 164, 90, 0.25) !important;
  border: none !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. MENÚ DE 7 ÍTEMS MÓVIL (Con scroll horizontal interno sin desborde a 320-412px)
   -------------------------------------------------------------------------- */
.mobile-nav-strip {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .mobile-nav-strip {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-track {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}

.mobile-nav-track::-webkit-scrollbar {
  display: none !important;
}

.mobile-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body.night-mode .mobile-nav-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

.mobile-nav-pill.active, .mobile-nav-pill:hover {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.35) !important;
}

/* --------------------------------------------------------------------------
   3. BARRA INFERIOR MÓVIL & ELEMENTOS FLOTANTES
   -------------------------------------------------------------------------- */
.mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 1040 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

body.night-mode .mobile-bottom-nav,
body.night-mode .footer-bottom-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bottom-nav-item, .footer-bottom-bar a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 1 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  gap: 2px !important;
  padding: 4px 0 !important;
}

.bottom-nav-item i, .footer-bottom-bar a i {
  font-size: 1.15rem !important;
}

.bottom-nav-item.active, .footer-bottom-bar a.active {
  color: var(--gold-dark) !important;
}

/* Botón Central Crear/Publicar */
.bottom-nav-item.create-btn .create-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(200, 164, 90, 0.35) !important;
  margin-top: -8px !important;
}

/* Botón Flotante "Orar" — Offset inteligente sobre la barra móvil para nunca taparse */
.prayer-floating, #prayerBanner {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1030 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  max-width: calc(100vw - 24px) !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.prayer-floating.hidden {
  display: none !important;
}

.prayer-float-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

.prayer-float-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   4. HISTORIAS & BOTONERA (Scroll horizontal nativo con scroll-snap)
   -------------------------------------------------------------------------- */
.stories-wrapper, #dikelaStoriesWrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

.story-v5-card {
  scroll-snap-align: start !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  height: 168px !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
}

/* Botonera de Publicación: scroll horizontal en móvil si no entra */
.publisher-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
  padding: 8px 0 4px !important;
  scrollbar-width: none !important;
  width: 100% !important;
}

.publisher-chips-row::-webkit-scrollbar {
  display: none !important;
}

.pub-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  border-radius: 22px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS, INPUTS & MODALES (Mínimo 16px para evitar auto-zoom en iOS)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  input.form-control,
  .form-control,
  .form-control-sm,
  .form-control-lg,
  textarea,
  select,
  .search-bar input,
  #audiochat-text-input,
  #searchInput,
  .publisher-input {
    font-size: 16px !important;
  }
}

/* Modales con altura dinámica 100dvh y scroll interno en pantallas bajas (360x640 y landscape) */
.modal-dialog {
  max-height: calc(100dvh - 20px) !important;
  margin: 10px auto !important;
}

.modal-content {
  max-height: calc(100dvh - 20px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINT MOBILE-FIRST: 280px FOLD SAFEGUARD
   -------------------------------------------------------------------------- */
@media (max-width: 319.98px) {
  .logo-text {
    font-size: 1.15rem !important;
  }
  .visitor-count {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
  }
  .btn-login {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
  .story-v5-card {
    flex: 0 0 94px !important;
    width: 94px !important;
    height: 148px !important;
  }
}

/* --------------------------------------------------------------------------
   7. BREAKPOINT: 480px (Móviles Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .header-inner {
    padding: 0 16px !important;
  }
  .visitor-count {
    font-size: 0.80rem !important;
    padding: 5px 10px !important;
  }
  .btn-login {
    padding: 7px 18px !important;
    font-size: 0.86rem !important;
  }
  .story-v5-card {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 176px !important;
  }
}

/* --------------------------------------------------------------------------
   8. BREAKPOINT: 768px (Tablets Vertical)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-h: 62px;
  }

  .header-inner {
    padding: 0 20px !important;
  }

  .header-center {
    display: flex !important;
    flex: 1 !important;
    max-width: 400px !important;
    margin: 0 16px !important;
  }

  .search-bar {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .search-bar input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 16px 0 40px !important;
    font-size: 0.88rem !important;
  }

  .search-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
  }

  /* Ocultar la barra rápida horizontal en tablet vertical si el drawer está presente */
  .mobile-nav-strip {
    display: none !important;
  }

  /* Tablet layout: Contenido centrado con margen controlado o 2 columnas */
  .app-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + var(--safe-top) + 16px) 16px 80px !important;
  }

  .sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    background: #ffffff !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.12) !important;
    padding: calc(var(--header-h) + 20px) 16px 20px !important;
  }

  .sidebar-left.open {
    transform: translateX(0) !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------------------
   9. BREAKPOINT: 1024px (Tablets Horizontal & Laptops)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    --sidebar-w: 240px;
    --right-w: 300px;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* Ocultar barra inferior móvil en desktop y tablet horizontal */
  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-nav-strip {
    display: none !important;
  }

  /* Layout de 3 columnas de escritorio */
  .app-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + 24px) 20px 40px !important;
  }

  .sidebar-left {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    transform: none !important;
    box-shadow: none !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  .sidebar-right {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
  }

  .prayer-floating, #prayerBanner {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   10. BREAKPOINT: 1280px (Escritorio Estándar & Pantallas Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --sidebar-w: 260px;
    --right-w: 320px;
  }

  .app-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    max-width: 1360px !important;
    gap: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   11. BREAKPOINT: 1440px+ & 1920px (Ultra-Wide PC Safeguard)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .app-layout {
    max-width: 1440px !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   12. MOBILE LANDSCAPE MODE (~360px height)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 46px;
    --bottom-nav-h: 46px;
  }

  .main-header, header.main-header {
    height: var(--header-h) !important;
  }

  .header-inner {
    height: var(--header-h) !important;
  }

  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    height: var(--bottom-nav-h) !important;
    padding-bottom: 0 !important;
  }

  .bottom-nav-item span {
    display: none !important;
  }

  .story-v5-card {
    height: 130px !important;
    flex: 0 0 88px !important;
    width: 88px !important;
  }

  .modal-dialog {
    max-height: calc(100dvh - 12px) !important;
    margin: 6px auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. ACCESIBILIDAD & PREFERS-REDUCED-MOTION (WCAG AA Compliance)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   DIKELA / SNGINE PORTAL THEME — SENIOR MOBILE-FIRST RESPONSIVE MASTER
   Adheres to strict mobile-first architecture (min-width breakpoints)
   Matrix Viewports: 280px - 1920px
   Author: Senior Front-End Responsive Engineer
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET & BASE FOUNDATIONS (Base: 320px+, with Fold 280px safeguards)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

:root {
  --header-h: 56px;
  --bottom-nav-h: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gold: #C8A45A;
  --gold-dark: #A07D38;
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  font-size: 16px !important;
  line-height: 1.55 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
}

/* Multimedia responsive safeguard */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. HEADER SUPERIOR & NAVEGACIÓN MÓVIL (Base Móvil)
   -------------------------------------------------------------------------- */
.main-header, header.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: var(--safe-top) !important;
  box-sizing: border-box !important;
}

body.night-mode .main-header {
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  padding: 0 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: none !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
}

body.night-mode .mobile-menu-btn {
  color: #f1f5f9 !important;
}

.logo-text {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Header Center Search: Colapsada en móvil pequeño para dar paso a logo + contador + login */
.header-center {
  display: none !important;
}

/* Header Right: Contador (435.234) + Botón Entrar ajustados para entrar siempre a 320px */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.visitor-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--gold-dark) !important;
  background: rgba(200, 164, 90, 0.12) !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.visitor-count i {
  font-size: 0.72rem !important;
}

.btn-login, #headerLoginBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(200, 164, 90, 0.25) !important;
  border: none !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. MENÚ DE 7 ÍTEMS MÓVIL (Con scroll horizontal interno sin desborde a 320-412px)
   -------------------------------------------------------------------------- */
.mobile-nav-strip {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .mobile-nav-strip {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-track {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}

.mobile-nav-track::-webkit-scrollbar {
  display: none !important;
}

.mobile-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body.night-mode .mobile-nav-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

.mobile-nav-pill.active, .mobile-nav-pill:hover {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.35) !important;
}

/* --------------------------------------------------------------------------
   3. BARRA INFERIOR MÓVIL & ELEMENTOS FLOTANTES
   -------------------------------------------------------------------------- */
.mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 1040 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

body.night-mode .mobile-bottom-nav,
body.night-mode .footer-bottom-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bottom-nav-item, .footer-bottom-bar a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 1 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  gap: 2px !important;
  padding: 4px 0 !important;
}

.bottom-nav-item i, .footer-bottom-bar a i {
  font-size: 1.15rem !important;
}

.bottom-nav-item.active, .footer-bottom-bar a.active {
  color: var(--gold-dark) !important;
}

/* Botón Central Crear/Publicar */
.bottom-nav-item.create-btn .create-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(200, 164, 90, 0.35) !important;
  margin-top: -8px !important;
}

/* Botón Flotante "Orar" — Offset inteligente sobre la barra móvil para nunca taparse */
.prayer-floating, #prayerBanner {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1030 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  max-width: calc(100vw - 24px) !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.prayer-floating.hidden {
  display: none !important;
}

.prayer-float-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

.prayer-float-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   4. HISTORIAS & BOTONERA (Scroll horizontal nativo con scroll-snap)
   -------------------------------------------------------------------------- */
.stories-wrapper, #dikelaStoriesWrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

.story-v5-card {
  scroll-snap-align: start !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  height: 168px !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
}

/* Botonera de Publicación: scroll horizontal en móvil si no entra */
.publisher-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
  padding: 8px 0 4px !important;
  scrollbar-width: none !important;
  width: 100% !important;
}

.publisher-chips-row::-webkit-scrollbar {
  display: none !important;
}

.pub-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  border-radius: 22px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS, INPUTS & MODALES (Mínimo 16px para evitar auto-zoom en iOS)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  input.form-control,
  .form-control,
  .form-control-sm,
  .form-control-lg,
  textarea,
  select,
  .search-bar input,
  #audiochat-text-input,
  #searchInput,
  .publisher-input {
    font-size: 16px !important;
  }
}

/* Modales con altura dinámica 100dvh y scroll interno en pantallas bajas (360x640 y landscape) */
.modal-dialog {
  max-height: calc(100dvh - 20px) !important;
  margin: 10px auto !important;
}

.modal-content {
  max-height: calc(100dvh - 20px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINT MOBILE-FIRST: <= 360px & 280px FOLD SAFEGUARD
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .header-inner {
    padding: 0 6px !important;
  }
  .header-left {
    gap: 4px !important;
  }
  .mobile-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1.05rem !important;
  }
  .logo-text {
    font-size: 1.10rem !important;
  }
  .live-badge {
    padding: 1px 4px !important;
    font-size: 0.60rem !important;
  }
  .header-right {
    gap: 4px !important;
  }
  .visitor-count {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
  }
  .visitor-count i {
    font-size: 0.62rem !important;
  }
  .btn-login {
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
    min-height: 36px !important;
  }
  .story-v5-card {
    flex: 0 0 94px !important;
    width: 94px !important;
    height: 148px !important;
  }
}

/* --------------------------------------------------------------------------
   7. BREAKPOINT: 480px (Móviles Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .header-inner {
    padding: 0 16px !important;
  }
  .visitor-count {
    font-size: 0.80rem !important;
    padding: 5px 10px !important;
  }
  .btn-login {
    padding: 7px 18px !important;
    font-size: 0.86rem !important;
  }
  .story-v5-card {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 176px !important;
  }
}

/* --------------------------------------------------------------------------
   8. BREAKPOINT: 768px (Tablets Vertical)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-h: 62px;
  }

  .header-inner {
    padding: 0 20px !important;
  }

  .header-center {
    display: flex !important;
    flex: 1 !important;
    max-width: 400px !important;
    margin: 0 16px !important;
  }

  .search-bar {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .search-bar input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 16px 0 40px !important;
    font-size: 0.88rem !important;
  }

  .search-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
  }

  /* Ocultar la barra rápida horizontal en tablet vertical si el drawer está presente */
  .mobile-nav-strip {
    display: none !important;
  }

  /* Tablet layout: Contenido centrado con margen controlado o 2 columnas */
  .app-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + var(--safe-top) + 16px) 16px 80px !important;
  }

  .sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    background: #ffffff !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.12) !important;
    padding: calc(var(--header-h) + 20px) 16px 20px !important;
  }

  .sidebar-left.open {
    transform: translateX(0) !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------------------
   9. BREAKPOINT: 1024px (Tablets Horizontal & Laptops)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    --sidebar-w: 240px;
    --right-w: 300px;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* Ocultar barra inferior móvil en desktop y tablet horizontal */
  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-nav-strip {
    display: none !important;
  }

  /* Layout de 3 columnas de escritorio */
  .app-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + 24px) 20px 40px !important;
  }

  .sidebar-left {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    transform: none !important;
    box-shadow: none !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  .sidebar-right {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
  }

  .prayer-floating, #prayerBanner {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   10. BREAKPOINT: 1280px (Escritorio Estándar & Pantallas Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --sidebar-w: 260px;
    --right-w: 320px;
  }

  .app-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    max-width: 1360px !important;
    gap: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   11. BREAKPOINT: 1440px+ & 1920px (Ultra-Wide PC Safeguard)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .app-layout {
    max-width: 1440px !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   12. MOBILE LANDSCAPE MODE (~360px height)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 46px;
    --bottom-nav-h: 46px;
  }

  .main-header, header.main-header {
    height: var(--header-h) !important;
  }

  .header-inner {
    height: var(--header-h) !important;
  }

  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    height: var(--bottom-nav-h) !important;
    padding-bottom: 0 !important;
  }

  .bottom-nav-item span {
    display: none !important;
  }

  .story-v5-card {
    height: 130px !important;
    flex: 0 0 88px !important;
    width: 88px !important;
  }

  .modal-dialog {
    max-height: calc(100dvh - 12px) !important;
    margin: 6px auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. ACCESIBILIDAD & PREFERS-REDUCED-MOTION (WCAG AA Compliance)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   DIKELA / SNGINE PORTAL THEME — SENIOR MOBILE-FIRST RESPONSIVE MASTER
   Adheres to strict mobile-first architecture (min-width breakpoints)
   Matrix Viewports: 280px - 1920px
   Author: Senior Front-End Responsive Engineer
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET & BASE FOUNDATIONS (Base: 320px+, with Fold 280px safeguards)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

:root {
  --header-h: 56px;
  --bottom-nav-h: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gold: #C8A45A;
  --gold-dark: #A07D38;
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  font-size: 16px !important;
  line-height: 1.55 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
}

/* Multimedia responsive safeguard */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. HEADER SUPERIOR & NAVEGACIÓN MÓVIL (Base Móvil)
   -------------------------------------------------------------------------- */
.main-header, header.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: var(--safe-top) !important;
  box-sizing: border-box !important;
}

body.night-mode .main-header {
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  padding: 0 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: none !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
}

body.night-mode .mobile-menu-btn {
  color: #f1f5f9 !important;
}

.logo-text {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Header Center Search: Colapsada en móvil pequeño para dar paso a logo + contador + login */
.header-center {
  display: none !important;
}

/* Header Right: Contador (435.234) + Botón Entrar ajustados para entrar siempre a 320px */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.visitor-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--gold-dark) !important;
  background: rgba(200, 164, 90, 0.12) !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.visitor-count i {
  font-size: 0.72rem !important;
}

.btn-login, #headerLoginBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(200, 164, 90, 0.25) !important;
  border: none !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. MENÚ DE 7 ÍTEMS MÓVIL (Con scroll horizontal interno sin desborde a 320-412px)
   -------------------------------------------------------------------------- */
.mobile-nav-strip {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .mobile-nav-strip {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-track {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}

.mobile-nav-track::-webkit-scrollbar {
  display: none !important;
}

.mobile-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body.night-mode .mobile-nav-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

.mobile-nav-pill.active, .mobile-nav-pill:hover {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.35) !important;
}

/* --------------------------------------------------------------------------
   3. BARRA INFERIOR MÓVIL & ELEMENTOS FLOTANTES
   -------------------------------------------------------------------------- */
.mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 1040 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

body.night-mode .mobile-bottom-nav,
body.night-mode .footer-bottom-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bottom-nav-item, .footer-bottom-bar a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 1 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  gap: 2px !important;
  padding: 4px 0 !important;
}

.bottom-nav-item i, .footer-bottom-bar a i {
  font-size: 1.15rem !important;
}

.bottom-nav-item.active, .footer-bottom-bar a.active {
  color: var(--gold-dark) !important;
}

/* Botón Central Crear/Publicar */
.bottom-nav-item.create-btn .create-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(200, 164, 90, 0.35) !important;
  margin-top: -8px !important;
}

/* Botón Flotante "Orar" — Offset inteligente sobre la barra móvil para nunca taparse */
.prayer-floating, #prayerBanner {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1030 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  max-width: calc(100vw - 24px) !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.prayer-floating.hidden {
  display: none !important;
}

.prayer-float-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

.prayer-float-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   4. HISTORIAS & BOTONERA (Scroll horizontal nativo con scroll-snap)
   -------------------------------------------------------------------------- */
.stories-wrapper, #dikelaStoriesWrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

.story-v5-card {
  scroll-snap-align: start !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  height: 168px !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
}

/* Botonera de Publicación: scroll horizontal en móvil si no entra */
.publisher-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
  padding: 8px 0 4px !important;
  scrollbar-width: none !important;
  width: 100% !important;
}

.publisher-chips-row::-webkit-scrollbar {
  display: none !important;
}

.pub-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  border-radius: 22px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS, INPUTS & MODALES (Mínimo 16px para evitar auto-zoom en iOS)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  input.form-control,
  .form-control,
  .form-control-sm,
  .form-control-lg,
  textarea,
  select,
  .search-bar input,
  #audiochat-text-input,
  #searchInput,
  .publisher-input {
    font-size: 16px !important;
  }
}

/* Modales con altura dinámica 100dvh y scroll interno en pantallas bajas (360x640 y landscape) */
.modal-dialog {
  max-height: calc(100dvh - 20px) !important;
  margin: 10px auto !important;
}

.modal-content {
  max-height: calc(100dvh - 20px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINT MOBILE-FIRST: <= 360px & 280px FOLD SAFEGUARD
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .header-inner {
    padding: 0 6px !important;
  }
  .header-left {
    gap: 4px !important;
  }
  .mobile-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1.05rem !important;
  }
  .logo-text {
    font-size: 1.10rem !important;
  }
  .live-badge {
    padding: 1px 4px !important;
    font-size: 0.60rem !important;
  }
  .header-right {
    gap: 4px !important;
  }
  .visitor-count {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
  }
  .visitor-count i {
    font-size: 0.62rem !important;
  }
  .btn-login {
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
    min-height: 36px !important;
  }
  .story-v5-card {
    flex: 0 0 94px !important;
    width: 94px !important;
    height: 148px !important;
  }
}

@media (max-width: 300px) {
  .logo-text {
    font-size: 1.0rem !important;
  }
  .live-badge {
    display: none !important;
  }
  .visitor-count {
    padding: 2px 4px !important;
    font-size: 0.64rem !important;
  }
  .btn-login {
    padding: 3px 8px !important;
    font-size: 0.70rem !important;
    min-height: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   7. BREAKPOINT: 480px (Móviles Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .header-inner {
    padding: 0 16px !important;
  }
  .visitor-count {
    font-size: 0.80rem !important;
    padding: 5px 10px !important;
  }
  .btn-login {
    padding: 7px 18px !important;
    font-size: 0.86rem !important;
  }
  .story-v5-card {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 176px !important;
  }
}

/* --------------------------------------------------------------------------
   8. BREAKPOINT: 768px (Tablets Vertical)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-h: 62px;
  }

  .header-inner {
    padding: 0 20px !important;
  }

  .header-center {
    display: flex !important;
    flex: 1 !important;
    max-width: 400px !important;
    margin: 0 16px !important;
  }

  .search-bar {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .search-bar input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 16px 0 40px !important;
    font-size: 0.88rem !important;
  }

  .search-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
  }

  /* Ocultar la barra rápida horizontal en tablet vertical si el drawer está presente */
  .mobile-nav-strip {
    display: none !important;
  }

  /* Tablet layout: Contenido centrado con margen controlado o 2 columnas */
  .app-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + var(--safe-top) + 16px) 16px 80px !important;
  }

  .sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    background: #ffffff !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.12) !important;
    padding: calc(var(--header-h) + 20px) 16px 20px !important;
  }

  .sidebar-left.open {
    transform: translateX(0) !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------------------
   9. BREAKPOINT: 1024px (Tablets Horizontal & Laptops)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    --sidebar-w: 240px;
    --right-w: 300px;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* Ocultar barra inferior móvil en desktop y tablet horizontal */
  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-nav-strip {
    display: none !important;
  }

  /* Layout de 3 columnas de escritorio */
  .app-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + 24px) 20px 40px !important;
  }

  .sidebar-left {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    transform: none !important;
    box-shadow: none !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  .sidebar-right {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
  }

  .prayer-floating, #prayerBanner {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   10. BREAKPOINT: 1280px (Escritorio Estándar & Pantallas Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --sidebar-w: 260px;
    --right-w: 320px;
  }

  .app-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    max-width: 1360px !important;
    gap: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   11. BREAKPOINT: 1440px+ & 1920px (Ultra-Wide PC Safeguard)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .app-layout {
    max-width: 1440px !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   12. MOBILE LANDSCAPE MODE (~360px height)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 46px;
    --bottom-nav-h: 46px;
  }

  .main-header, header.main-header {
    height: var(--header-h) !important;
  }

  .header-inner {
    height: var(--header-h) !important;
  }

  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    height: var(--bottom-nav-h) !important;
    padding-bottom: 0 !important;
  }

  .bottom-nav-item span {
    display: none !important;
  }

  .story-v5-card {
    height: 130px !important;
    flex: 0 0 88px !important;
    width: 88px !important;
  }

  .modal-dialog {
    max-height: calc(100dvh - 12px) !important;
    margin: 6px auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. ACCESIBILIDAD & PREFERS-REDUCED-MOTION (WCAG AA Compliance)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ==========================================================================
   DIKELA — MOBILE-FIRST SUITE & RESPONSIVE AUDIT FIXES (PRODUCCIÓN)
   ========================================================================== */

/* 1. Neutralizar botones flotantes huérfanos de oración al final del DOM */
body > .prayer-float-btn,
body > .prayer-float-close,
.app-layout + .prayer-float-btn,
.app-layout + .prayer-float-close,
#prayerClose,
.prayer-floating,
.prayer-floating.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* 2. Scroll horizontal fluido en botonera de publicación (320px–375px) */
.publisher-chips-row,
.dikela-publisher-tags-row,
.publisher-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
}
.publisher-chips-row::-webkit-scrollbar,
.dikela-publisher-tags-row::-webkit-scrollbar,
.publisher-chips::-webkit-scrollbar {
  display: none !important;
}
.pub-chip,
.dikela-pub-action-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 3. Tablet vertical (600px a 991px) — evitar diseño móvil estirado */
@media (min-width: 600px) and (max-width: 991px) {
  .feed-center,
  .sidebar-right {
    max-width: 640px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .post-card,
  .verse-hero-card,
  .sidebar-widget {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4. Escritorio (>=1024px) — eliminar copyright duplicado en sidebar izquierdo */
@media (min-width: 1024px) {
  .sidebar-left .sidebar-footer {
    display: none !important;
  }
}

/* 5. Bottom Sheet Nativo para Modales en Móvil */
@media (max-width: 767.98px) {
  #modal-dikela-growth-gate .modal-dialog,
  .modal.show .modal-dialog.dk-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: translateY(0) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1070 !important;
  }
  #modal-dikela-growth-gate .modal-content,
  .modal-dialog.dk-bottom-sheet .modal-content {
    border-radius: 28px 28px 0 0 !important;
    border: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #modal-dikela-growth-gate .modal-header::before,
  .modal-dialog.dk-bottom-sheet .modal-header::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    margin: -8px auto 12px !important;
  }
  #modal-dikela-growth-gate .btn {
    min-height: 46px !important;
  }
}

/* 6. Safe Area Inset en barra inferior móvil */
.mobile-bottom-nav,
.footer-bottom-bar,
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 7. Historias de Fe — Scroll horizontal con snap táctil */
.stories-wrapper,
#dikelaStoriesWrapper {
  display: flex !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x mandatory !important;
  gap: 10px !important;
}
.stories-wrapper::-webkit-scrollbar,
#dikelaStoriesWrapper::-webkit-scrollbar {
  display: none !important;
}
.story-v5-card {
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
}

/* 8. Mini-reproductor flotante de Radio adhesivo */
.dk-mobile-miniplayer {
  display: none;
}
@media (max-width: 767.98px) {
  .dk-mobile-miniplayer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    height: 48px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 164, 90, 0.35);
    border-radius: 16px;
    padding: 0 12px 0 14px;
    z-index: 998;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  .dk-mobile-miniplayer.dk-minimized {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }
  .dk-mini-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .dk-mini-live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: dkMiniPulse 1.8s infinite;
    flex-shrink: 0;
  }
  @keyframes dkMiniPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
  }
  .dk-mini-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .dk-mini-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-mini-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dk-mini-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .dk-mini-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8a45a, #a07d38);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(200, 164, 90, 0.4);
    transition: transform 0.15s ease;
  }
  .dk-mini-play-btn:active {
    transform: scale(0.92);
  }
  .dk-mini-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
  }
}

/* 9. Menú central rápido (+) en Thumb Zone */
.dk-quick-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dk-quick-menu-overlay.active {
  display: block;
  opacity: 1;
}
.dk-quick-actions-sheet {
  display: none;
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 14px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25);
  z-index: 1050;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.dk-quick-actions-sheet.open {
  display: block;
  transform: translateY(0) scale(1);
  opacity: 1;
}
.dk-quick-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 12px;
  text-align: center;
}
.dk-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dk-quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: #1e293b;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.dk-quick-action-btn:active {
  transform: scale(0.97);
  background: #f1f5f9;
}
.dk-quick-icon {
  font-size: 1.25rem;
}

/* 10. Guardrails móviles (No zoom en iPhone + No flicker) */
@media (max-width: 767.98px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
}
/* ==========================================================================
   DIKELA / SNGINE PORTAL THEME — SENIOR MOBILE-FIRST RESPONSIVE MASTER
   Adheres to strict mobile-first architecture (min-width breakpoints)
   Matrix Viewports: 280px - 1920px
   Author: Senior Front-End Responsive Engineer
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET & BASE FOUNDATIONS (Base: 320px+, with Fold 280px safeguards)
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

:root {
  --header-h: 56px;
  --bottom-nav-h: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gold: #C8A45A;
  --gold-dark: #A07D38;
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  font-size: 16px !important;
  line-height: 1.55 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
}

/* Multimedia responsive safeguard */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   1. HEADER SUPERIOR & NAVEGACIÓN MÓVIL (Base Móvil)
   -------------------------------------------------------------------------- */
.main-header, header.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: var(--safe-top) !important;
  box-sizing: border-box !important;
}

body.night-mode .main-header {
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  padding: 0 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: none !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
}

body.night-mode .mobile-menu-btn {
  color: #f1f5f9 !important;
}

.logo-text {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Header Center Search: Colapsada en móvil pequeño para dar paso a logo + contador + login */
.header-center {
  display: none !important;
}

/* Header Right: Contador (435.234) + Botón Entrar ajustados para entrar siempre a 320px */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.visitor-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--gold-dark) !important;
  background: rgba(200, 164, 90, 0.12) !important;
  border: 1px solid rgba(200, 164, 90, 0.3) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.visitor-count i {
  font-size: 0.72rem !important;
}

.btn-login, #headerLoginBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(200, 164, 90, 0.25) !important;
  border: none !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. MENÚ DE 7 ÍTEMS MÓVIL (Con scroll horizontal interno sin desborde a 320-412px)
   -------------------------------------------------------------------------- */
.mobile-nav-strip {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .mobile-nav-strip {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-track {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}

.mobile-nav-track::-webkit-scrollbar {
  display: none !important;
}

.mobile-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body.night-mode .mobile-nav-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

.mobile-nav-pill.active, .mobile-nav-pill:hover {
  background: rgba(200, 164, 90, 0.15) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(200, 164, 90, 0.35) !important;
}

/* --------------------------------------------------------------------------
   3. BARRA INFERIOR MÓVIL & ELEMENTOS FLOTANTES
   -------------------------------------------------------------------------- */
.mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 1040 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

body.night-mode .mobile-bottom-nav,
body.night-mode .footer-bottom-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bottom-nav-item, .footer-bottom-bar a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 1 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  gap: 2px !important;
  padding: 4px 0 !important;
}

.bottom-nav-item i, .footer-bottom-bar a i {
  font-size: 1.15rem !important;
}

.bottom-nav-item.active, .footer-bottom-bar a.active {
  color: var(--gold-dark) !important;
}

/* Botón Central Crear/Publicar */
.bottom-nav-item.create-btn .create-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #C8A45A 0%, #A07D38 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(200, 164, 90, 0.35) !important;
  margin-top: -8px !important;
}

/* Botón Flotante "Orar" — Offset inteligente sobre la barra móvil para nunca taparse */
.prayer-floating, #prayerBanner {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1030 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  max-width: calc(100vw - 24px) !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.prayer-floating.hidden {
  display: none !important;
}

.prayer-float-btn {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

.prayer-float-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   4. HISTORIAS & BOTONERA (Scroll horizontal nativo con scroll-snap)
   -------------------------------------------------------------------------- */
.stories-wrapper, #dikelaStoriesWrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.stories-wrapper::-webkit-scrollbar {
  display: none !important;
}

.story-v5-card {
  scroll-snap-align: start !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  height: 168px !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
}

/* Botonera de Publicación: scroll horizontal en móvil si no entra */
.publisher-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
  padding: 8px 0 4px !important;
  scrollbar-width: none !important;
  width: 100% !important;
}

.publisher-chips-row::-webkit-scrollbar {
  display: none !important;
}

.pub-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  border-radius: 22px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS, INPUTS & MODALES (Mínimo 16px para evitar auto-zoom en iOS)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  input.form-control,
  .form-control,
  .form-control-sm,
  .form-control-lg,
  textarea,
  select,
  .search-bar input,
  #audiochat-text-input,
  #dikela-chat-input,
  #searchInput,
  .publisher-input {
    font-size: 16px !important;
  }
}

/* Modales con altura dinámica 100dvh y scroll interno en pantallas bajas (360x640 y landscape) */
.modal-dialog {
  max-height: calc(100dvh - 20px) !important;
  margin: 10px auto !important;
}

.modal-content {
  max-height: calc(100dvh - 20px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --------------------------------------------------------------------------
   6. BREAKPOINT MOBILE-FIRST: <= 360px & 280px FOLD SAFEGUARD
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .header-inner {
    padding: 0 6px !important;
  }
  .header-left {
    gap: 4px !important;
  }
  .mobile-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1.05rem !important;
  }
  .logo-text {
    font-size: 1.10rem !important;
  }
  .live-badge {
    padding: 1px 4px !important;
    font-size: 0.60rem !important;
  }
  .header-right {
    gap: 4px !important;
  }
  .visitor-count {
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
  }
  .visitor-count i {
    font-size: 0.62rem !important;
  }
  .btn-login {
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
    min-height: 36px !important;
  }
  .story-v5-card {
    flex: 0 0 94px !important;
    width: 94px !important;
    height: 148px !important;
  }
}

@media (max-width: 300px) {
  .logo-text {
    font-size: 1.0rem !important;
  }
  .live-badge {
    display: none !important;
  }
  .visitor-count {
    padding: 2px 4px !important;
    font-size: 0.64rem !important;
  }
  .btn-login {
    padding: 3px 8px !important;
    font-size: 0.70rem !important;
    min-height: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   7. BREAKPOINT: 480px (Móviles Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .header-inner {
    padding: 0 16px !important;
  }
  .visitor-count {
    font-size: 0.80rem !important;
    padding: 5px 10px !important;
  }
  .btn-login {
    padding: 7px 18px !important;
    font-size: 0.86rem !important;
  }
  .story-v5-card {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 176px !important;
  }
}

/* --------------------------------------------------------------------------
   8. BREAKPOINT: 768px (Tablets Vertical)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-h: 62px;
  }

  .header-inner {
    padding: 0 20px !important;
  }

  .header-center {
    display: flex !important;
    flex: 1 !important;
    max-width: 400px !important;
    margin: 0 16px !important;
  }

  .search-bar {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .search-bar input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 16px 0 40px !important;
    font-size: 0.88rem !important;
  }

  .search-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
  }

  /* Ocultar la barra rápida horizontal en tablet vertical si el drawer está presente */
  .mobile-nav-strip {
    display: none !important;
  }

  /* Tablet layout: Contenido centrado con margen controlado o 2 columnas */
  .app-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + var(--safe-top) + 16px) 16px 80px !important;
  }

  .sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    background: #ffffff !important;
    z-index: 1060 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.12) !important;
    padding: calc(var(--header-h) + 20px) 16px 20px !important;
  }

  .sidebar-left.open {
    transform: translateX(0) !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------------------
   9. BREAKPOINT: 1024px (Tablets Horizontal & Laptops)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    --sidebar-w: 240px;
    --right-w: 300px;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* Ocultar barra inferior móvil en desktop y tablet horizontal */
  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-nav-strip {
    display: none !important;
  }

  /* Layout de 3 columnas de escritorio */
  .app-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: calc(var(--header-h) + 24px) 20px 40px !important;
  }

  .sidebar-left {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    transform: none !important;
    box-shadow: none !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  .sidebar-right {
    position: sticky !important;
    top: calc(var(--header-h) + 24px) !important;
    height: calc(100vh - var(--header-h) - 48px) !important;
    height: calc(100dvh - var(--header-h) - 48px) !important;
    overflow-y: auto !important;
  }

  .prayer-floating, #prayerBanner {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   10. BREAKPOINT: 1280px (Escritorio Estándar & Pantallas Grandes)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --sidebar-w: 260px;
    --right-w: 320px;
  }

  .app-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w) !important;
    max-width: 1360px !important;
    gap: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   11. BREAKPOINT: 1440px+ & 1920px (Ultra-Wide PC Safeguard)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .app-layout {
    max-width: 1440px !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   12. MOBILE LANDSCAPE MODE (~360px height)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 46px;
    --bottom-nav-h: 46px;
  }

  .main-header, header.main-header {
    height: var(--header-h) !important;
  }

  .header-inner {
    height: var(--header-h) !important;
  }

  .mobile-bottom-nav, #mobileBottomNav, .footer-bottom-bar {
    height: var(--bottom-nav-h) !important;
    padding-bottom: 0 !important;
  }

  .bottom-nav-item span {
    display: none !important;
  }

  .story-v5-card {
    height: 130px !important;
    flex: 0 0 88px !important;
    width: 88px !important;
  }

  .modal-dialog {
    max-height: calc(100dvh - 12px) !important;
    margin: 6px auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. ACCESIBILIDAD & PREFERS-REDUCED-MOTION (WCAG AA Compliance)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   DIKELA — MOBILE MASTER HARMONIZATION & ACCESSIBILITY AUDIT (PHASE 5)
   ========================================================================== */

/* 1. Supresión de banners flotantes PWA invasivos superiores y modo inmersivo */
#dk-pwa-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* En modo inmersivo (Reels 9:16 vertical), ocultar banners flotantes PWA para no tapar controles */
body[data-page="reels"] .dikela-pwa-banner,
body[data-page="reels"] #dikelaPwaSmartBanner,
body.reels-tiktok-mode .dikela-pwa-banner,
body.reels-tiktok-mode #dikelaPwaSmartBanner,
.reels-page .dikela-pwa-banner,
.reels-page #dikelaPwaSmartBanner {
  display: none !important;
}

/* 2. Manejo dinámico de teclado virtual móvil (visualViewport) */
body.keyboard-open .dk-bottom-nav,
body.keyboard-open .footer-bottom-bar,
body.keyboard-open #kethaneMobileBottomBar,
body.keyboard-open .dikela-guest-sticky-bar,
body.keyboard-open #dikelaGuestStickyBar,
body.keyboard-open .dikela-pwa-banner,
body.keyboard-open #dikelaPwaSmartBanner {
  display: none !important;
  pointer-events: none !important;
}

/* 3. Desacoplamiento de barras flotantes en Tablets (768px - 991px) para evitar colisión */
@media (min-width: 768px) and (max-width: 991.98px) {
  #dikelaGuestStickyBar {
    left: 20px !important;
    bottom: 24px !important;
    max-width: 360px !important;
  }
  .dikela-pwa-banner,
  #dikelaPwaSmartBanner {
    right: 20px !important;
    bottom: 96px !important; /* Apilado superior para no colisionar en x */
    max-width: 360px !important;
  }
}

/* 4. Enlaces de pie de página accesibles en móviles (Área táctil >= 44x44px) */
@media (max-width: 767.98px) {
  .dikela-footer-links a,
  .footer-links a,
  footer a,
  .fr_footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 6px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* 5. Holgura de scroll en formulario de autenticación para que nada quede tapado */
@media (max-width: 767.98px) {
  .fr_auth_form {
    margin-bottom: 40px !important;
  }
  .fr_welcome_switch {
    min-height: 48px !important;
    padding: 8px 0 !important;
  }
  .fr_welcome_switch a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
  }
}

/* 6. Inputs móviles: Prevención total de zoom en iOS Safari (>= 16px) */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 7. Modo noche universal para textos de bienvenida y formularios */
body.night-mode .fr_welcome_title {
  color: #f8fafc !important;
}
body.night-mode .fr_welcome_subtitle {
  color: #94a3b8 !important;
}
body.night-mode .fr_auth_form label {
  color: #e2e8f0 !important;
}
body.night-mode .fr_welcome_switch span {
  color: #94a3b8 !important;
}
body.night-mode .fr_welcome_switch a {
  color: #38bdf8 !important;
}

/* 8. UNIFICACIÓN DE BARRA INFERIOR MÓVIL: Una sola barra maestra (#kethaneMobileBottomBar) */
#dk-bottom-nav,
.dk-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

.footer-bottom-bar,
#kethaneMobileBottomBar {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  z-index: 1060 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
}

body.night-mode .footer-bottom-bar,
body.night-mode #kethaneMobileBottomBar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Ocultar en modo inmersivo de Reels y en landing de bienvenida */
body.reels-tiktok-mode .footer-bottom-bar,
body.reels-tiktok-mode #kethaneMobileBottomBar,
body.fr_welcome_page .footer-bottom-bar,
body.fr_welcome_page #kethaneMobileBottomBar,
body[data-page="signin"] .footer-bottom-bar,
body[data-page="signin"] #kethaneMobileBottomBar {
  display: none !important;
}

/* En desktop/pantallas anchas >= 992px, ocultar la barra inferior móvil */
@media (min-width: 992px) {
  .footer-bottom-bar,
  #kethaneMobileBottomBar {
    display: none !important;
  }
}

/* ==========================================================================
   9. VIEW TRANSITIONS API NATIVO (Navegación Fluida sin Pantallazo Blanco)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both dkViewFadeOut;
}

::view-transition-new(root) {
  animation: 140ms cubic-bezier(0, 0, 0.2, 1) both dkViewFadeIn;
}

@keyframes dkViewFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.99); }
}

@keyframes dkViewFadeIn {
  from { opacity: 0; transform: scale(1.005); }
  to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   10. SILUETAS DE CARGA SHIMMER (Skeleton Loaders en Feed y AJAX)
   ========================================================================== */
@keyframes dkShimmerAnim {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.dk-skeleton-shimmer {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.6) 25%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.6) 75%) !important;
  background-size: 200% 100% !important;
  animation: dkShimmerAnim 1.4s infinite linear !important;
  border-radius: 8px !important;
}

body.night-mode .dk-skeleton-shimmer {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.8) 25%, rgba(51, 65, 85, 0.95) 50%, rgba(30, 41, 59, 0.8) 75%) !important;
  background-size: 200% 100% !important;
}

.dk-skeleton-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .dk-skeleton-card {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dk-skeleton-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.dk-skeleton-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.dk-skeleton-title {
  width: 140px !important;
  height: 14px !important;
  margin-bottom: 6px !important;
}

.dk-skeleton-subtitle {
  width: 90px !important;
  height: 10px !important;
}

.dk-skeleton-body {
  width: 100% !important;
  height: 14px !important;
  margin-bottom: 8px !important;
}

.dk-skeleton-body.short {
  width: 65% !important;
}

.dk-skeleton-media {
  width: 100% !important;
  height: 200px !important;
  border-radius: 12px !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   11. CHAT MÓVIL A PANTALLA COMPLETA & BOTTOM SHEETS TOUCH ACTION
   ========================================================================== */
.dikela-sheet-container,
#dikelaQuickCreateSheet,
#dk-create-sheet,
#dk-comments-sheet {
  touch-action: pan-y !important;
  will-change: transform !important;
}

@media (max-width: 767.98px) {
  body.chat-active #kethaneMobileBottomBar,
  body.chat-active .footer-bottom-bar,
  body.chat-open #kethaneMobileBottomBar,
  body.chat-open .footer-bottom-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 12. OCULTAR BARRA INFERIOR CUANDO HAY UN MODAL U ONBOARDING ACTIVO */
body.modal-open #kethaneMobileBottomBar,
body.modal-open .footer-bottom-bar,
.modal.show ~ #kethaneMobileBottomBar,
.modal.show ~ .footer-bottom-bar,
.dikela-onboarding-backdrop ~ #kethaneMobileBottomBar,
.dikela-onboarding-backdrop ~ .footer-bottom-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#modal-onboarding {
  z-index: 2050 !important;
}

/* 13. AISLAMIENTO MÓVIL NO INTRUSIVO: COOKIE CONSENT Y BANNERS */
@media (max-width: 767.98px) {
  .cc-window.cc-banner,
  .cc-window.cc-top,
  .cc-window.cc-bottom {
    bottom: calc(var(--dk-bottom-nav-h, 58px) + 8px) !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    z-index: 1040 !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }
}
body.modal-open .cc-window,
body.modal-open #dk-pwa-banner,
.modal.show ~ .cc-window,
.modal.show ~ #dk-pwa-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 14. BOTÓN VER MÁS PUBLICACIONES MEJORADO */
.see-more.js_see-more {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid rgba(225, 86, 55, 0.25) !important;
  border-radius: 9999px !important;
  color: #e15637 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 14px rgba(225, 86, 55, 0.08) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  display: block !important;
  max-width: 320px !important;
  margin: 24px auto 36px auto !important;
  text-align: center !important;
}
.see-more.js_see-more:hover {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(225, 86, 55, 0.3) !important;
  transform: translateY(-1px) !important;
}
body.night-mode .see-more.js_see-more {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
body.night-mode .see-more.js_see-more:hover {
  background: linear-gradient(135deg, #e15637 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
}




/* =========================================================================
   ADMIN & MODERATOR PANEL DESKTOP STICKY SIDEBAR & FIXED HEADER FIX
   ========================================================================= */
@media (min-width: 992px) {
  .main-header, header.main-header {
    transform: none !important;
  }
}

body:has(.admin-sidebar) .main-header,
.admin-sidebar ~ * .main-header {
  transform: none !important;
}

@media (min-width: 768px) {
  .admin-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 76px !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    padding-right: 6px !important;
  }
  .admin-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .admin-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  body.night-mode .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
  .sg-offcanvas-mainbar {
    min-height: calc(100vh - 120px);
  }
}

#zuck-modal-content .story-viewer .head .right .close {
  display: block !important;
  font-size: 32px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  cursor: pointer !important;
  z-index: 100020 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

#zuck-modal .story-viewer a.link[href*="javascript"] {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
}