/* ==========================================================================
   FEUNIVERSAL - APP LAYOUT & COMPONENT STYLES
   Estética Glassmorphic Crystal adaptativa (Día / Noche)
   ========================================================================== */

/* Layout General Adaptable (Android, iOS, iPad, Desktop) */
.app-container {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding-top: calc(12px + var(--sat));
  padding-bottom: calc(115px + var(--sab));
  padding-left: calc(14px + var(--sal));
  padding-right: calc(14px + var(--sar));
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
}

/* Touch responsiveness para iOS Safari y Android */
button, input, select, textarea, .crystal-card, .bottom-nav-item, .tradition-chip {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   HEADER SLIM (UNA SOLA LÍNEA LIMPIA, CERO TRASLAPES)
   ========================================================================== */
.hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  background: var(--glass-surface-1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-sizing: border-box;
}

/* ==========================================================================
   HEADER SAGRADO DUAL (CROWN & DASHBOARD PORTAL)
   Bisel Glass Iluminado, Jerarquía Devocional y Soporte Nocturno/Diurno
   ========================================================================== */
.hud-header-dual {
  width: 100%;
  padding: 14px 16px 14px;
  background: linear-gradient(180deg, rgba(28, 32, 60, 0.88) 0%, rgba(15, 17, 34, 0.92) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.55), 
              inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35), 
              inset 0 -1px 0 0 rgba(0, 0, 0, 0.6), 
              0 0 24px rgba(245, 158, 11, 0.08);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 100;
  margin-bottom: 20px;
  transition: all var(--transition-normal);
}

[data-theme="light"] .hud-header-dual {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1.5px solid rgba(217, 119, 6, 0.35);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 
              inset 0 1.5px 0 0 #ffffff, 
              inset 0 -1px 0 0 rgba(217, 119, 6, 0.12),
              0 0 20px rgba(245, 158, 11, 0.12);
}

/* Renglón 1: Identidad Sagrada & Badge */
.hud-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.brand-icon-wrap {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.55), 0 0 8px rgba(99, 102, 241, 0.35);
  border: 2px solid rgba(251, 191, 36, 0.75);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-icon-wrap:hover {
  transform: scale(1.06) rotate(3deg);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.75);
}

[data-theme="light"] .brand-icon-wrap {
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35), 0 0 10px rgba(245, 158, 11, 0.25);
  border: 2px solid rgba(217, 119, 6, 0.85);
}

.brand-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.brand-titles h1 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  background: linear-gradient(135deg, #ffffff 10%, #fef08a 45%, #f59e0b 80%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.4));
}

[data-theme="light"] .brand-titles h1 {
  background: linear-gradient(135deg, #0f172a 15%, #78350f 65%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.brand-tagline {
  font-size: 0.65rem;
  color: #fbbf24;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 2px;
  opacity: 0.95;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .brand-tagline {
  color: #b45309;
  text-shadow: none;
}

/* Badge de Membresía / Trial Joya */
.hud-membership-badge {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.18) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.85);
  color: #fef08a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hud-membership-badge svg,
.hud-membership-badge .icon-svg {
  display: none !important;
}

.hud-membership-badge:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.45), rgba(217, 119, 6, 0.65));
  box-shadow: 0 0 24px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.hud-membership-badge:active {
  transform: scale(0.97);
}

[data-theme="light"] .hud-membership-badge {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.98) 100%);
  border: 1.5px solid rgba(217, 119, 6, 0.75);
  color: #92400e;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.25), inset 0 1.5px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .hud-membership-badge:hover {
  background: linear-gradient(135deg, rgba(253, 230, 138, 1), rgba(252, 211, 77, 1));
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}

/* Renglón 2: Barra de Acciones Rápidas con Bisel Glass & Scroll Suave */
.hud-header-bottom-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 6px;
  box-sizing: border-box;
}

.hud-header-bottom-row::-webkit-scrollbar {
  display: none;
}

/* Botones Base de Acciones Rápidas con Bisel Especular */
.hud-quick-btn {
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(20, 24, 48, 0.7) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.28),
              inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0 13px;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hud-quick-btn .icon-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hud-quick-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

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

/* Acentos Devocionales con Luz Propia y Bisel Especular */
.hud-btn-novena {
  border-color: rgba(245, 158, 11, 0.75) !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.28) 0%, rgba(28, 31, 56, 0.9) 100%) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(217, 119, 6, 0.5) !important;
  color: #ffffff !important;
}
.hud-btn-novena #icon-btn-novenas {
  color: #fbbf24;
}
.hud-btn-novena:hover {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  border-color: #fbbf24 !important;
}

.hud-btn-compass {
  border-color: rgba(56, 189, 248, 0.75) !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.28) 0%, rgba(28, 31, 56, 0.9) 100%) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35), 
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(14, 165, 233, 0.5) !important;
  color: #ffffff !important;
}
.hud-btn-compass #icon-btn-compass {
  color: #38bdf8;
}
.hud-btn-compass:hover {
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  border-color: #38bdf8 !important;
}

.hud-btn-habit {
  border-color: rgba(249, 115, 22, 0.75) !important;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.28) 0%, rgba(28, 31, 56, 0.9) 100%) !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35), 
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(234, 88, 12, 0.5) !important;
  color: #ffffff !important;
}
.hud-btn-habit #icon-btn-habit {
  color: #fb923c;
}
.hud-btn-habit:hover {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  border-color: #fb923c !important;
}

.hud-btn-notif {
  border-color: rgba(16, 185, 129, 0.75) !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.28) 0%, rgba(28, 31, 56, 0.9) 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), 
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(5, 150, 105, 0.5) !important;
  color: #ffffff !important;
}
.hud-btn-notif #icon-btn-notif {
  color: #34d399;
}
.hud-btn-notif:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  border-color: #34d399 !important;
}

/* Separador Sutil Vertical */
.hud-header-divider {
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  flex-shrink: 0;
  margin: 0 2px;
}

[data-theme="light"] .hud-header-divider {
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.18), rgba(0,0,0,0.05));
}

/* Botones de Icono Circulares (Tema y Ancho) */
.hud-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  background: var(--glass-surface-2);
  border: 1.5px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
}

.hud-icon-btn:hover {
  background: var(--glass-surface-hover);
  border-color: var(--accent-gold);
  box-shadow: 0 0 14px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1.5px);
}

.hud-icon-btn:active {
  transform: scale(0.95);
}

.hud-icon-btn .icon-svg {
  width: 16px;
  height: 16px;
}

/* Adaptaciones para Modo Diurno (Light Mode) */
[data-theme="light"] .hud-quick-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.92) 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 
              inset 0 1px 0 rgba(255, 255, 255, 1),
              inset 0 -1px 0 rgba(148, 163, 184, 0.2);
  color: #1e293b;
}

[data-theme="light"] .hud-btn-novena {
  border-color: rgba(217, 119, 6, 0.7) !important;
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.75) 100%) !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.2), 
              inset 0 1.5px 0 rgba(255, 255, 255, 1),
              inset 0 -1px 0 rgba(217, 119, 6, 0.3) !important;
  color: #78350f !important;
}
[data-theme="light"] .hud-btn-novena #icon-btn-novenas {
  color: #b45309;
}

[data-theme="light"] .hud-btn-compass {
  border-color: rgba(14, 165, 233, 0.7) !important;
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.75) 100%) !important;
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.2), 
              inset 0 1.5px 0 rgba(255, 255, 255, 1),
              inset 0 -1px 0 rgba(14, 165, 233, 0.3) !important;
  color: #0369a1 !important;
}
[data-theme="light"] .hud-btn-compass #icon-btn-compass {
  color: #0369a1;
}

[data-theme="light"] .hud-btn-habit {
  border-color: rgba(249, 115, 22, 0.7) !important;
  background: linear-gradient(180deg, rgba(255, 237, 213, 0.95) 0%, rgba(254, 215, 170, 0.75) 100%) !important;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.2), 
              inset 0 1.5px 0 rgba(255, 255, 255, 1),
              inset 0 -1px 0 rgba(249, 115, 22, 0.3) !important;
  color: #9a3412 !important;
}
[data-theme="light"] .hud-btn-habit #icon-btn-habit {
  color: #c2410c;
}

[data-theme="light"] .hud-btn-notif {
  border-color: rgba(16, 185, 129, 0.7) !important;
  background: linear-gradient(180deg, rgba(209, 250, 229, 0.95) 0%, rgba(167, 243, 208, 0.75) 100%) !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2), 
              inset 0 1.5px 0 rgba(255, 255, 255, 1),
              inset 0 -1px 0 rgba(16, 185, 129, 0.3) !important;
  color: #065f46 !important;
}
[data-theme="light"] .hud-btn-notif #icon-btn-notif {
  color: #047857;
}

[data-theme="light"] .hud-icon-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.92) 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
  color: #1e293b;
}

[data-theme="light"] .hud-icon-btn:hover {
  background: #ffffff;
  border-color: var(--accent-gold);
  box-shadow: 0 2px 12px rgba(217, 119, 6, 0.25);
}

}


.hud-icon-btn .icon-svg {
  width: 16px;
  height: 16px;
}

/* Botón de Cierre Circular de Modales (Ergonómico, Centrado y No Deformable) */
.btn-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  inset-inline-end: 14px;
  inset-inline-start: auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  border-radius: 50%;
  background: var(--glass-surface-2);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  z-index: 10;
  box-shadow: var(--glass-shadow-sm);
}

[dir="rtl"] .btn-modal-close,
[data-lang="ar"] .btn-modal-close,
[data-lang="he"] .btn-modal-close,
[data-lang="ur"] .btn-modal-close {
  right: auto !important;
  left: 14px !important;
}

.btn-modal-close:hover,
.btn-modal-close:active {
  background: var(--glass-surface-hover);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 12px var(--accent-gold-glow);
  transform: scale(1.05);
}

.btn-modal-close .icon-svg,
.btn-modal-close svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  stroke-width: 2.2;
}

/* Vistas Principales (Tabs) */

.tab-view {
  display: none;
  animation: fadeIn 0.25s ease-in-out;
}

.tab-view.active-view {
  display: block;
}

/* Sub-Vistas Segmentadas */
.segmented-subview {
  display: none;
  animation: fadeIn 0.25s ease-in-out;
}

.segmented-subview.active-subview {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SUB-VISTA 1: HUD & BALANCE ESPIRITUAL
   ========================================================================== */
.hud-grid-top {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 820px) {
  .hud-grid-top {
    grid-template-columns: 1fr;
  }
}

.hud-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 820px) {
  .hud-grid-bottom {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BUSCADOR UNIVERSAL SPOTLIGHT
   ========================================================================== */
.crystal-search-wrapper {
  margin-bottom: 14px;
  position: relative;
  width: 100%;
}

.crystal-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#icon-search-lens {
  position: absolute;
  left: 14px;
  color: var(--accent-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 18px;
  height: 18px;
  z-index: 5;
  transition: color var(--transition-fast);
}

[dir="rtl"] #icon-search-lens {
  left: auto;
  right: 14px;
}

#icon-search-lens .icon-svg,
#icon-search-lens svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

#input-prayer-search {
  width: 100%;
  padding: 11px 40px 11px 42px;
  background: var(--glass-surface-1);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.84rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

[dir="rtl"] #input-prayer-search {
  padding: 11px 42px 11px 40px;
  text-align: right;
}

#input-prayer-search:focus {
  border-color: var(--accent-gold);
  background: var(--glass-surface-2);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

#input-prayer-search::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  #input-prayer-search {
    padding: 10px 36px 10px 38px;
    font-size: 0.82rem;
  }
  [dir="rtl"] #input-prayer-search {
    padding: 10px 38px 10px 36px;
  }
  #input-prayer-search::placeholder {
    font-size: 0.80rem;
  }
}

#btn-clear-search {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  z-index: 5;
  transition: color var(--transition-fast);
}

[dir="rtl"] #btn-clear-search {
  right: auto;
  left: 10px;
}

#btn-clear-search:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   BUSCADOR ANÍMICO ("¿CÓMO TE SIENTES HOY?")
   ========================================================================== */
.emotional-pulse-container {
  margin-bottom: 22px;
}

.section-title-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .icon-svg {
  width: 18px;
  height: 18px;
  color: var(--accent-gold);
}

.emotional-chips-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.emotional-chips-row::-webkit-scrollbar {
  display: none;
}

.emotional-chip {
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--radius-full);
  background: var(--glass-surface-1);
  border: 1.5px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.emotional-chip .icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.emotional-chip:hover {
  background: var(--glass-surface-hover);
  color: var(--text-primary);
  border-color: var(--glass-border-highlight);
  transform: translateY(-1px);
}

.emotional-chip.selected {
  background: linear-gradient(135deg, var(--glass-surface-active), var(--glass-surface-hover));
  color: var(--text-primary);
  border-color: var(--accent-gold);
  box-shadow: 0 0 15px var(--accent-gold-glow);
}

/* ==========================================================================
   SUB-VISTA 2: INTENCIONES UNIVERSALES (GRID COMPACTO 2X2)
   ========================================================================== */
.intentions-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.intentions-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 580px) {
  .intentions-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.intention-card-compact {
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.intention-card-compact:hover {
  transform: translateY(-2px);
}

.intention-card-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  min-width: 0;
}

.intention-card-compact-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intention-card-compact-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ==========================================================================
   SUB-VISTA 3: CATÁLOGO DE ORACIONES
   ========================================================================== */
.prayers-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

@media (max-width: 480px) {
  .prayers-catalog-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.prayer-item-card {
  padding: 16px 14px;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  content-visibility: auto;
  contain-intrinsic-size: auto 155px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.prayer-item-card:hover {
  transform: translateY(-2px);
}

.prayer-item-card:active {
  transform: scale(0.985);
  opacity: 0.92;
}

.catalog-infinite-sentinel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  min-height: 48px;
}

/* ==========================================================================
   LECTOR ESPEJO PARALELO (DUAL-PANE)
   ========================================================================== */
.mirror-panes-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .mirror-panes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.pane-sacred, .pane-translation, .pane-translation-block {
  background: var(--glass-surface-2);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  border: 1px solid var(--glass-border);
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.pane-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--glass-inset);
  color: var(--accent-gold);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.pane-content-original {
  font-family: var(--font-sacred);
  font-size: 1.30rem;
  line-height: 1.9;
  color: var(--text-primary);
  margin-top: 14px;
  white-space: pre-line;
  word-break: break-word;
}

.pane-phonetic-guide {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
}

.phonetic-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  margin-bottom: 6px;
}

.phonetic-text {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.65;
  color: #cbd5e1;
  word-break: break-word;
}

.pane-content-translation {
  font-family: var(--font-main);
  font-size: 1.18rem;
  line-height: 1.85;
  color: var(--text-primary);
  margin-top: 14px;
  white-space: pre-line;
  word-break: break-word;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ==========================================================================
   SISTEMA DE ESCALADO DE FUENTE PARA LECTURA (Aa)
   Oraciones (Lector Espejo), Novenas y Sagradas Escrituras
   ========================================================================== */
:root {
  --reader-font-scale: 1;
}

[data-reader-scale="medium"] {
  --reader-font-scale: 1.15;
}

[data-reader-scale="large"] {
  --reader-font-scale: 1.30;
}

.pane-content-original,
.pane-content-translation,
.phrase-text-body,
.pane-phonetic-guide .phonetic-text,
.novena-meditacion-body,
.novena-prayer-body,
.verse-body-text,
.verse-text-body {
  font-size: calc(var(--base-reader-size, 1.02rem) * var(--reader-font-scale, 1)) !important;
  line-height: calc(var(--base-reader-lh, 1.70) + (var(--reader-font-scale, 1) - 1) * 0.25) !important;
  transition: font-size 0.2s ease, line-height 0.2s ease;
}

[dir="rtl"] .phrase-text-body,
[dir="rtl"] .pane-content-original,
[dir="rtl"] .pane-content-translation,
[dir="rtl"] .novena-meditacion-body,
[dir="rtl"] .novena-prayer-body,
[dir="rtl"] .verse-body-text,
[dir="rtl"] .verse-text-body {
  --base-reader-size: 1.32rem;
  --base-reader-lh: 1.85;
}

/* ==========================================================================
   TARJETA CONSAGRADA DE COMPARTIR BENDICIÓN (VIRAL GROWTH ENGINE)
   ========================================================================== */
.blessing-share-card {
  width: 100%;
  background: var(--glass-surface-2);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 18px 0 12px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.blessing-share-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  text-align: left;
}

@media (max-width: 600px) {
  .blessing-share-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

.blessing-medallion {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  box-shadow: 0 0 16px var(--accent-gold-glow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.blessing-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blessing-text-wrapper {
  flex: 1;
  min-width: 0;
}

.blessing-share-title {
  font-family: var(--font-sacred);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-gold);
  margin: 0 0 3px;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.blessing-share-desc {
  font-size: 0.80rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.blessing-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.btn-blessing-hero {
  flex: 1.2;
  min-width: 180px;
  min-height: 46px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-blessing-hero:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

.btn-blessing-more {
  flex: 1;
  min-width: 150px;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--radius-full);
  background: var(--glass-surface-1);
  border: 1.5px solid var(--glass-border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-blessing-more:hover {
  background: var(--glass-surface-2);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

.blessing-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Aura Resplandeciente al Concluir la Oración (TTS onend / Scroll Bottom) */
.blessing-share-card.blessing-card-aura {
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 32px rgba(245, 158, 11, 0.35), 0 0 16px rgba(56, 189, 248, 0.25);
  animation: sacredAuraPulse 3s infinite ease-in-out;
}

@keyframes sacredAuraPulse {
  0% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25), 0 0 8px rgba(56, 189, 248, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 38px rgba(245, 158, 11, 0.55), 0 0 22px rgba(56, 189, 248, 0.35);
    border-color: rgba(245, 158, 11, 0.85);
  }
  100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25), 0 0 8px rgba(56, 189, 248, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
  }
}

/* Adaptación para Modo Día (Light Theme) */
[data-theme="light"] .blessing-share-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(217, 119, 6, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .blessing-share-title {
  color: #b45309;
}

[data-theme="light"] .blessing-share-desc {
  color: #475569;
}

[data-theme="light"] .btn-blessing-more {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="light"] .blessing-share-card.blessing-card-aura {
  border-color: rgba(217, 119, 6, 0.75);
  box-shadow: 0 0 28px rgba(217, 119, 6, 0.35), 0 0 14px rgba(14, 165, 233, 0.2);
}

/* ==========================================================================
   GRAN BIBLIOTECA DE LAS SAGRADAS ESCRITURAS (RESPONSIVE SCRIPTORIUM)
   ========================================================================== */
.scripture-hero-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 16px;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .scripture-hero-desc {
    max-width: 780px;
    font-size: 0.90rem;
  }
}

.scripture-controls-wrap {
  max-width: 600px;
  margin: 0 auto 14px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .scripture-controls-wrap {
    max-width: 960px;
  }
}

.scripture-card-container {
  max-width: 1080px;
  margin: 0 auto 30px;
  padding: 0 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .scripture-card-container {
    padding: 0 4px;
  }
}

.scripture-single-pane {
  width: 100%;
  box-sizing: border-box;
}

.scripture-single-pane .verse-text-body {
  font-size: 1.05rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .scripture-single-pane .crystal-card {
    padding: 26px 30px !important;
  }
  .scripture-single-pane .verse-text-body {
    font-size: 1.12rem;
    line-height: 1.85;
  }
}

.tts-reading-active {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
  animation: pulse-glow-cyan 2.2s infinite ease-in-out;
}

@keyframes pulse-glow-cyan {
  0%, 100% { box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); }
  50% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.55); }
}

.scripture-panes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

.scripture-nav-bottom {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 16px;
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  clear: both;
}

/* ==========================================================================
   ALTAR DIGITAL INTERACTIVO
   ========================================================================== */
.altar-hero {
  text-align: center;
  padding: 24px 16px;
  margin-bottom: 20px;
}

.candles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.candle-card {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.candle-flame-wrapper {
  position: relative;
  width: 32px;
  height: 38px;
  margin: 4px auto -4px;
  z-index: 2;
}

.candle-flame {
  width: 20px;
  height: 32px;
  border-radius: 50% 50% 25% 25%;
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #fef08a 30%, var(--candle-flame-color, #eab308) 65%, #ca8a04 100%);
  filter: drop-shadow(0 0 18px var(--candle-aura-glow, rgba(234, 179, 8, 0.95)));
  animation: candle-flicker 1.8s infinite ease-in-out;
  margin: 0 auto;
}

.candle-wick {
  width: 2.5px;
  height: 10px;
  background: #1e293b;
  margin: -4px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(255,255,255,0.4);
}

.candle-body {
  width: 74px;
  height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, var(--candle-wax-color, rgba(234, 179, 8, 0.85)) 15%, rgba(15, 23, 42, 0.92) 85%);
  border-radius: 8px 8px 18px 18px;
  margin: 0 auto;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-top: 2.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 6px 24px var(--candle-aura-glow, rgba(234, 179, 8, 0.3)), inset 0 2px 8px rgba(255,255,255,0.35), inset 0 -6px 14px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.candle-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.5) 0%, transparent 80%);
  border-radius: 50%;
}

.candle-symbol {
  font-size: 1.5rem;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.8);
  font-weight: 700;
  z-index: 1;
  user-select: none;
}

.candle-peticion {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--text-primary);
  margin: 12px 0 8px;
  min-height: 42px;
  line-height: 1.45;
}

/* ==========================================================================
   CONTADOR TÁCTIL MULTISISTEMA
   ========================================================================== */
.bead-counter-panel {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 28px 18px;
}

/* ==========================================================================
   CONTADOR DEVOCIONAL SAGRADO (TRILOGÍA DE ALTO IMPACTO VISUAL)
   ========================================================================== */
.bead-trigger-wrapper {
  position: relative;
  width: 224px;
  height: 224px;
  margin: 22px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Halo Místico Respirante de Fondo */
.bead-mystic-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(99, 102, 241, 0.16) 45%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
  animation: beadHaloBreath 4s ease-in-out infinite alternate;
}

@keyframes beadHaloBreath {
  0% { transform: scale(0.95); opacity: 0.55; }
  100% { transform: scale(1.08); opacity: 0.95; }
}

/* 2. Medallón Interactivo con Bisel de Orfebrería y Profundidad 3D */
.bead-interactive-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(30, 36, 60, 0.94) 0%, rgba(12, 14, 24, 0.98) 85%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 
    inset 0 4px 24px rgba(0, 0, 0, 0.9),
    inset 0 0 20px rgba(245, 158, 11, 0.22),
    0 0 35px rgba(245, 158, 11, 0.35),
    0 16px 36px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.bead-interactive-circle::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #fffbeb 0%, #fbbf24 30%, #b45309 60%, #fef08a 85%, #d97706 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.bead-interactive-circle:active {
  transform: scale(0.95);
  box-shadow: 
    inset 0 6px 28px rgba(0, 0, 0, 0.95),
    inset 0 0 30px rgba(245, 158, 11, 0.4),
    0 0 50px rgba(245, 158, 11, 0.6);
}

/* 3. Anillo SVG de Progreso Circular Dinámico */
.bead-progress-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 3;
}

.bead-track-circle {
  fill: none;
  stroke: rgba(245, 158, 11, 0.12);
  stroke-width: 5.5;
}

.bead-progress-bar {
  fill: none;
  stroke: url(#beadGoldRingGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 640.885;
  stroke-dashoffset: 640.885;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85));
  transition: stroke-dashoffset 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.25s ease;
}

.bead-progress-bar.bead-infinite-mode {
  stroke-dashoffset: 0;
  animation: beadInfinitePulse 3s linear infinite;
}

@keyframes beadInfinitePulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); opacity: 0.85; }
  50% { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 1)); opacity: 1; }
}

.bead-progress-bar.bead-completed-flash {
  animation: beadFlash 0.6s ease-out;
}

@keyframes beadFlash {
  0% { stroke: #ffffff; filter: drop-shadow(0 0 24px rgba(255, 255, 255, 1)); }
  100% { stroke: url(#beadGoldRingGrad); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85)); }
}

/* 4. Contenido Central (Número de Oro y Etiqueta Litúrgica) */
.bead-core-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.bead-big-number {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 25%, #f59e0b 65%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(245, 158, 11, 0.65));
  letter-spacing: -0.02em;
  transform-origin: center;
}

.bead-big-number.bead-number-pop {
  animation: beadNumPop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes beadNumPop {
  0% { transform: scale(0.88); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.bead-target-label {
  font-size: clamp(0.68rem, 2.2vw, 0.78rem);
  font-weight: 800;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0.95;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bead-target-glyph {
  color: var(--accent-gold);
  font-size: 0.65rem;
  display: inline-flex;
  flex-shrink: 0;
}

/* 5. Onda Sagrada (Sacred Ripple) al Tocar */
.bead-sacred-ripple {
  position: absolute;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.5) 0%, rgba(245, 158, 11, 0.35) 40%, transparent 70%);
  border: 1.5px solid rgba(254, 240, 138, 0.65);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
  pointer-events: none;
  animation: beadRippleAnim 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 2;
}

@keyframes beadRippleAnim {
  0% { transform: scale(0.2); opacity: 0.95; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   FAITHGPT & BÓVEDA
   ========================================================================== */
.faithgpt-form-card, .vault-form-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 13px 16px;
  min-height: 48px;
  background: var(--glass-inset);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}

.form-textarea {
  resize: vertical;
  min-height: 96px;
}

/* Selector Táctil Glassmorphic de Chips (Mobile-First) */
.report-type-chip {
  width: 100%;
  height: auto;
  min-height: max-content;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--glass-surface-1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  box-sizing: border-box;
}

.report-type-chip:hover {
  background: var(--glass-surface-hover);
  border-color: var(--glass-border-highlight);
}

.report-type-chip.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(99, 102, 241, 0.2));
  border-color: var(--accent-gold);
  color: var(--text-primary);
  font-weight: 800;
  box-shadow: 0 0 12px var(--accent-gold-glow);
}

.chip-radio-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: inline-block;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.report-type-chip.active .chip-radio-dot {
  border-color: var(--accent-gold);
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold-glow);
}

.sound-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-surface-1);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  box-sizing: border-box;
}

.sound-choice-btn:hover {
  background: var(--glass-surface-hover);
  border-color: var(--glass-border-highlight);
  transform: translateY(-1px);
}

.sound-choice-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(99, 102, 241, 0.25)) !important;
  border: 1.5px solid var(--accent-gold) !important;
  box-shadow: 0 0 16px var(--accent-gold-glow), 0 4px 16px rgba(0,0,0,0.3) !important;
}

.sound-choice-btn .chip-radio-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: inline-block;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.sound-choice-btn.active .chip-radio-dot {
  border-color: var(--accent-gold) !important;
  background: var(--accent-gold) !important;
  box-shadow: 0 0 10px var(--accent-gold-glow) !important;
}

/* ==========================================================================
   SACRED TIME PICKER (SELECTOR DE HORA SAGRADO GLASSMORPHIC)
   ========================================================================== */
.hud-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--glass-surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-code);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.hud-time-pill:hover {
  background: var(--glass-surface-hover);
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px var(--accent-gold-glow);
}

.hud-sound-pill {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--glass-surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: all var(--transition-fast);
}

.hud-sound-pill:hover {
  background: var(--glass-surface-hover);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}


/* BOTÓN DE CIERRE DE MODALES (AMPLIO, DESTACADO Y ERGONÓMICO EN MODO CLARO Y OSCURO) */
.btn-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: var(--glass-surface-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border-highlight);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  padding: 0;
  box-shadow: var(--glass-shadow-sm);
}

.btn-modal-close:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ef4444;
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

.btn-modal-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}


.time-num-btn {
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--glass-surface-1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: var(--font-code);
  font-size: 0.86rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  padding: 0;
}

.time-num-btn:hover {
  background: var(--glass-surface-hover);
  border-color: var(--glass-border-highlight);
  color: var(--text-primary);
}

.time-num-btn.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(99, 102, 241, 0.35));
  border-color: var(--accent-gold);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 10px var(--accent-gold-glow);
  transform: scale(1.04);
}

.period-btn-active {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-indigo)) !important;
  color: #ffffff !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 10px var(--accent-gold-glow) !important;
}

.time-shortcut-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass-surface-1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

.time-shortcut-btn:hover {
  background: var(--glass-surface-hover);
  border-color: var(--glass-border-highlight);
  color: var(--text-primary);
}

/* ==========================================================================
   SAFE AREA & RESPONSIVE POLISH (MÓVILES, TABLETS, IPADS Y DESKTOPS)
   ========================================================================== */

/* 1. MÓVILES (Smartphones Android, iPhone, Plegables) */
@media (max-width: 640px) {
  .app-container {
    padding-top: calc(8px + var(--sat));
    padding-bottom: calc(125px + var(--sab));
    padding-left: calc(10px + var(--sal));
    padding-right: calc(10px + var(--sar));
  }

  .hud-header {
    padding: 8px 12px;
    margin-bottom: 12px;
  }

  .brand-titles h1 {
    font-size: 1.05rem;
  }

  .brand-tagline {
    font-size: 0.62rem;
  }

  .hud-score-number {
    font-size: 3rem;
  }

  .hud-score-badge {
    padding: 18px 12px;
  }

  .hud-gradient-bar-container {
    padding: 16px 12px;
  }

  .hud-donut-container {
    width: 140px;
    height: 140px;
  }

  .hud-donut-center-num {
    font-size: 1.6rem;
  }

  .tradition-item-card {
    padding: 10px 12px !important;
  }

  .candles-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 12px !important;
  }

  #modal-onboarding > div, 
  #modal-reader > div, 
  #modal-new-candle > div, 
  #modal-language > div, 
  #modal-ai-settings > div,
  #modal-sacred-dialog > div,
  #modal-social-share > div,
  #modal-notifications > div,
  #modal-notification-schedule > div,
  #modal-translation-report > div,
  #modal-membership > div {
    margin: 0 auto 24px !important;
    padding: 20px 16px 28px !important;
    width: 100% !important;
    max-width: 480px !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0 !important;
  }
}

/* 2. MÓVILES Y PANTALLAS COMPACTAS (≤ 480px) */
@media (max-width: 480px) {
  .hud-header {
    padding: 6px 10px;
    gap: 4px;
  }

  .brand-group {
    gap: 6px;
  }

  .brand-icon-wrap {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .brand-titles h1 {
    font-size: 0.95rem;
  }

  .brand-tagline {
    font-size: 0.56rem;
  }

  .hud-actions {
    gap: 3px;
  }

  .hud-membership-badge {
    height: 28px;
    padding: 0 6px;
    font-size: 0.68rem;
  }

  .hud-icon-btn {
    width: 29px;
    height: 29px;
    min-width: 29px;
    min-height: 29px;
  }

  .hud-icon-btn .icon-svg {
    width: 14px;
    height: 14px;
  }

  .hud-lang-btn {
    height: 28px;
    padding: 0 5px;
    font-size: 0.68rem;
    gap: 3px;
  }

  .hud-lang-btn .icon-svg {
    width: 13px;
    height: 13px;
  }
}

/* 2b. MÓVILES ULTRA COMPACTOS (iPhone SE, Pantallas ≤ 360px) */
@media (max-width: 360px) {
  .brand-tagline {
    display: none;
  }

  .brand-titles h1 {
    font-size: 0.88rem;
  }

  .hud-actions {
    gap: 2px;
  }

  .hud-membership-badge span {
    font-size: 0.62rem;
  }

  .hud-icon-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
  }

  .hud-icon-btn .icon-svg {
    width: 13px;
    height: 13px;
  }

  .hud-lang-btn {
    height: 26px;
    padding: 0 4px;
  }

  .candles-grid {
    grid-template-columns: 1fr !important;
  }

  .color-picker-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 3. TABLETS E IPADS (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-container {
    padding-left: calc(24px + var(--sal));
    padding-right: calc(24px + var(--sar));
  }

  .hud-grid-top {
    grid-template-columns: 280px 1fr;
  }

  .candles-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  .prayers-catalog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mirror-panes-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }

  .hud-bottom-bar {
    max-width: 600px;
  }
}

/* 4. ESCRITORIO Y PANTALLAS AMPLIAS (≥ 1025px) */
@media (min-width: 1025px) {
  .prayers-catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .candles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   MODO ZEN INMERSIVO / LECTURA CONCENTRADA
   ========================================================================== */
.zen-reader-card {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 0 35px rgba(99, 102, 241, 0.22), var(--glass-shadow-lg) !important;
}

.zen-reader-card .pane-content-original {
  font-size: 1.15rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.02em;
}

.zen-reader-card .translation-text {
  font-size: 1.05rem !important;
  line-height: 1.95 !important;
}

/* ==========================================================================
   BARRA DE SESIÓN DEVOCIONAL ACTIVA (RETORNO FLUIDO AL LECTOR)
   ========================================================================== */
.active-prayer-session-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(99, 102, 241, 0.1));
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px var(--accent-gold-glow);
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-in-out;
}

.active-prayer-session-bar .session-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.active-prayer-session-bar .session-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.active-prayer-session-bar .session-trad {
  font-size: 0.68rem;
  color: var(--accent-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: inline-block;
  line-height: 1.25;
  white-space: normal;
  max-width: 100%;
  word-break: break-word;
}

.active-prayer-session-bar .btn-return-reader {
  width: 100%;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--glass-surface-active);
  color: var(--text-primary);
  border: 1px solid var(--glass-border-highlight);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.active-prayer-session-bar .btn-return-reader:hover {
  background: var(--accent-gold);
  color: #000;
  box-shadow: 0 0 14px var(--accent-gold-glow);
  transform: translateY(-1px);
}

/* Tarjeta de Lectura y Conteo Simultáneo en el Contador */
.bead-prayer-card-preview {
  background: var(--glass-inset);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 16px 0 20px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.bead-prayer-card-preview .preview-sacred-text {
  font-family: var(--font-sacred);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 8px;
  max-height: 100px;
  overflow-y: auto;
}

.bead-prayer-card-preview .preview-trans-text {
  font-size: 0.94rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  font-weight: 500;
}


/* ==========================================================================
   INTERNACIONALIZACIÓN (i18n): 12 IDIOMAS GLOBALES
   es, en, fr, pt, ar, ru, hi, zh, it, he, de
   Soporte nativo RTL para Árabe y Hebreo, fuentes cirílicas, Devanagari y Han.
   ========================================================================== */

/* Ajustes globales para idiomas RTL (Árabe, Hebreo y Urdu) */
[dir="rtl"], [data-lang="ar"], [data-lang="he"], [data-lang="ur"] {
  direction: rtl;
  text-align: right;
}

[data-lang="ar"] {
  font-family: 'Scheherazade New', 'Amiri', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-lang="he"] {
  font-family: 'Frank Ruhl Libre', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-lang="ur"] {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.6;
}

[data-lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-lang="bn"] {
  font-family: 'Noto Sans Bengali', 'SolaimanLipi', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-lang="zh"] {
  font-family: 'Noto Serif SC', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-lang="ja"] {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[dir="rtl"] .crystal-search-wrapper input {
  padding: 10px 38px 10px 38px;
  text-align: right;
}

[dir="rtl"] #icon-search-lens {
  right: 14px;
  left: auto;
}

[dir="rtl"] #btn-clear-search {
  left: 10px;
  right: auto;
}

[dir="rtl"] .bottom-crystal-nav {
  direction: rtl;
}

[dir="rtl"] .tradition-item-card .hud-switch {
  margin-left: 0;
  margin-right: 8px;
}

[dir="rtl"] .mirror-reading-grid {
  direction: rtl;
}

[dir="rtl"] .crystal-segmented-control {
  direction: rtl;
}

/* Soporte para partición de palabras */
[data-lang="ru"], [data-lang="de"] {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================================================
   LOS 12 COLORES TRADICIONALES DE VELADORAS MEXICANAS (AURA & FLAMA)
   ========================================================================== */

/* 1. Amarillo Oro Solar */
.candle-color-amarillo_oro .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #fde047 35%, #eab308 65%, #ca8a04 100%);
  filter: drop-shadow(0 0 16px rgba(234, 179, 8, 0.95));
}
.candle-color-amarillo_oro .candle-body {
  border-top: 3px solid #eab308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 2. Blanco Puro / Paz */
.candle-color-blanco_paz .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #e2e8f0 40%, #cbd5e1 75%, #94a3b8 100%);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95));
}
.candle-color-blanco_paz .candle-body {
  border-top: 3px solid #ffffff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.4), inset 0 -4px 8px rgba(0,0,0,0.2);
}

/* 3. Rojo Carmesí / Fuerza */
.candle-color-rojo_fuerza .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #f87171 35%, #ef4444 65%, #b91c1c 100%);
  filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.95));
}
.candle-color-rojo_fuerza .candle-body {
  border-top: 3px solid #ef4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 4. Naranja Ámbar / Vitalidad */
.candle-color-naranja_vitalidad .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #fdba74 35%, #f97316 65%, #c2410c 100%);
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.95));
}
.candle-color-naranja_vitalidad .candle-body {
  border-top: 3px solid #f97316;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 5. Azul Celestial / Virgen */
.candle-color-azul_celestial .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #7dd3fc 35%, #0ea5e9 65%, #0369a1 100%);
  filter: drop-shadow(0 0 18px rgba(14, 165, 233, 0.95));
}
.candle-color-azul_celestial .candle-body {
  border-top: 3px solid #0ea5e9;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 6. Verde Esperanza / Salud */
.candle-color-verde_esperanza .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #6ee7b7 35%, #10b981 65%, #047857 100%);
  filter: drop-shadow(0 0 18px rgba(16, 185, 129, 0.95));
}
.candle-color-verde_esperanza .candle-body {
  border-top: 3px solid #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 7. Morado Místico / Perdón */
.candle-color-morado_mistico .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #c4b5fd 35%, #8b5cf6 65%, #6d28d9 100%);
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.95));
}
.candle-color-morado_mistico .candle-body {
  border-top: 3px solid #8b5cf6;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 8. Rosa Aurora / Hogar */
.candle-color-rosa_aurora .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #f9a8d4 35%, #ec4899 65%, #be185d 100%);
  filter: drop-shadow(0 0 18px rgba(236, 72, 153, 0.95));
}
.candle-color-rosa_aurora .candle-body {
  border-top: 3px solid #ec4899;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 9. Cobre Sagrado / Tierra */
.candle-color-cobre_tierra .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #fbbf24 30%, #d97706 65%, #78350f 100%);
  filter: drop-shadow(0 0 18px rgba(217, 119, 6, 0.95));
}
.candle-color-cobre_tierra .candle-body {
  border-top: 3px solid #b45309;
  box-shadow: 0 0 20px rgba(180, 83, 9, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 10. Plata Lunar / Claridad */
.candle-color-plata_lunar .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #e2e8f0 35%, #94a3b8 70%, #475569 100%);
  filter: drop-shadow(0 0 18px rgba(148, 163, 184, 0.95));
}
.candle-color-plata_lunar .candle-body {
  border-top: 3px solid #94a3b8;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.35), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 11. Dorado Imperial / Providencia */
.candle-color-dorado_imperial .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #fef08a 35%, #eab308 65%, #a16207 100%);
  filter: drop-shadow(0 0 22px rgba(234, 179, 8, 1));
}
.candle-color-dorado_imperial .candle-body {
  border-top: 3px solid #eab308;
  box-shadow: 0 0 24px rgba(234, 179, 8, 0.5), inset 0 -4px 8px rgba(0,0,0,0.25);
}

/* 12. Ébano / Negro Protección */
.candle-color-negro_ebano .candle-flame {
  background: radial-gradient(circle at 50% 80%, #ffffff 0%, #e9d5ff 30%, #a855f7 60%, #581c87 90%, #09090b 100%);
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.95));
}
.candle-color-negro_ebano .candle-body {
  background: linear-gradient(180deg, #27272a 0%, #09090b 100%) !important;
  border-top: 3px solid #a855f7;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.4), inset 0 -4px 8px rgba(0,0,0,0.4);
}

/* Selector de Colores en Modal */
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 480px) {
  .color-picker-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.color-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--glass-surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}
.color-picker-item:hover {
  background: var(--glass-surface-hover);
  border-color: var(--accent-gold);
}
.color-picker-item.active {
  background: var(--glass-surface-2);
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px var(--accent-gold-glow);
}
.color-swatch-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.4);
}
.color-picker-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.color-picker-month {
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* Insignia de Membresía / Trial en Header */
.hud-membership-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: var(--accent-gold);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.hud-membership-badge:hover {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.35), rgba(99, 102, 241, 0.35));
  box-shadow: 0 0 14px var(--accent-gold-glow);
  transform: translateY(-1px);
}

/* ==========================================================================
   ESTILIZACIÓN DE SELECTORES NATIVOS (<select> y <option>)
   Alto Contraste y Legibilidad Total en Modos Diurno y Nocturno
   ========================================================================== */
select, 
select.sound-select, 
.form-select {
  background-color: var(--glass-surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: var(--font-main);
  font-weight: 700;
  cursor: pointer;
}

/* Opciones desplegables en Modo Nocturno */
[data-theme="dark"] select option,
:root:not([data-theme="light"]) select option {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  padding: 8px 12px;
  font-weight: 600;
}

[data-theme="dark"] select option:checked,
:root:not([data-theme="light"]) select option:checked {
  background-color: #1e293b !important;
  color: #fbbf24 !important;
}

/* Opciones desplegables en Modo Diurno */
[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  padding: 8px 12px;
  font-weight: 600;
}

[data-theme="light"] select option:checked {
  background-color: #e2e8f0 !important;
  color: #d97706 !important;
}


/* ==========================================================================
   TIPOGRAFÍAS Y REGLAS NATIVAS: URDU, BENGALÍ, JAPONÉS Y ÁRABE
   ========================================================================== */
html[lang="ur"], [lang="ur"] {
  --font-main: var(--font-urdu);
  --font-display: var(--font-urdu);
  font-family: var(--font-urdu);
  direction: rtl;
  text-align: right;
  line-height: 2.1 !important;
}

html[lang="ur"] .prayer-title,
html[lang="ur"] .sacred-layer-translated,
[lang="ur"] .mirror-reader-text {
  font-family: var(--font-urdu);
  line-height: 2.3 !important;
  font-size: 1.15em;
}

html[lang="bn"], [lang="bn"] {
  --font-main: var(--font-bengali);
  --font-display: var(--font-bengali);
  font-family: var(--font-bengali);
}

html[lang="ja"], [lang="ja"] {
  --font-main: var(--font-japanese);
  --font-sacred: var(--font-japanese);
  font-family: var(--font-japanese);
  letter-spacing: 0.04em;
}

html[lang="ar"], [lang="ar"] {
  --font-main: var(--font-arabic);
  --font-display: var(--font-arabic);
  --font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  line-height: 1.8 !important;
}

/* ==========================================================================
   RITUAL DEVOCIONAL SUGERIDO (SVG + CRYSTAL GLASSMORPHISM)
   ========================================================================== */
.ritual-suggested-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.ritual-suggested-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.ritual-sparkle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
  flex-shrink: 0;
}

.ritual-sparkle-icon svg {
  width: 100%;
  height: 100%;
}

.ritual-suggested-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  line-height: 1.2;
}

.ritual-suggested-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.ritual-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

.ritual-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ritual-badge .ritual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ritual-badge .ritual-icon svg {
  width: 100%;
  height: 100%;
}

.ritual-badge .ritual-text {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge Contador / Rosario */
.ritual-badge.badge-counter {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fef08a;
}
.ritual-badge.badge-counter .ritual-icon {
  color: #fbbf24;
}

/* Badge Veladora / Altar */
.ritual-badge.badge-candle {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}
.ritual-badge.badge-candle .ritual-icon {
  color: #34d399;
}

/* Badge Paisaje Sonoro */
.ritual-badge.badge-sound {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #bae6fd;
}
.ritual-badge.badge-sound .ritual-icon {
  color: #38bdf8;
}

[dir="rtl"] .ritual-suggested-card {
  direction: rtl;
}

/* ==========================================================================
   BLINDAJE Y COMPATIBILIDAD UNIVERSAL MULTI-NAVEGADOR & MULTI-DISPOSITIVO
   Safari (iOS/macOS), Chrome (Android/Windows/macOS), Firefox, Edge, iPadOS
   ========================================================================== */

/* 1. Reset Global y Renderizado Tipográfico Nítido */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

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

/* 2. Prevención de Rebotes Elásticos Rotos en Safari / iOS */
body.app-viewport {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Soporte Universal de Scroll Táctil Móvil para Modales y Selectores */
.modal-lang-scroll-list,
.tradition-scroll-list,
.vault-tradition-scroll-list,
.onboarding-scroll-list {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 3. Normalización de Inputs y Botones en WebKit / Safari */
input[type="text"],
input[type="search"],
button {
  -webkit-appearance: none;
  appearance: none;
}

/* 4. Adaptabilidad Responsiva para iPad, Tablets y Monitores Desktop */
@media (min-width: 768px) {
  :root:not([data-container-width="compact"]):not([data-container-width="wide"]) .app-container,
  [data-container-width="auto"] .app-container {
    max-width: 980px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
  }

  .hud-header-dual {
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow-sm);
  }

  :root:not([data-container-width="compact"]) .hud-quick-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  :root:not([data-container-width="compact"]) .prayers-grid-catalog,
  :root:not([data-container-width="compact"]) .prayers-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root:not([data-container-width="compact"]) .intentions-matrix-grid,
  :root:not([data-container-width="compact"]) .intentions-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) {
  :root:not([data-container-width="compact"]):not([data-container-width="tablet"]) .app-container,
  [data-container-width="auto"] .app-container,
  [data-container-width="wide"] .app-container {
    max-width: 1280px;
    padding-left: 32px;
    padding-right: 32px;
  }

  :root:not([data-container-width="compact"]):not([data-container-width="tablet"]) .prayers-grid-catalog,
  :root:not([data-container-width="compact"]):not([data-container-width="tablet"]) .prayers-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root:not([data-container-width="compact"]):not([data-container-width="tablet"]) .intentions-matrix-grid,
  :root:not([data-container-width="compact"]):not([data-container-width="tablet"]) .intentions-compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Modos Forzados Explícitos por Preferencia del Usuario */
[data-container-width="compact"] .app-container {
  max-width: 680px !important;
}

[data-container-width="compact"] .prayers-grid-catalog,
[data-container-width="compact"] .prayers-catalog-grid {
  grid-template-columns: 1fr !important;
}

[data-container-width="compact"] .hud-quick-pillars-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

[data-container-width="tablet"] .app-container {
  max-width: 980px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

[data-container-width="tablet"] .prayers-grid-catalog,
[data-container-width="tablet"] .prayers-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

[data-container-width="tablet"] .hud-quick-pillars-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

[data-container-width="wide"] .app-container {
  max-width: 1280px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

[data-container-width="wide"] .prayers-grid-catalog,
[data-container-width="wide"] .prayers-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

[data-container-width="wide"] .hud-quick-pillars-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

[data-container-width="wide"] .intentions-matrix-grid,
[data-container-width="wide"] .intentions-compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Rejillas generales fluidas */
.prayers-grid-catalog,
.prayers-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.intentions-matrix-grid,
.intentions-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Floating Dock Centrado */
.hud-bottom-bar {
  max-width: 560px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

.layout-width-chip {
  transition: all 0.2s ease;
  background: var(--glass-surface-1);
  color: var(--text-secondary);
}

.layout-width-chip:hover {
  background: var(--glass-surface-2);
  color: var(--text-primary);
  border-color: var(--glass-border-highlight);
}

.layout-width-chip.active-width-pill {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(99, 102, 241, 0.35)) !important;
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px var(--accent-gold-glow);
}

/* ==========================================================================
   CORRECCIÓN GLOBAL DE ANCHO PARA EL BOTÓN DE AJUSTES EN LA CINTA
   ========================================================================== */
#btn-ribbon-add,
.tradition-chip.tradition-chip-add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  border-style: dashed !important;
  padding: 6px 14px !important;
  flex-shrink: 0 !important;
}

#btn-ribbon-add span,
.tradition-chip.tradition-chip-add span {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

#btn-ribbon-add .tradition-chip-icon,
.tradition-chip.tradition-chip-add .tradition-chip-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   BANNER DEVOCIONAL DE FRATERNIDAD & COMUNIDAD UNIVERSAL (GLASSMORPHIC CRYSTAL)
   ========================================================================== */
.community-devotional-card {
  margin: 24px auto 14px auto !important;
  padding: 28px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--radius-xl, 24px) !important;
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Modo Nocturno / Oscuro */
:root:not([data-theme="light"]) .community-devotional-card,
[data-theme="dark"] .community-devotional-card {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.08) 0%, rgba(99, 102, 241, 0.08) 40%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 30px rgba(251, 191, 36, 0.08) !important;
}

/* Modo Diurno / Claro */
[data-theme="light"] .community-devotional-card {
  background: linear-gradient(145deg, #ffffff 0%, rgba(254, 243, 199, 0.7) 50%, rgba(248, 250, 252, 0.95) 100%) !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(217, 119, 6, 0.1), inset 0 1px 0 #ffffff !important;
}

.community-banner-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

.community-banner-logo-wrapper {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.community-banner-official-logo {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.community-banner-official-logo:hover {
  transform: scale(1.08) !important;
}

.community-banner-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

:root:not([data-theme="light"]) .community-banner-badge,
[data-theme="dark"] .community-banner-badge {
  background: rgba(251, 191, 36, 0.15) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  color: #fbbf24 !important;
}

[data-theme="light"] .community-banner-badge {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  color: #b45309 !important;
}

.community-badge-icon {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

.community-banner-title {
  font-family: var(--font-cinzel, 'Cinzel', serif), var(--font-heading, sans-serif) !important;
  font-size: clamp(1.05rem, 3.8vw, 1.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  width: 100% !important;
}

:root:not([data-theme="light"]) .community-banner-title,
[data-theme="dark"] .community-banner-title {
  color: #fbbf24 !important;
  text-shadow: 0 2px 14px rgba(251, 191, 36, 0.3) !important;
}

[data-theme="light"] .community-banner-title {
  color: #92400e !important;
  text-shadow: none !important;
}

.community-banner-text {
  font-size: clamp(0.82rem, 3.2vw, 0.90rem) !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  max-width: 580px !important;
  margin: 0 auto 20px auto !important;
  text-align: center !important;
}

:root:not([data-theme="light"]) .community-banner-text,
[data-theme="dark"] .community-banner-text {
  color: rgba(248, 250, 252, 0.88) !important;
}

[data-theme="light"] .community-banner-text {
  color: #334155 !important;
}

.community-banner-capsule {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 6px !important;
  border-radius: var(--radius-full, 9999px) !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

:root:not([data-theme="light"]) .community-banner-capsule,
[data-theme="dark"] .community-banner-capsule {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .community-banner-capsule {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.community-email-display {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.community-mail-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  stroke: var(--accent-gold, #fbbf24) !important;
}

.community-email-address {
  font-family: var(--font-mono, monospace), sans-serif !important;
  font-size: clamp(0.72rem, 3.2vw, 0.84rem) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  outline: none !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.2s ease !important;
}

:root:not([data-theme="light"]) .community-email-address,
[data-theme="dark"] .community-email-address {
  color: #f8fafc !important;
}

[data-theme="light"] .community-email-address {
  color: #1e293b !important;
}

.community-email-address:hover {
  color: var(--accent-gold, #fbbf24) !important;
  text-decoration: underline !important;
}

.community-copy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  outline: none !important;
  border: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

:root:not([data-theme="light"]) .community-copy-action-btn,
[data-theme="dark"] .community-copy-action-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}

:root:not([data-theme="light"]) .community-copy-action-btn:hover,
[data-theme="dark"] .community-copy-action-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
}

[data-theme="light"] .community-copy-action-btn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

[data-theme="light"] .community-copy-action-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4) !important;
}

.community-copy-action-btn:active {
  transform: scale(0.96) !important;
}

.community-copy-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 520px) {
  .community-banner-capsule {
    border-radius: var(--radius-lg, 16px) !important;
    flex-direction: column !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .community-email-display {
    width: 100% !important;
    justify-content: center !important;
    padding: 4px 8px !important;
  }
  .community-copy-action-btn {
    width: 100% !important;
    padding: 10px 16px !important;
  }
}

/* ==========================================================================
   JERARQUÍA DEFINITIVA DE Z-INDEX PARA MODALES Y CAPAS FLOTANTES
   ========================================================================== */
#modal-social-share {
  z-index: 70000 !important;
}

#modal-sacred-dialog {
  z-index: 80000 !important;
}

#sacred-toast-bubble {
  z-index: 90000 !important;
}

/* Botón de Acción Rápida: Veladora para Peticiones */
.btn-vault-light-candle {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-vault-light-candle:hover {
  background: rgba(245, 158, 11, 0.24) !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 16px var(--accent-gold-glow) !important;
  transform: translateY(-1px);
}

.btn-vault-light-candle:active {
  transform: scale(0.96);
  box-shadow: 0 0 8px var(--accent-gold-glow) !important;
}

/* Píldoras Selectoras de Modo del Contador Táctil (Identificación Inmediata con Borde Dorado) */
.bead-mode-btn {
  border: 1.5px solid var(--glass-border);
  background: var(--glass-surface-1);
  color: var(--text-secondary);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.bead-mode-btn:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}

.bead-mode-btn.active-bead-mode {
  border: 1.8px solid var(--accent-gold) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(15, 23, 42, 0.92)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px var(--accent-gold-glow), inset 0 0 12px rgba(245, 158, 11, 0.22) !important;
  transform: translateY(-1px);
}

.bead-mode-btn.active-bead-mode span {
  color: #ffffff !important;
}

.bead-mode-btn.active-bead-mode span:first-child {
  color: var(--accent-gold) !important;
  filter: drop-shadow(0 0 6px var(--accent-gold-glow));
}