/* --- INICIO: ESTILOS PARA BOTÓN DE INSTALACIÓN PWA --- */
#install-button {
    z-index: 100; /* Asegura que esté por encima de otros elementos */
}

/* Ajustes para el modo oscuro */
.dark-theme #install-button {
    background-color: #2563eb;
    color: #eff6ff;
}

.dark-theme #install-button:hover {
    background-color: #1d4ed8;
}
/* --- FIN: ESTILOS --- */

  /* --- REGLA PARA AGRANDAR LA INTERFAZ (V3 - Corregida) --- */

    /* Aumenta el tamaño de los botones y textos de la barra superior */
    #top-bar button, #top-bar #page-jumper, #top-bar .toggle-button {
        font-size: 1rem !important; /* Un poco más grande que text-sm (0.875rem) */
        padding: 0.6rem !important; /* Más área para tocar */
    }

    /* Aumenta el tamaño de los títulos del programa */
    #program-main-title {
        font-size: 1.1rem !important;
    }
    #program-sub-title {
        font-size: 0.95rem !important;
    }

    /* Aumenta el tamaño de los enlaces y botones de la barra lateral */
    #mobile-menu a.sidebar-link,
    #mobile-menu .tab-button,
    #mobile-menu .toggle-button {
        font-size: 1.1rem !important; /* Más grande para legibilidad */
    }

    /* Aumenta el tamaño de TODOS los íconos SVG en la interfaz */
    #top-bar svg, #mobile-menu svg {
        width: 1.4em; /* Usa 'em' para escalar con il font-size de su contenedor */
        height: 1.4em;
    }
    /* --- FIN DE LA REGLA --- */
    body { font-family: 'Bona Nova', serif; background-color: #f5f5f4; /* bg-stone-100 */ color: #334155; /* text-slate-700 */ }
    h1, h2, h3, h4 { font-weight: 700; color: #1e293b; }
    
    h2.main-section-title { 
        font-size: 2em;
        font-weight: 700; 
        color: #ffffff; 
        padding-bottom: 0.5rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #e2e8f0;
        text-align: center;
    }

    h3.sub-group-title { font-size: 1.5em; font-weight: 600; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; text-align: center; }
    
    h4.prayer-title { 
        font-size: 1.25em; 
        font-weight: 600; 
        text-align: center; 
        margin-top: 1.5rem; 
        padding-top: 1.5rem; 
        border-top: 1px dashed #e2e8f0; 
        color: #1e293b;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    .prayer-subtitle { 
        font-size: 1.25em; 
        font-style: italic; 
        color: #64748b; 
        text-align: center; 
        margin-top: -0.25rem; 
        margin-bottom: 1rem;
        line-height: 1.2; 
    }

.hebrew {
    /* Intenta usar fuentes conocidas por su buen soporte bíblico en orden de preferencia */
    font-family: 'SBL Hebrew', 'David', 'Times New Roman', serif;
    font-size: 1.9em; 
    line-height: 1.6;
    direction: rtl;
    color: #1e293b;
    font-weight: normal; /* Las fuentes de sistema suelen ser más pesadas, mejor normal */
}
   #content-column .text-lg { font-size: 1.125em; line-height: 1.75em; }

    .card-content > *:first-child > h3, .card-content > *:first-child > h4 { border-top: none; margin-top:0; padding-top:0; }
    .transliteration {
    font-style: normal;     /* Le quita la cursiva */
    font-size: 1.5em;      /* Lo pone del mismo tamaño que el hebreo */
    color: #1f2937;
    line-height: 1.6;       /* Añadimos un interlineado similar al hebreo para que respire mejor */
}
    
    .congregation-instruction {
        text-align: center;
        font-size: 1.125rem;
        color: #475569;
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0;
        padding: 0.75rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.375rem;
        font-style: normal;
        font-weight: 1000;
    }
    .collapsible-instruction {
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0.375rem;
        margin: 1.5rem 0;
        overflow: hidden;
        transition: background-color: 0.3s ease, border-color: 0.3s ease, box-shadow: 0.3s ease;
    }

    .collapsible-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.75rem;
        cursor: pointer;
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-size: 1.125rem;
        color: #94a3b8;
        opacity: 0.8;
        transition: background-color: 0.2s ease, color 0.3s ease, opacity: 0.3s ease;
    }

    .collapsible-header:hover { background-color: #f8fafc; opacity: 1; }
    .collapsible-arrow {
        transition: transform 0.3s ease-in-out, color 0.3s ease;
        width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-left: 0.5rem;
        color: #94a3b8; transform: rotate(-90deg);
    }
    .collapsible-instruction.open { background-color: #f1f5f9; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
    .collapsible-instruction.open .collapsible-header { color: #475569; opacity: 1; font-weight: 1000; }
    .collapsible-instruction.open .collapsible-header:hover { background-color: #e2e8f0; }
    .collapsible-instruction.open .collapsible-arrow { color: #475569; transform: rotate(0deg); }
    .collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; color: #334155; }
    .collapsible-content-inner { 
    padding: 0 0.75rem 0.75rem 0.75rem;
}
    .collapsible-instruction.open .collapsible-content { max-height: 2000px; }

    .collapsible-instruction.gaavah.open {
        background-color: #f1f5f9;
        border: 3px solid transparent;
        border-image-slice: 1;
        border-image-source: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        border-radius: 0.375rem;
    }

    .virtual-edition-note { font-size: 0.9375em; }
    .virtual-edition-note p { line-height: 1.6; }
    a.sidebar-link.active { background-color: transparent; color: #1e293b; font-weight: 700; }
    #mobile-menu { 
        font-size: 1rem; 
        transition: transform 0.5s ease-in-out;
        transform: translateX(-100%); 
        z-index: 30; 
    }
    #mobile-menu.open { transform: translateX(0); transition-duration: 0.25s; }
    
    @media (min-width: 1024px) { #mobile-menu { transform: translateX(0); z-index: 10; } }
    
    .tab-button.active { border-color: #1e293b; color: #1e293b; font-weight: 600; }
    main { padding-top: 4.5rem !important; max-width: 100%; overflow-x: visible; }
    #content-column { min-width: 0; }
    .page-marker { position: absolute; left: 0; font-size: 0.75rem; color: #94a3b8; padding: 0.125rem 0.5rem; border-radius: 9999px; background-color: #f8fafc; border: 1px solid #e2e8f0; white-space: nowrap; }
    .hidden-by-toggle { display: none !important; }

    #content-column div.text-spanish,
    #content-column div.text-english {
        background-color: #FFFFFF; padding: 0.75rem; border-radius: 0.375rem;
        margin-bottom: 1rem; line-height: 1.65;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
    }
    #content-column div.text-spanish p,
    #content-column div.text-english p { color: #1f2937; font-size: 1.2em; }
    #content-column p.text-hebrew { margin-bottom: 0.75rem; line-height: 1.7; }

    #top-bar .toggle-button {
        min-width: 36px; text-align: center; border: 1px solid transparent; 
        transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, opacity 0.2s ease-in-out;
        font-size: 0.75rem; line-height: 1.25; 
        background-color: transparent; color: #94a3b8; text-decoration: line-through;
        font-weight: normal; opacity: 0.7; 
    }
    #toggle-hebrew { font-family: 'Bona Nova', serif; font-size: 0.875rem; }
    #toggle-transliteration { font-size: 0.875rem; }
    #top-bar .toggle-button:not(.active):hover { color: #64748b; opacity: 1; }
    #top-bar .toggle-button.active { background-color: transparent; color: #1e293b; text-decoration: none; font-weight: 600; opacity: 1; }
    #top-bar .toggle-button.active:hover { color: #0f172a; background-color: transparent; }

    #top-bar-program-selector img { width: auto; filter: none; transition: filter 0.3s ease-in-out; }

    #program-selector-trigger {
        background: none; border: none; padding: 0; cursor: pointer;
        display: flex; align-items: center; border-radius: 0.375rem;
    }
    #program-selector-trigger:hover { background-color: #f1f5f9; }

    #program-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50;
    padding: 0.5rem 0;
    width: max-content; 
    min-width: 100%;
}
    #program-select-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    white-space: nowrap;
}
    #program-select-menu button:hover { background-color: #f3f4f6; }
    #program-select-menu button.active-service {
        background-color: #fee2e2; font-weight: 600; color: #b91c1c;
    }
    #program-select-menu .checkmark { margin-right: 0.5rem; opacity: 0; color: #b91c1c; }
    #program-select-menu button.active-service .checkmark,
    #program-select-menu button.active-service-multicolor .checkmark { opacity: 1; }

    #program-select-menu button.active-service-multicolor {
        font-weight: 700;
        background-color: #f3f4f6; 
        color: transparent; 
        background-clip: text; 
        -webkit-background-clip: text;
        background-image: linear-gradient(to right, #b91c1c, #d97706, #10b981, #3b82f6, #8b5cf6);
    }
    #program-select-menu button.active-service-multicolor .checkmark {
        color: #4b5563;
    }

    #program-title-container { position: relative; padding-left: 12px; }

    .indicator-red::before {
        content: ''; position: absolute; left: 0; top: 50%;
        transform: translateY(-50%); width: 3px; height: 70%;
        background-color: #b91c1c; border-radius: 2px;
    }
    .indicator-multicolor::before {
        content: ''; position: absolute; left: 0; top: 50%;
        transform: translateY(-50%); width: 4px; height: 80%;
        border-radius: 3px;
        background: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082);
    }
    .indicator-blue::before {
        content: ''; position: absolute; left: 0; top: 50%;
        transform: translateY(-50%); width: 3px; height: 70%;
        background-color: #2563eb; border-radius: 2px;
    }

    /* === Dark Theme Styles === */
    .dark-theme body { background-color: #111827; color: #d1d5db; }
    .dark-theme h1, .dark-theme h3, .dark-theme h4 { color: #f3f4f6; }
    .dark-theme h2.main-section-title { color: #f3f4f6; border-bottom-color: #374151; }
    .dark-theme h4.prayer-title { border-top-color: #374151; color: #f3f4f6; background-color: transparent; box-shadow: none; }
    .dark-theme .prayer-subtitle { color: #9ca3af; line-height: 1.2; }
    .dark-theme .hebrew { color: #e5e7eb; }
    .dark-theme .transliteration { color: #e5e7eb; }
    .dark-theme .congregation-instruction { color: #d1d5db; background-color: #1f2937; border-color: #4b5563; }
    .dark-theme .collapsible-instruction { background-color: transparent; border-color: transparent; box-shadow: none; }
    .dark-theme .collapsible-header { justify-content: center; color: #6b7280; opacity: 0.7; }
    .dark-theme .collapsible-header:hover { background-color: #1f2937; opacity: 1; }
    .dark-theme .collapsible-arrow { color: #6b7280; transform: rotate(-90deg); }
    .dark-theme .collapsible-instruction.open { background-color: #1f2937; border-color: #4b5563; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
    .dark-theme .collapsible-instruction.open .collapsible-header { color: #d1d5db; opacity: 1; }
    .dark-theme .collapsible-instruction.open .collapsible-header:hover { background-color: #374151; }
    .dark-theme .collapsible-instruction.open .collapsible-arrow { color: #9ca3af; transform: rotate(0deg); }
    
    .dark-theme .collapsible-instruction.gaavah.open {
        background-color: #1f2937;
        border: 3px solid transparent;
        border-image-slice: 1;
        border-image-source: linear-gradient(to bottom, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    }
    
    .dark-theme .virtual-edition-note { background-color: #374151; border-color: #4b5563; }
    .dark-theme .virtual-edition-note p { color: #d1d5db; }
    .dark-theme .virtual-edition-note strong { color: #f9fafb; }
    .dark-theme .virtual-edition-note hr { border-color: #4b5563 !important; }
    .dark-theme a.sidebar-link { color: #d1d5db; }
    .dark-theme a.sidebar-link.active { background-color: transparent; color: #f9fafb; }
    .dark-theme a.sidebar-link:hover { background-color: #4b5563; }
    .dark-theme #mobile-menu { background-color: #1f2937; border-right-color: #374151; }
    .dark-theme #mobile-menu #displaying-label { color: #f9fafb !important; }
    .dark-theme .tab-button.active { border-color: #f9fafb; color: #f9fafb; }
    .dark-theme .tab-button { color: #9ca3af; border-bottom-color: #374151; }
    .dark-theme #top-bar { background-color: #1f2937; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.2); }
    .dark-theme #top-bar button, .dark-theme #page-jumper, .dark-theme #page-jumper span { color: #d1d5db; }
    .dark-theme #menu-toggle:hover, .dark-theme #font-decrease:hover, .dark-theme #font-increase:hover { background-color: #374151; }
    .dark-theme #page-jumper:hover { background-color: #374151; }
    .dark-theme #top-bar-program-selector img { filter: invert(1) brightness(1.5) contrast(1.2); }
    .dark-theme #program-selector-trigger:hover { background-color: #374151; }
    .dark-theme #program-select-menu { background-color: #1f2937; border-color: #374151; }
    .dark-theme #program-select-menu button { color: #d1d5db; }
    .dark-theme #program-select-menu button:hover { background-color: #374151; }
    .dark-theme #program-select-menu button.active-service { background-color: #450a0a; color: #fca5a5; }
    .dark-theme #program-select-menu .checkmark { color: #fca5a5; }
    .dark-theme #program-select-menu button.active-service-multicolor .checkmark { color: #d1d5db; }
    .dark-theme .collapsible-instruction.gaavah .text-hebrew,
.dark-theme .collapsible-instruction.gaavah .text-transliteration {
    color: #d1d5db; /* Matches Spanish/English in Dark Mode */
}
    .dark-theme #program-select-menu button.active-service-multicolor {
        background-color: #374151; 
        background-image: linear-gradient(to right, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa);
    }
    
    .dark-theme .indicator-red::before { background-color: #f87171; }
    .dark-theme .indicator-blue::before { background-color: #60a5fa; }
    
    .dark-theme .flex.border-l.border-slate-300 { border-left-color: #4b5563; } 
    .dark-theme .page-marker { background-color: #374151; color: #d1d5db; border-color: #4b5563; }
    .dark-theme #content-column div.text-spanish, .dark-theme #content-column div.text-english { background-color: #273344; border-color: #374151; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.2); }
    .dark-theme #content-column div.text-spanish p, .dark-theme #content-column div.text-english p { color: #d1d5db; }
    .dark-theme #top-bar .toggle-button { color: #6b7280; }
    .dark-theme #top-bar .toggle-button:not(.active):hover { color: #9ca3af; }
    .dark-theme #top-bar .toggle-button.active { color: #e5e7eb; }
    .dark-theme #top-bar .toggle-button.active:hover { color: #f9fafb; }
    .dark-theme hr, .dark-theme .border-b-2.border-slate-200, .dark-theme .border-slate-200, .dark-theme .border-b.border-slate-200 { border-color: #374151 !important; }
    .dark-theme #content-column .bg-white { background-color: #1f2937; }
    .dark-theme #content-column .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25); }
    .dark-theme #menu-overlay { background-color: rgba(0,0,0,0.7); }
    .dark-theme .text-slate-600 { color: #9ca3af; }
    .dark-theme .text-slate-500 { color: #a1a1aa; }
    .dark-theme .bg-slate-50 { background-color: #374151; }
    .dark-theme .border.border-slate-200 { border-color: #4b5563; }
    .dark-theme .animate-spin.border-slate-900 { border-color: #e5e7eb; border-top-color: #e5e7eb; border-right-color: #e5e7eb; border-bottom-color: transparent !important; border-left-color: transparent !important; }
    .dark-theme .border-l-4.border-slate-300 { border-left-color: #6b7280; }
    .dark-theme #content-column .text-red-500 { color: #f87171; }

    #theme-toggle { transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; }
    #theme-toggle { color: #94a3b8; opacity: 0.7; }
    #theme-toggle:hover { color: #64748b; opacity: 1; background-color: #f1f5f9; }
    #theme-icon-container #moon-regular-state { display: none; }
    #theme-icon-container #moon-crossed-state { display: block; }
    #theme-icon-container #moon-crossed-state path, #theme-icon-container #moon-crossed-state line { stroke: currentColor; }
    .dark-theme #theme-toggle { color: #d1d5db; opacity: 1; }
    .dark-theme #theme-toggle:hover { color: #f3f4f6; background-color: #374151; }
    .dark-theme #theme-icon-container #moon-regular-state { display: block; }
    .dark-theme #theme-icon-container #moon-crossed-state { display: none; }
    .dark-theme #theme-icon-container #moon-regular-state path { stroke: currentColor; }
    .congregation-instruction.my-0 + .prayer-subtitle { margin-top: 0.5rem; }
    /* Esto define que el contenedor usará 2 columnas */
.collapsible-instruction.gaavah .collapsible-content-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Estilos solo para el texto en hebreo (SIN la coma) */
.collapsible-instruction.gaavah .text-hebrew {
    font-size: 1.75em;
    direction: rtl;
    text-align: right;
}
.collapsible-instruction.gaavah .text-transliteration {
    font-style: italic;
}

/* Esta regla hace que TANTO el hebreo COMO la fonética 
   ocupen las 2 columnas del grid */
.collapsible-instruction.gaavah .text-hebrew,
.collapsible-instruction.gaavah .text-transliteration {
    grid-column: 1 / -1;
}
    #program-select-menu button {
        position: relative;
        padding-left: 1.75rem;
    }
    .menu-item-indicator {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        border-radius: 2px;
    }
    .menu-item-indicator.indicator-line-red {
        background-color: #b91c1c;
    }
    .menu-item-indicator.indicator-line-multicolor {
        background: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082);
    }
    .dark-theme .menu-item-indicator.indicator-line-red {
        background-color: #f87171;
    }
    .dark-theme .menu-item-indicator.indicator-line-multicolor {
        background: linear-gradient(to bottom, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa);
    }
/* --- INICIO: FIX DE FONDOS PARA MODO OSCURO --- */

/* 1. Establece el color de fondo para el área de contenido principal (main). */
.dark-theme main {
    background-color: #111827; /* Un gris muy oscuro, igual que el body. */
}

/* 2. Establece el color de fondo para las diapositivas en modo paginado. */
.dark-theme .paginated-page {
    background-color: #1f2937; /* Un gris ligeramente más claro para crear contraste. */
}

/* --- FIN: FIX DE FONDOS --- */
/* --- INICIO: AJUSTE PARA DISEÑO DINÁMICO HEBREO/FONÉTICA --- */
.he-tran-row {
    display: grid;
    /* Por defecto, el diseño es de UNA sola columna. El JS lo cambiará si es necesario. */
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 0 !important;
}

/* Esta clase se añadirá con JavaScript para activar las dos columnas */
.he-tran-row.two-columns {
    grid-template-columns: 1fr 1fr;
}

.he-tran-row p {
    margin-bottom: 0.25rem;
}

/* Columna de la izquierda (Fonética) */
.he-tran-row .transliteration-col {
    text-align: left;
}

/* Columna de la derecha (Hebreo) */
.he-tran-row .hebrew-col {
    text-align: right;
    direction: rtl;
}

/* Quitamos los márgenes extra de los párrafos dentro de esta vista */
.he-tran-row .transliteration,
.he-tran-row .hebrew {
    margin-top: 0;
    margin-bottom: 0;
}
/* --- FIN: AJUSTE PARA DISEÑO DINÁMICO HEBREO/FONÉTICA --- */

/* 1. Anula el margen de abajo de la fila de dos columnas. */
.he-tran-row {
    margin-bottom: 0 !important;
}

/* 2. Anula el margen de arriba de la caja de traducción. */
/* Este era el culpable principal que se nos escapaba. */
.text-translations-container {
    margin-top: 0.5rem !important; /* Reduce el espacio a casi nada. Podés poner 0 si querés. */
}

/* 3. Anula cualquier margen inferior en los párrafos de hebreo y fonética. */
/* Esto compacta el bloque de dos columnas por dentro. */
.he-tran-row .hebrew,
.he-tran-row .transliteration {
    margin-bottom: 0 !important;
}
/*
  FIX 1: ARREGLO DEL ESPACIO DEBAJO DEL HEBREO (LÍNEA SÓLIDA)
  =============================================================
  Anula el margen de abajo del contenedor del texto hebreo/fonética.
  La clase 'mb-6' de Tailwind agrega 1.5rem (mucho espacio), lo forzamos a casi nada.
*/
article .space-y-4 > .mb-6 {
    margin-bottom: 0.25rem !important;
}

/* Oculta todas las líneas creadas con <hr> */
hr {
    display: none !important;
}

/* Quita las líneas de los títulos de sección H2 y H3 */
h2.main-section-title,
h3.sub-group-title {
    border: none !important;
    margin-bottom: 0.25rem !important;
}

/* Quita la línea del header grande al inicio del contenido */
#content-column > header {
     border-bottom: none !important;
}

/*
  Anula el margen de arriba que la clase 'space-y-4' del contenedor padre
  le pone automáticamente a la línea <hr>.
  Le dejamos un pequeño respiro para que no se pegue del todo.
*/
article .space-y-4 > hr {
    margin-top: 0.5rem !important;
}


/*
  FIX 2: TÍTULO EN MEDIO DE LA LÍNEA PUNTEADA
  =============================================================
  Esto modifica los títulos (ej. "Ma yafeh hayom") para que el texto
  aparezca en el centro de la línea, ganando espacio vertical.
*/
h4.prayer-title {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 0.2rem;       /* Espacio arriba del título */
    margin-bottom: 0.2rem;    /* Espacio abajo del título - REDUCIDO */
    padding-top: 0;           /* Limpiamos estilos viejos */
    border-top: none;         /* Quitamos el borde viejo */
}

/* Usamos un SVG para crear un efecto de troquelado más realista */
h4.prayer-title::before,
h4.prayer-title::after {
    content: '';
    flex-grow: 1;
    height: 2px; /* Altura de la línea */
    /* SVG URL-encoded para un efecto de guiones más gruesos y notorios */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='7' height='2' fill='%23a8b2c5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
}
/* Espacio entre las líneas y el texto */
h4.prayer-title::before {
    margin-right: 0.75rem;
}
h4.prayer-title::after {
    margin-left: 0.75rem;
}

/*
  Ajuste para modo oscuro
*/
.dark-theme h4.prayer-title::before,
.dark-theme h4.prayer-title::after {
    /* SVG con un color más claro y visible para el modo oscuro */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='7' height='2' fill='%234b5563'/%3E%3C/svg%3E");
}

/*
  Limpiamos la regla vieja del modo oscuro para el h4 para que no interfiera
  con el nuevo diseño flexbox.
*/
.dark-theme h4.prayer-title {
    border-top-color: transparent !important;
}
a.sidebar-link {
    white-space: normal !important; /* Permite que el texto se divida en varias líneas */
    line-height: 1.3; /* Ajusta el espacio entre las líneas para que no se vea apretado */
}
/* Estilo para girar la flecha del menú de idiomas */
#language-section-mobile.open .language-arrow-mobile {
    transform: rotate(180deg);
}
/* Estilo para girar la flecha del menú de interfaz */
#interface-section-mobile.open .interface-arrow-mobile {
    transform: rotate(180deg);
}
/* Estilo para girar la flecha del menú de Opciones */
#options-section-mobile.open .options-arrow-mobile {
    transform: rotate(180deg);
}
/* --- REGLA PARA EL ÍCONO DE TEMA EN EL MENÚ MÓVIL --- */
#theme-icon-container-mobile #moon-regular-state-mobile {
    display: none;
}
#theme-icon-container-mobile #moon-crossed-state-mobile {
    display: block;
}

.dark-theme #theme-icon-container-mobile #moon-regular-state-mobile {
    display: block;
}
.dark-theme #theme-icon-container-mobile #moon-crossed-state-mobile {
    display: none;
}
/* --- ESTILOS PARA LA PANTALLA DE INICIO --- */
#homescreen {
    display: none; /* Inicialmente oculto por JS, pero 'flex' lo mostrará */
}
#homescreen.visible {
    display: flex; /* Clase para mostrar la pantalla */
}

/* Oculta los elementos principales de la app cuando la pantalla de inicio está activa */
body.homescreen-active #top-bar,
body.homescreen-active #mobile-menu,
body.homescreen-active main {
    display: none;
}

/* ESTILOS DE BOTÓN COMPLETOS */
.homescreen-service-button {
    position: relative; /* Necesario para el pseudo-elemento */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem; /* Espacio entre botones en la misma columna */
    background-color: white; 
    text-align: left;
    border: 1px solid #e2e8f0; 
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; /* Asegura que el pseudo-elemento no se salga */
}
.homescreen-service-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Colores específicos por servicio */
.homescreen-service-button.unity { 
    border-left: 5px solid #b91c1c; /* Rojo para Unity */ 
}
.homescreen-service-button.brahot { 
    border-left: 5px solid #2563eb; /* Azul para BraHot */ 
}

.homescreen-service-button.gaavah::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px; /* Ancho de la barra */
    height: 100%;
    background: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082);
}
/* --- AÑADE ESTAS REGLAS NUEVAS PARA GATES OF PRAYER --- */

/* --- INICIO: REGLA PARA GRADIENTE EN EL ACORDEÓN (PRAYER) --- */

/* Estilo para el botón del acordeón en modo claro */
.homescreen-service-button.prayer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px; /* Ancho de la barra */
    height: 100%;
    /* Gradiente de gris a dorado */
    background-color: #5F7367;
}

/* Estilo para el botón del acordeón en modo oscuro */
.homescreen-service-button.prayer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px; /* Ancho de la barra */
    height: 100%;
    /* Color sólido gris verdoso */
    background-color: #5F7367; 
}

/* --- FIN DE LA REGLA --- */


/* Indicador para modo claro */
.indicator-gray::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 3px; height: 70%;
    background-color: #5F7367; /* <-- CAMBIADO A GRIS VERDOSO */
    border-radius: 2px;
}

/* Indicador para modo oscuro */
.dark-theme .indicator-gray::before {
    /* Y su versión para modo oscuro */
     background-color: #8A9B91;
}
/* === Estilos para el modo oscuro (CORREGIDO Y COMPLETO) === */
.dark-theme .homescreen-service-button {
    background-color: #1f2937;
    border-color: #374151; /* Borde general para modo oscuro */
}
.dark-theme .homescreen-service-button:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.dark-theme .homescreen-service-button.unity { 
    border-left-color: #f87171; 
}
.dark-theme .homescreen-service-button.brahot { 
    border-left-color: #60a5fa; 
}
.dark-theme .homescreen-service-button.gaavah::before {
    background: linear-gradient(to bottom, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa);
}

/* --- NUEVOS ESTILOS PARA MODO DE VISTA PAGINADO --- */
#view-mode-toggle.active,
#options-menu-trigger.active {
    background-color: #e2e8f0; /* Gris claro para estado activo */
    color: #1e293b;
}

.dark-theme #view-mode-toggle.active,
.dark-theme #options-menu-trigger.active {
    background-color: #374151; /* Gris oscuro para estado activo */
    color: #f9fafb;
}

/* Estilos para el contenedor principal en modo paginado */
body.paginated-view-active main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 0rem !important;
    box-sizing: border-box;
}

body.paginated-view-active #content-column {
   flex-grow: 1;
   overflow-y: hidden;
   display: flex;
   padding-top: 0rem;
   margin: 0;
}

/* Las páginas (artículos) en modo paginado */
.paginated-page {
    display: none;
    flex-grow: 1;
    overflow-y: auto; 
    padding: 1rem;
    animation: fadeIn 0.4s ease-in-out;
}

.paginated-page > *:first-child {
    margin-top: 0 !important;
}

.paginated-page.active-page {
    display: block;
}

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

/* Controles de paginación en la barra superior */
.pagination-top-controls {
    display: none;
}
body.paginated-view-active .pagination-top-controls {
    display: flex;
}
body.paginated-view-active .pagination-top-controls-placeholder {
    display: none;
}

.pagination-top-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* --- INICIO: ESTILO UNIFICADO PARA BOTONES DEL MENÚ DE OPCIONES --- */

/* 1. Estilo base para TODOS los botones del menú.
   Sin fondo, sin borde, y con una fuente más audaz por defecto. */
.options-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: transparent; /* SIN FONDO */
    border: 1px solid transparent;   /* SIN BORDE */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-weight: 600;
    color: #374151; /* Color de texto por defecto */
}
.dark-theme .options-menu-btn {
    color: #d1d5db; /* Color de texto por defecto en modo oscuro */
}

/* 2. Efecto hover sutil para todos los botones. */
.options-menu-btn:hover {
    background-color: #f1f5f9;
    color: #1e293b;
}
.dark-theme .options-menu-btn:hover {
    background-color: #374151;
    color: #f9fafb;
}

/* 3. Estilo para botones 'is-toggle' cuando están INACTIVOS.
   Se ven grises y tachados. */
.options-menu-btn.is-toggle:not(.active) {
    color: #9ca3af; /* Gris */
    text-decoration: line-through; /* Tachado */
    font-weight: normal;
    opacity: 0.7;
}
/* El tachado no se aplica a los íconos (SVG), así que solo ajustamos su color y opacidad. */
.options-menu-btn.is-toggle:not(.active) svg {
    stroke: currentColor;
}

/* 4. Estilo para botones 'is-toggle' cuando están ACTIVOS.
   Se ven como texto/ícono normal y nítido. */
.options-menu-btn.is-toggle.active {
    color: #1e293b;
    text-decoration: none;
    opacity: 1;
}

/* 5. Ajustes para el Modo Oscuro */
.dark-theme .options-menu-btn.is-toggle:not(.active) {
    color: #6b7280; /* Gris del modo oscuro */
}
.dark-theme .options-menu-btn.is-toggle.active {
    color: #f9fafb; /* Color de texto activo en modo oscuro */
}
/* --- FIN: ESTILO UNIFICADO PARA BOTONES DEL MENÚ DE OPCIONES --- */
.options-grid-4, .options-grid-3, .options-grid-2 { /* Añadido .options-grid-2 aquí */
    display: grid;
    gap: 0.5rem;
}
.options-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.options-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* Agrega esta nueva regla */
.options-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
/* --- INICIO: CSS PARA EL TACHADO DE ÍCONOS --- */

/* Hace que el ícono del "slash" sea visible cuando el botón no está activo */
.options-menu-btn.is-toggle:not(.active) .inactive-slash {
    display: block; /* Muestra el slash */
}

/* Baja la opacidad del ícono principal cuando está inactivo para que el slash resalte */
.options-menu-btn.is-toggle:not(.active) > div > svg:first-child {
   opacity: 0.5;
}

/* --- FIN: CSS PARA EL TACHADO DE ÍCONOS --- */
/* --- INICIO: GESTIÓN DE VISIBILIDAD DE FLECHAS DE NAVEGACIÓN --- */
/* Por defecto, las flechas de escritorio están ocultas (modo scroll) */
#pagination-controls-desktop {
    display: none;
}

/* Muestra las flechas solo cuando el modo paginado está activo */
body.paginated-view-active #pagination-controls-desktop {
    display: flex;
}
/* --- FIN: GESTIÓN DE VISIBILIDAD DE FLECHAS DE NAVEGACIÓN --- */
/* --- INICIO: FIX PARA EL ESPACIO SUPERIOR EN VISTA PAGINADA --- */
/*
  Esta regla reduce drásticamente el relleno superior del contenedor de la diapositiva
  (.paginated-page) solo cuando el modo paginado está activo.
  Esto elimina el gran espacio en blanco entre la barra superior y el título,
  asegurando que el contenido comience mucho más cerca del borde superior del lienzo.
*/
body.paginated-view-active .paginated-page {
    padding-top: 0.25rem; /* Reduce el espacio superior de 1rem a 0.25rem */
}
/* --- FIN: FIX PARA EL ESPACIO SUPERIOR EN VISTA PAGINADA --- */
/* --- INICIO: FIX ESTRUCTURAL DEFINITIVO --- */
/*
  Crea un espacio estructural al principio del contenedor de contenido
  en modo paginado, empujando todo hacia abajo para que la barra
  superior NUNCA pueda cubrirlo.
*/
body.paginated-view-active #content-column {
    padding-top: 3.5rem; /* El tamaño exacto de la barra superior + un poco de margen */
}
/* --- FIN: FIX ESTRUCTURAL DEFINITIVO --- */
/* --- INICIO: FIX ESPACIO EN BLANCO EN TÍTULOS DE SUB-GRUPO --- */
/*
  Elimina el padding, margen y borde superior de los títulos de sub-grupo (h3)
  cuando son el PRIMER elemento en una diapositiva del modo paginado,
  para eliminar el exceso de espacio en blanco en la parte superior.
*/
.paginated-page > h3.sub-group-title:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
/* --- FIN: FIX --- */
/* --- INICIO: OCULTAR TÍTULO EN MODO DIAPOSITIVA (MÓVIL) --- */
/*
  Esta regla oculta el texto del título central en la barra superior
  únicamente cuando se activa el modo de diapositivas, cumpliendo
  con la solicitud de una interfaz más limpia en esa vista en dispositivos móviles.
*/
body.paginated-view-active #pagination-title-mobile {
    display: none;
}
/* --- FIN: OCULTAR TÍTULO --- */
/* --- INICIO: REGLA DINÁMICA PARA LÍNEA LATERAL DE CURSIVAS --- */

/* 1. Definimos los colores de cada tema usando variables de CSS */
body[data-service-theme="unity"] {
    --service-color: #b91c1c; /* Rojo */
}
body[data-service-theme="brahot"] {
    --service-color: #2563eb; /* Azul */
}



/* Versiones para el modo oscuro */
.dark-theme body[data-service-theme="unity"] {
    --service-color: #f87171; /* Rojo Claro */
}
.dark-theme body[data-service-theme="brahot"] {
    --service-color: #60a5fa; /* Azul Claro */
}

/* --- INICIO: REGLA PARA GRADIENTE GRIS Y DORADO (PRAYER) --- */

/* === INICIO: NUEVA REGLA (AÑADIR ESTO) === */
/* 1. Define la variable de color principal para 'prayer'.
   Esto le dice a la tarjeta <article> qué color usar.
*/
body[data-service-theme="prayer"] {
    --service-color: #5F7367; /* Gris Verdoso */
}

/* Modo oscuro */
.dark-theme body[data-service-theme="prayer"] {
    --service-color: #8A9B91; /* Gris Verdoso Claro */
}
/* === FIN: NUEVA REGLA === */

/* Estilo para la línea lateral en modo claro */
body[data-service-theme="prayer"] .text-spanish i,
body[data-service-theme="prayer"] .text-english i {
    border-left-color: #5F7367; /* <-- CAMBIADO A GRIS VERDOSO */
}

/* Estilo para la línea lateral en modo oscuro (colores más brillantes) */
.dark-theme body[data-service-theme="prayer"] .text-spanish i,
.dark-theme body[data-service-theme="prayer"] .text-english i {
    border-left-color: #8A9B91; /* <-- CAMBIADO A GRIS VERDOSO CLARO */
}

/* --- FIN DE LA REGLA --- */

/* 2. Aplicamos el estilo base a las cursivas, usando la variable */
.text-spanish i,
.text-english i {
    display: block;
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    font-size: 105%;
    color: #1f2937;
    /* Usamos la variable --service-color. Si no existe, usa un gris por defecto. */
    border-left: 3px solid var(--service-color, #d1d5db); 
}

/* Modo oscuro para el texto de la cursiva */
.dark-theme .text-spanish i,
.dark-theme .text-english i {
    color: #d1d5db;
}


/* 3. Caso especial para Gaavah (multicolor), que no puede usar una variable de color */
body[data-service-theme="gaavah"] .text-spanish i,
body[data-service-theme="gaavah"] .text-english i {
    border-left: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082);
}

/* Modo oscuro para Gaavah */
.dark-theme body[data-service-theme="gaavah"] .text-spanish i,
.dark-theme body[data-service-theme="gaavah"] .text-english i {
    border-image-source: linear-gradient(to bottom, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa);
}

/* --- FIN DE LA REGLA --- */
/* --- INICIO: REGLAS PARA TEMA 'NETIVOT' (GRIS Y AMARILLO) --- */

/* === INICIO: NUEVA REGLA (AÑADIR ESTO) === */
/* 1. Define la variable de color principal para 'netivot'.
  Esto le dice a la tarjeta <article> qué color usar.
*/
body[data-service-theme="netivot"] {
    --service-color: #FBBF24; /* Amarillo (tomado del gradiente) */
}

/* Modo oscuro */
.dark-theme body[data-service-theme="netivot"] {
    --service-color: #FCD34D; /* Amarillo claro (tomado del gradiente) */
}
/* === FIN: NUEVA REGLA === */

/* 1. Botón del acordeón en la Homescreen */
.homescreen-service-button.netivot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #808080, #FBBF24); /* Gris a Amarillo */
}

/* Modo oscuro para el botón del acordeón */
.dark-theme .homescreen-service-button.netivot::before {
    background: linear-gradient(to bottom, #9ca3af, #FCD34D); /* Gris claro a Amarillo claro */
}


/* 2. Indicador de color en la barra superior */
.indicator-netivot::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 4px; height: 80%;
    border-radius: 3px;
    background: linear-gradient(to bottom, #808080, #FBBF24); /* Gris a Amarillo */
}

/* Modo oscuro para el indicador */
.dark-theme .indicator-netivot::before {
    background: linear-gradient(to bottom, #9ca3af, #FCD34D); /* Gris claro a Amarillo claro */
}


/* 3. Línea lateral para los textos en cursiva */
body[data-service-theme="netivot"] .text-spanish i,
body[data-service-theme="netivot"] .text-english i {
    border-left: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, #808080, #FBBF24);
}

/* Modo oscuro para la línea lateral */
.dark-theme body[data-service-theme="netivot"] .text-spanish i,
.dark-theme body[data-service-theme="netivot"] .text-english i {
    border-image-source: linear-gradient(to bottom, #9ca3af, #FCD34D);
}

/* --- FIN DE REGLAS PARA 'NETIVOT' --- */
/*
============================================================
=== VERSIÓN (FORZANDO ENCASTRE) + INSTRUCCIONES CORREGIDAS ===
============================================================
*/

/* --- 1. Paleta de Colores y Tipografía Base --- */
:root {
    --color-background-light: #f5f5f4;
    --color-background-card-light: #ffffff;
    --color-text-primary-light: #2c3e50; /* "Negro" */
    --color-text-secondary-light: #7f8c8d;
    --color-accent-gold: #a89a74; /* Dorado */
    --corner-radius: 12px; /* El radio del "abrazo" */
}
.dark-theme {
    --color-background-light: #111827;
    --color-background-card-light: #1f2937;
    --color-text-primary-light: #e0e6f0;
    --color-text-secondary-light: #8a9b91;
    --color-accent-gold: #c7b894; /* Dorado claro */
}
body {
    font-size: 100%;
    background-color: var(--color-background-light) !important;
}

/* --- 2. Jerarquía de Títulos --- */

/* ---
   LA "TAPA" (PARTE 1: TÍTULO H2)
--- */
h2.main-section-title {
    font-family: var(--font-serif);
    font-size: 1.8em;
    font-weight: 700;
    text-align: center;
    color: #ffffff !important;
    background-color: var(--color-accent-gold) !important;
    
    padding: 1.25rem 1.5rem 0.5rem 1.5rem !important;
    margin: 3rem 0 0 0 !important;
    
    border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
.dark-theme h2.main-section-title {
    background-color: var(--color-accent-gold) !important;
    color: #333 !important;
}

/* ---
   LA "TAPA" (PARTE 2: SUBTÍTULO) - ¡CON EL ABRAZO!
--- */
/* Usamos #content-column para aumentar la especificidad */
#content-column h2.main-section-title ~ p.prayer-subtitle {
    font-family: var(--font-serif) !important;
    font-size: 1em !important;
    font-style: italic !important;
    text-align: center !important;
    color: #ffffff !important;
    background-color: var(--color-accent-gold) !important;
    
    margin: 0 !important;
    padding: 0 1.5rem 1rem 1.5rem !important;
    
    border-radius: 0 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    position: relative;
    z-index: 5;
    overflow: hidden; 
}
.dark-theme #content-column h2.main-section-title ~ p.prayer-subtitle {
    background-color: var(--color-accent-gold) !important;
    color: #333 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* ---
   EL "ABRAZO" (Pseudo-elementos)
   Usamos #content-column para aumentar la especificidad
--- */
#content-column h2.main-section-title ~ p.prayer-subtitle::before,
#content-column h2.main-section-title ~ p.prayer-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: var(--corner-radius);
    height: var(--corner-radius);
    /* Color de la base (blanco) */
    background-color: var(--color-background-article-light); 
}
#content-column h2.main-section-title ~ p.prayer-subtitle::before {
    left: 0;
    border-top-right-radius: var(--corner-radius);
}
#content-column h2.main-section-title ~ p.prayer-subtitle::after {
    right: 0;
    border-top-left-radius: var(--corner-radius);
}
.dark-theme #content-column h2.main-section-title ~ p.prayer-subtitle::before,
.dark-theme #content-column h2.main-section-title ~ p.prayer-subtitle::after {
     background-color: var(--color-background-article-light);
}


/* ---
   LA "BASE" (div.bg-white) - EL ENCASTRE
   Usamos #content-column para aumentar la especificidad
--- */
#content-column h2.main-section-title ~ div.bg-white {
    margin-top: 0 !important; /* Ya no se solapa */
    padding-top: 1.5rem !important;
    
    /* ¡CLAVE! Las esquinas superiores coinciden con el "abrazo" */
    border-radius: var(--corner-radius) var(--corner-radius) 12px 12px !important; 
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    background-color: var(--color-background-article-light) !important;
    border-top: none !important;
    position: relative;
    z-index: 1;
}
.dark-theme #content-column h2.main-section-title ~ div.bg-white {
     background-color: var(--color-background-article-light) !important;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
     border-top: none !important;
}


/* ---
   Nivel 2: Título de Sub-grupo (H3)
--- */
h3.sub-group-title {
    font-family: var(--font-serif);
    font-size: 1.6em;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-primary-light);
    margin: 2.5rem 0 1.5rem 0;
    padding-top: 0;
    border-top: none;
}

/* ---
   Nivel 3: Plegarias Internas (article)
--- */
article {
    background-color: var(--color-background-article-light);
    border-radius: 8px;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-top: 4px solid var(--service-color, var(--color-accent-gold));
    overflow: visible;

    /* 1. Fondo blanco pero al 70% de opacidad (el 4to número es alfa) */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    
    /* 2. El desenfoque de lo que está detrás (El truco del cristal) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Para Safari/iOS */
    
    /* 3. Un borde sutil blanco semitransparente para definir los bordes */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* 4. Importante: Mantener tu borde de color superior */
    border-top: 4px solid var(--service-color, var(--color-accent-gold));
    
    /* 5. Una sombra un poco más difusa ayuda al efecto flotante */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}
.dark-theme article {
    /* 1. Fondo gris oscuro (Slate-800) al 70% de opacidad */
    background-color: rgba(30, 41, 59, 0.7) !important;
    
    /* 2. Borde muy sutil y fino (casi invisible) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 3. Mantener el borde superior de color */
    border-top: 4px solid var(--service-color, var(--color-accent-gold));
    
    /* 4. Sombra para profundidad en oscuro */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* ---
   Nivel 3: Título de Plegarias (H4)
--- */
h4.prayer-title {
    font-family: var(--font-serif);
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-primary-light); /* Color "Negro" */
    margin: 0 0 0.25rem 0;
    padding: 0;
    border: none;
    display: block;
}
h4.prayer-title::before, h4.prayer-title::after {
    display: none !important; /* MATA las líneas punteadas */
}
.dark-theme h4.prayer-title {
   color: var(--color-text-primary-light);
}

/* Subtítulo genérico (para plegarias) */
article .prayer-subtitle {
    font-size: 1.1em;
    font-style: italic;
    color: var(--color-text-secondary-light);
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
}


/* --- 3. Contenido de las Plegarias (SIN CAMBIOS) --- */
.hebrew { font-size: 1.7em; line-height: 1.8; color: var(--color-text-primary-light); }
.transliteration { font-size: 1.4em; line-height: 1.7; color: var(--color-text-primary-light); font-style: normal; }

/* ---
   NUEVO ESTILO PARA CAJAS DE TRADUCCIÓN (MODO CLARO)
   Restaura las cajas redondeadas que gustan del modo oscuro.
--- */
#content-column div.text-spanish,
#content-column div.text-english {
    /* Usamos el mismo color beige claro de las 'congregation-instruction' */
    background-color: #fdfbf6; 
    
    /* Restauramos el padding, borde y sombra (similar al modo oscuro) */
    padding: 0.75rem;
    border-radius: 0.5rem; /* 8px */
    margin-bottom: 1rem;   /* Espacio entre cajas */
    
    /* Sombra y borde sutiles para el modo claro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 
    border: 1px solid #f0eadd; /* Un borde dorado/beige muy pálido */
}

#content-column div.text-spanish p,
#content-column div.text-english p {
    font-size: 1.125em;
    line-height: 1.75;
    color: var(--color-text-primary-light);
}

/* Cursivas (SIN CAMBIOS) */
.text-spanish i,
.text-english i {
    display: block;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    font-size: 100%;
    border-left: 3px solid var(--service-color, var(--color-accent-gold)); 
    background-color: #f8f5f0;
    border-radius: 0 4px 4px 0;
}
.dark-theme .text-spanish i,
.dark-theme .text-english i {
    background-color: #283141;
}

/* --- 4. INSTRUCCIONES Y CAJAS UNIFICADAS (CORREGIDO) --- */

/* --- 4a. Estilo de CAJA Unificado (Modo Claro) --- */
/* Se aplica a los tres elementos */
.congregation-instruction,
.collapsible-instruction,
.virtual-edition-note {
    background-color: #fdfbf6 !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 4px solid var(--color-accent-gold) !important; 
    border-left: 1px solid #e0e0e0 !important; /* Anula barras de color no deseadas */
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important; /* Unifica quitando sombras */
}

/* --- 4b. Estilo de TEXTO Específico (Modo Claro) --- */
/* Se aplica SOLO a notas y congregación, no a collapsibles */
.congregation-instruction,
.virtual-edition-note {
    text-align: center !important;
    font-size: 0.9em !important;
    color: var(--color-text-primary-light, #2c3e50) !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

/* --- 4c. Estilo de CAJA Unificado (Modo Oscuro) --- */
.dark-theme .congregation-instruction,
.dark-theme .collapsible-instruction,
.dark-theme .virtual-edition-note {
    background-color: #283141 !important;
    border-color: #374151 !important;
    border-top-color: var(--color-accent-gold) !important;
    border-left-color: #374151 !important;
}

/* --- 4d. Estilo de TEXTO Específico (Modo Oscuro) --- */
.dark-theme .congregation-instruction,
.dark-theme .virtual-edition-note {
    color: var(--color-text-primary-light, #e0e6f0) !important;
    font-style: italic !important; /* Asegura cursiva en modo oscuro */
}
/* --- INICIO: RE-ESTILO DE CAJAS DE TRADUCCIÓN (MODO OSCURO) --- */
/*
  Anula la regla de "transparencia" del nuevo diseño (línea 837), 
  pero SOLO para el modo oscuro, para restaurar las cajas con mejor
  estética.
*/
.dark-theme #content-column div.text-spanish,
.dark-theme #content-column div.text-english {
    background-color: #273344 !important; /* Un fondo gris-azulado oscuro */
    padding: 0.75rem !important;          /* Restaura el padding interior */
    border-radius: 0.5rem !important;      /* Bordes redondeados (8px) */
    margin-bottom: 1rem !important;      /* Espacio entre cajas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important; /* Sombra sutil */
    border: 1px solid #374151 !important; /* Borde sutil para definir */
}
/* --- FIN: BLOQUE DE RE-ESTILO --- */
/*
  FIX: Anula la herencia de cursiva para el BarHu
  Esto resetea el estilo a 'normal' para los párrafos de traducción
  (dentro de .text-spanish / .text-english) que están anidados 
  dentro de un bloque .congregation-instruction.
*/
.congregation-instruction .text-translations-container p {
    font-style: normal;
}
/*
  FIX 2: Anula la herencia de cursiva para el Hebreo y Fonética
  del BarHu, que están fuera del contenedor de traducciones.
*/
.congregation-instruction p.text-hebrew,
.congregation-instruction p.text-transliteration {
    font-style: normal;
}
/* --- INICIO: ESTILOS PARA SKELETON SCREEN --- */
.skeleton-bar {
    background-color: #e0e0e0;
    border-radius: 4px;
}
.dark-theme .skeleton-bar {
    background-color: #374151;
}
/* --- FIN: ESTILOS PARA SKELETON SCREEN --- */
/*
============================================================
=== INICIO: ESTILOS DE LÍNEA DE TEMA (HOMESCREEN)       ===
=== VERSIÓN 4: Solución Simple (Colores Sólidos)       ===
============================================================
*/

/* --- MODO CLARO --- */

/* 1. Colores sólidos para todos */
#homescreen .collapsible-instruction.unity {
    border-top-color: #b91c1c !important; /* Rojo */
}
#homescreen .collapsible-instruction.brahot {
    border-top-color: #2563eb !important; /* Azul */
}
#homescreen .collapsible-instruction.prayer {
    border-top-color: #5F7367 !important; /* Gris Verdoso */
}
/* 2. Solución simple para Netivot (Amarillo) */
#homescreen .collapsible-instruction.netivot {
    border-top-color: #FBBF24 !important; /* Amarillo */
}
/* 3. Solución simple para Gaavah (Púrpura) */
#homescreen .collapsible-instruction.gaavah {
    border-top-color: #4b0082 !important; /* Púrpura */
}

/* --- MODO OSCURO --- */

.dark-theme #homescreen .collapsible-instruction.unity {
    border-top-color: #f87171 !important; /* Rojo Claro */
}
.dark-theme #homescreen .collapsible-instruction.brahot {
    border-top-color: #60a5fa !important; /* Azul Claro */
}
.dark-theme #homescreen .collapsible-instruction.prayer {
    border-top-color: #8A9B91 !important; /* Gris Verdoso Claro */
}
/* 5. Solución simple para Netivot (Amarillo Claro) */
.dark-theme #homescreen .collapsible-instruction.netivot {
    border-top-color: #FCD34D !important; /* Amarillo Claro */
}
/* 6. Solución simple para Gaavah (Púrpura Claro) */
.dark-theme #homescreen .collapsible-instruction.gaavah {
    border-top-color: #a78bfa !important; /* Púrpura Claro */
}

/*
============================================================
=== FIN: ESTILOS DE LÍNEA DE TEMA (HOMESCREEN)           ===
============================================================
*/
/*
============================================================
=== INICIO: FIX TAMAÑO DE TEXTO DE INSTRUCCIONES       ===
============================================================
*/

/*
  Esto apunta a los párrafos <p> dentro de una caja de instrucción
  que NO sean el hebreo o la fonética, y los hace un 15% más grandes
  relativo al tamaño de la caja (que es 0.9em).
  (0.9em * 1.15em = ~1.035em del tamaño base de la página)
*/
.congregation-instruction > p:not(.text-hebrew):not(.text-transliteration) {
    font-size: 1.12em !important;
}

/* Hacemos lo mismo para las .virtual-edition-note si tuvieran el mismo problema */
.virtual-edition-note > p {
     font-size: 1.12em !important;
}

/*
============================================================
=== FIN: FIX TAMAÑO DE TEXTO DE INSTRUCCIONES           ===
=====================================
=======================
*/
/*
============================================================
=== INICIO: UNIFICACIÓN DE ESTILO (COLLAPSIBLE HEADER) ===
=== VERSIÓN 3: Corregido el tamaño (0.9em) y el estado "cerrado" ===
============================================================
*/

/*
  1. ESTADO CERRADO:
  Aplica a TODOS los headers, forzándolos a coincidir
  con el tamaño/estilo de .congregation-instruction (que es 0.9em).
*/
.collapsible-header {
    /*
      Forzamos el tamaño de fuente, estilo y peso para que
      coincida con las congregation-instructions (que tienen 0.9em).
    */
    font-size: 1em !important;
    font-style: italic !important;
    font-weight: 500 !important;

    /*
      IMPORTANTE: NO tocamos el color ni la opacidad.
      Esto permite que la regla original (linea 122-129)
      aplique el color gris pálido (#94a3b8) y la opacidad (0.8),
      cumpliendo con tu solicitud de que se vea "más gris".
    */
}

/*
  Anulamos el 'font-bold' de cualquier <p> interno (como en la nota virtual)
  para que herede el peso 500 del header.
*/
.collapsible-header p {
    font-weight: 500 !important;
}

/*
  2. ESTADO ABIERTO:
  Restauramos el color sólido y la opacidad total cuando está abierto.
*/
.collapsible-instruction.open .collapsible-header {
   /* Hereda el tamaño y estilo (0.9em, italic) */
   
   /* Mantenemos el peso para consistencia */
   font-weight: 500 !important;
   
   /* Restauramos el color y opacidad de "abierto" de la regla original */
   color: #475569 !important; 
   opacity: 1 !important;
}

/*
  3. ESTADO ABIERTO (MODO OSCURO):
  Hacemos lo mismo para el modo oscuro.
*/
.dark-theme .collapsible-instruction.open .collapsible-header {
     /* Mantenemos el color de "abierto" de la regla original del modo oscuro */
     color: #d1d5db !important; 
     opacity: 1 !important;
}

/*
  NOTA: No necesitamos una regla .dark-theme .collapsible-header (cerrado)
  porque el estilo por defecto (gris pálido) del modo oscuro ya
  es correcto y no queremos anularlo.
*/

/*
============================================================
=== FIN: UNIFICACIÓN DE ESTILO                         ===
============================================================
*/
/*
============================================================
=== INICIO: ESTILO PARA INSTRUCCIÓN CONCLUYENTE (SENTARSE) ===
============================================================
*/

/* 1. Crea una clase 'instruction-concluding' que invierte el borde */
.congregation-instruction.instruction-concluding {
    border-top: 1px solid #e0e0e0 !important; /* Anula el borde dorado superior */
    border-bottom: 4px solid var(--color-accent-gold) !important; /* Añade el borde dorado abajo */
    margin-top: 1.5rem; /* Asegura el espacio superior */
    margin-bottom: 2.5rem; /* Da más espacio inferior para "cerrar" la sección */
}

/* 2. Ajuste para modo oscuro */
.dark-theme .congregation-instruction.instruction-concluding {
    border-top-color: #374151 !important; /* Anula el borde dorado superior (oscuro) */
    border-bottom-color: var(--color-accent-gold) !important; /* Añade el borde dorado abajo (oscuro) */
}
/*
============================================================
=== FIN: ESTILO PARA INSTRUCCIÓN CONCLUYENTE             ===
============================================================
*/
/* --- INICIO: ESTILO DE BARRA ACTIVA PARA SIDEBAR --- */

/* 1. Prepara todos los enlaces del menú para la barra */
#mobile-menu a.sidebar-link {
    position: relative; /* Necesario para posicionar la barra */
}

/* 2. Añade la barra DORADA para el modo claro */
a.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; /* La alinea a la izquierda */
    top: 50%;
    transform: translateY(-50%);
    width: 4px; /* Ancho de la barra */
    height: 70%; /* Altura de la barra (70% de la altura del enlace) */
    
    /* === CAMBIO AQUÍ === */
    background-color: var(--color-accent-gold); /* Usamos la variable dorada */
    
    border-radius: 2px;
}

/* 3. Cambia el color de la barra para el modo oscuro (usando la misma variable) */
.dark-theme a.sidebar-link.active::before {

    /* === CAMBIO AQUÍ === */
    background-color: var(--color-accent-gold); /* La variable ya se ajusta al modo oscuro */
}
/* --- FIN: ESTILO DE BARRA ACTIVA --- */
/* --- PIZMON STICKY DE CRISTAL --- */
.pizmon-sticky {
    /* Comportamiento */
    position: sticky;
    top: 4rem; 
    z-index: 40;

    /* ESTILO CRISTAL */
    /* Usamos el color beige (#fdfbf6) pero con transparencia (0.9) */
    background-color: rgba(253, 251, 246, 0.9) !important; 
    
    backdrop-filter: blur(12px); /* Un poco menos de blur para no distraer la lectura */
    -webkit-backdrop-filter: blur(12px);
    
    /* Bordes */
    border: 1px solid rgba(224, 224, 224, 0.6);
    border-top: 4px solid var(--service-color, #a89a74); /* Mantenemos la línea de color */
    
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Modo Oscuro */
.dark-theme .pizmon-sticky {
    /* Gris oscuro con transparencia */
    background-color: rgba(40, 49, 65, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--service-color, #c7b894);
}
/* =========================================
   DISEÑO DE CRISTAL (LIMPIO Y NEUTRO)
   ========================================= */

/* --- 1. ESTILO BASE (Barra Superior) --- */
#top-bar {
    /* Fondo: Blanco con 85% de opacidad */
    background-color: rgba(255, 255, 255, 0.85) !important;
    
    /* Efecto borroso */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* CAMBIO AQUÍ: Borde neutro y fino en lugar de color */
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    
    /* Sombra suave */
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05) !important;
    
    transition: all 0.4s ease;

    border-radius: 0 0 24px 24px !important;
}

/* --- 2. ESTILO BASE (Barra Lateral - Ya estaba neutra, la mantenemos igual) --- */
#mobile-menu {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

/* =========================================
   MODO OSCURO (Mejorado)
   ========================================= */

/* Header en Oscuro */
.dark-theme #top-bar {
    /* Fondo gris azulado con transparencia */
    background-color: rgba(30, 41, 59, 0.75) !important; 
    
    /* CAMBIO AQUÍ: Borde inferior sutil (luz) en lugar de color */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Borde superior sutil */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.5) !important;

    border-radius: 0 0 24px 24px !important;
}

/* Sidebar en Oscuro */
.dark-theme #mobile-menu {
    background-color: rgba(30, 41, 59, 0.75) !important; 
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2) !important;
}

/* --- AJUSTE DE BOTONES (Sin cambios, funcionan bien) --- */
#top-bar button, 
#program-selector-trigger {
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

#top-bar button:hover, 
#program-selector-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark-theme #top-bar button:hover, 
.dark-theme #program-selector-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
/* --- DISEÑO DE PORTADA (HEADER DEL CONTENIDO) --- */

/* 1. Contenedor de la Portada */
#content-column > header {
    position: relative;
    text-align: center;
    
    /* Espaciado interno generoso */
    padding: 3rem 1.5rem 2rem 1.5rem !important;
    margin-bottom: 3rem !important;
    
    /* Fondo sutilmente destacado del resto de la página */
    background-color: #ffffff;
    border-radius: 0 0 20px 20px; /* Bordes redondeados solo abajo */
    box-shadow: 0 10px 40px -15px rgba(0,0,0,0.08); /* Sombra suave flotante */
    
    /* Eliminamos el borde gris viejo */
    border-bottom: none !important;
    overflow: hidden; /* Para contener los adornos */
}

/* Modo Oscuro */
.dark-theme #content-column > header {
    background-color: #1f2937; /* Gris oscuro */
    box-shadow: 0 10px 40px -15px rgba(0,0,0,0.5);
}

/* 2. "Techo" de Color (Barra superior decorativa) */
#content-column > header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%; /* No ocupa todo el ancho, se ve más elegante */
    right: 15%;
    height: 6px;
    /* Usa el color del servicio (Rojo/Azul) o gris si no hay */
    background-color: var(--service-color, #9ca3af);
    border-radius: 0 0 8px 8px;
    opacity: 0.8;
}

/* 3. Título Hebreo (El Protagonista) */
#content-column > header h1 {
    /* Toma el color del servicio */
    color: var(--service-color, #1e293b) !important;
    
    font-family: 'Bona Nova', serif;
    font-size: 3.5rem !important; /* Mucho más grande e imponente */
    line-height: 1.1;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    
    /* Sombra de texto sutil para darle relieve */
    text-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* 4. Subtítulo en Inglés/Español */
#content-column > header p.text-2xl {
    font-family: 'Bona Nova', serif;
    font-style: italic;
    color: #64748b !important; /* Gris elegante */
    font-size: 1.4rem !important;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.dark-theme #content-column > header p.text-2xl {
    color: #9ca3af !important;
}

/* 5. Créditos y Texto Pequeño */
#content-column > header .text-slate-500 {
    font-size: 0.9rem !important;
    opacity: 0.8;
    margin-top: 2rem !important;
}
/* --- MEJORA VISUAL DEL HOMESCREEN --- */

/* 1. Fondo con Imagen (Estilo mejorado) */
#homescreen {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
        url('sealing1.jpg') center center / cover no-repeat fixed !important;
}
.dark-theme #homescreen {
    /* En modo oscuro, hacemos la capa negra un poco más opaca (60%) */
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('sealing1.jpg') center center / cover no-repeat fixed !important;
}

/* 2. La Tarjeta de Cristal del Header */
.homescreen-header-card {
    /* Efecto Cristal Esmerilado */
    background-color: rgba(255, 255, 255, 0.65) !important; /* Más translúcido */
    backdrop-filter: blur(20px) saturate(180%); /* Blur fuerte y saturación para viveza */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Borde sutil de luz */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* Sombra suave y flotante */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    
    /* Forma */
    border-radius: 24px; /* Bordes muy redondeados y modernos */
    padding: 2.5rem 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

/* Ajustes para Modo Oscuro */
.dark-theme .homescreen-header-card {
    background-color: rgba(30, 41, 59, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Estilo base de la tarjeta (Asegúrate de que tenga opacity: 0) */
.homescreen-header-card {
    /* ... tus estilos de fondo, borde, sombra, etc. ... */
    
    /* ESTADO INICIAL: Invisible y desplazada hacia abajo */
    opacity: 0;
    transform: translateY(20px);
}

/* LA REGLA MÁGICA: Solo anima cuando #homescreen tiene la clase .visible */
#homescreen.visible .homescreen-header-card {
    animation: floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.1s; /* Un pequeño respiro antes de arrancar */
}

/* Los Keyframes (si no los tenías, agrégalos) */
@keyframes floatUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes floatUp {
    to { opacity: 1; transform: translateY(0); }
}
/* --- ANIMACIÓN EN CASCADA PARA LOS BOTONES --- */

/* 1. Estado inicial: Invisibles y desplazados hacia abajo */
#homescreen-selector-container > div {
    opacity: 0;
    transform: translateY(20px);
}

/* 2. Activar animación cuando el homescreen es visible */
#homescreen.visible #homescreen-selector-container > div {
    animation: floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 3. Retrasos escalonados (Staggered Delays) 
   Esto hace que aparezcan uno tras otro en lugar de todos a la vez.
   El título aparece en 0.1s, así que estos empiezan un poco después.
*/

/* Unity (1ro) */
#homescreen.visible #homescreen-selector-container > div:nth-child(1) { 
    animation-delay: 0.25s; 
}

/* Prayer (2do) */
#homescreen.visible #homescreen-selector-container > div:nth-child(2) { 
    animation-delay: 0.35s; 
}

/* Netivot (3ro) */
#homescreen.visible #homescreen-selector-container > div:nth-child(3) { 
    animation-delay: 0.45s; 
}

/* Brachot (4to) */
#homescreen.visible #homescreen-selector-container > div:nth-child(4) { 
    animation-delay: 0.55s; 
}
/* ============================================================
   === MENÚ FUERA DEL HEADER (ESTILO FIXED + BLUR REAL) ===
   ============================================================ */

#options-menu-popup {
    /* Usamos FIXED para que flote sobre la pantalla independientemente del scroll */
    position: fixed;
    
    /* Coordenadas exactas (debajo de la barra de 4rem) */
    top: 4.2rem; 
    right: 0.5rem; 
    
    z-index: 9999; /* Capa superior absoluta */
    width: 280px;
    padding: 0.5rem;
    border-radius: 0.75rem;

    /* --- MODO CLARO --- */
    /* Opacidad al 75% para permitir que el blur trabaje */
    background-color: rgba(255, 255, 255, 0.75) !important;
    
    /* BLUR REAL (Ahora sí funcionará porque no está dentro del header) */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15) !important;
}

/* --- MODO OSCURO --- */
.dark-theme #options-menu-popup {
    /* Opacidad al 70% */
    background-color: rgba(30, 41, 59, 0.70) !important;
    
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.7) !important;
}
/* ============================================================
   === BARRA LATERAL FLOTANTE (ISLA DE CRISTAL) ===
   ============================================================ */

#mobile-menu {
    /* 1. POSICIONAMIENTO: La convertimos en una "isla" flotante */
    position: fixed !important;
    top: 4.5rem !important;      /* Debajo de la barra superior */
    left: 0.5rem !important;     /* Separada del borde izquierdo */
    bottom: 0.5rem !important;   /* Separada del borde inferior */
    height: auto !important;     /* Dejamos que bottom defina la altura */
    width: 16rem !important;     /* Ancho fijo consistente */
    
    /* 2. FORMA: Redondeada completa */
    border-radius: 24px !important;
    
    /* 3. ESTILO CRISTAL (Igual que tus menús) */
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    /* 4. DETALLES */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 5px 0 25px -5px rgba(0, 0, 0, 0.1) !important;
    
    /* Ajuste interno para que el contenido no se pegue al borde curvo */
    padding-top: 1rem !important; 
    z-index: 40 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.6) !important; /* Refuerzo visual */
}

/* --- MODO OSCURO --- */
.dark-theme #mobile-menu {
    background-color: rgba(30, 41, 59, 0.70) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 5px 0 25px -5px rgba(0, 0, 0, 0.5) !important;
}
/* ============================================================
   === CORRECCIÓN DE CONTENIDO FINAL (MAIN Y TOPBAR) ===
   ============================================================ */

@media (min-width: 1024px) {
    /* 1. EL CONTENEDOR DE TEXTO (MAIN) */
    /* Este SÍ lo empujamos para que no quede debajo de la barra lateral de cristal */
    main {
        margin-left: 18rem !important;
        width: calc(100% - 18rem) !important;
        max-width: calc(100% - 18rem) !important;
    }
    
    /* 2. LA BARRA SUPERIOR (TOP BAR) - CORREGIDO */
    /* No la empujamos. Dejamos que ocupe todo el ancho para que los botones y títulos */
    /* se distribuyan correctamente (logo a la izquierda, título al centro/izq, opciones a la derecha) */
    #top-bar {
        padding-left: 1rem !important; /* Padding estándar pequeño */
        width: 100% !important;
        left: 0 !important;
    }
}
/* ============================================================
   === AJUSTE FINO: ESTADO "INACTIVO/DISABLED" LEGIBLE ===
   ============================================================ */

/* 1. MODO CLARO (Estado Cerrado) */
.collapsible-header {
    /* Usamos Slate-500: Un gris medio, elegante y legible, pero claramente no es negro */
    color: #64748b !important; 
    
    /* Mantenemos la opacidad al 100% para que las letras sean NÍTIDAS */
    opacity: 1 !important;
    
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

/* Feedback visual: Al pasar el mouse o abrir, se oscurece para indicar "activo" */
.collapsible-header:hover,
.collapsible-instruction.open .collapsible-header {
    color: #334155 !important; /* Slate-700 (Más oscuro) */
}

/* La flecha sigue al texto */
.collapsible-header .collapsible-arrow {
    color: #64748b !important;
    opacity: 1 !important;
}
.collapsible-header:hover .collapsible-arrow,
.collapsible-instruction.open .collapsible-arrow {
    color: #334155 !important;
}


/* 2. MODO OSCURO (Estado Cerrado) */
.dark-theme .collapsible-header {
    /* Usamos Slate-400: Un gris claro mate. Se lee perfecto sobre negro, pero no brilla */
    color: #94a3b8 !important; 
    opacity: 1 !important;
}

/* Feedback visual en oscuro: Al interactuar se vuelve casi blanco */
.dark-theme .collapsible-header:hover,
.dark-theme .collapsible-instruction.open .collapsible-header {
    color: #f1f5f9 !important; /* Slate-100 (Brillante) */
}

.dark-theme .collapsible-header .collapsible-arrow {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
.dark-theme .collapsible-header:hover .collapsible-arrow,
.dark-theme .collapsible-instruction.open .collapsible-arrow {
    color: #f1f5f9 !important;
}
/* ============================================================
   === FIX FINAL: OCULTAR BARRA LATERAL (NO ESPIAR) ===
   ============================================================ */

/* 1. AJUSTE EN MÓVIL (Cuando está cerrada) */
#mobile-menu {
    /* Antes era -100%. Ahora restamos 2rem extra para compensar el margen y la sombra */
    transform: translateX(calc(-100% - 2rem)) !important;
}

/* 2. AJUSTE AL ABRIR (Restaurar posición) */
#mobile-menu.open {
    transform: translateX(0) !important;
}

/* 3. AJUSTE EN ESCRITORIO (Siempre visible) */
@media (min-width: 1024px) {
    #mobile-menu {
        transform: translateX(0) !important;
    }
}
/* ============================================================
   === CENTRAR TÍTULOS DEL MENÚ DE OPCIONES ===
   ============================================================ */

#options-menu-popup .options-menu-title {
    text-align: center !important;
    width: 100% !important;    /* Asegura que ocupe todo el ancho */
    display: block !important; /* Comportamiento de bloque para centrar el texto */
    
    /* Opcional: Si quieres asegurar que el padding no interfiera */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* ============================================================
   === CENTRAR BOTONES DEL MENÚ (FIX ALINEACIÓN) ===
   ============================================================ */

/* 1. Cambiamos las rejillas a modo Flexible para centrar el contenido */
#options-menu-popup .options-grid-4,
#options-menu-popup .options-grid-2 {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

/* 2. Aseguramos que los botones distribuyan el espacio */
#options-menu-popup .options-menu-btn {
    /* flex: 1 hace que todos tengan el mismo ancho en su fila */
    flex: 1 !important;
    
    /* Centramos el ícono/texto DENTRO del botón */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. CASO ESPECIAL: El botón de Tema (La Luna) */
/* Como está solo, no queremos que se estire al 100% (se vería gigante) */
/* Lo limitamos al 50% del ancho para que se vea elegante y centrado */
#options-menu-popup #theme-toggle {
    flex: 0 0 50% !important; 
    max-width: 150px !important; /* Tope de seguridad */
}
/* ============================================================
   === FIX CONSISTENCIA: FORZAR ESQUEMA DEL NAVEGADOR ===
   ============================================================ */

/* 1. Si tiene la clase .dark-theme, obligamos al navegador a usar modo oscuro */
html.dark-theme {
    color-scheme: dark !important;
}

/* 2. Si NO tiene la clase (Modo Claro), obligamos a usar modo claro */
html:not(.dark-theme) {
    color-scheme: light !important;
}
/* ============================================================
   === FIX TEXTO BOTONES: NITIDEZ SOBRE CRISTAL ===
   ============================================================ */

/* Botones en Modo Claro (Texto Gris Oscuro Sólido) */
html body #options-menu-popup .options-menu-btn {
    color: #334155 !important; /* Slate-700 */
    font-weight: 600 !important;
    opacity: 1 !important; /* Sin transparencias raras */
}

/* Botones en Modo Oscuro (Texto Blanco Brillante) */
html.dark-theme body #options-menu-popup .options-menu-btn {
    color: #f1f5f9 !important; /* Slate-100 */
    font-weight: 500 !important;
}

/* Estado "Tachado" (cuando está desactivado) */
html body #options-menu-popup .options-menu-btn.is-toggle:not(.active) {
    opacity: 0.5 !important; /* Aquí sí bajamos opacidad para indicar inactivo */
}
/* ============================================================
   === FIX FINAL: SINCRONIZACIÓN TOTAL DEL TEMA ===
   ============================================================ */

/* 1. FORZAR MODO OSCURO (Gana a cualquier media query del sistema) */
html.dark-theme, 
html.dark-theme body {
    background-color: #111827 !important; /* bg-gray-900 */
    color: #d1d5db !important;            /* text-gray-300 */
    color-scheme: dark !important;
}

/* 2. FORZAR MODO CLARO */
html:not(.dark-theme), 
html:not(.dark-theme) body {
    background-color: #f5f5f4 !important; /* bg-stone-100 */
    color: #334155 !important;            /* text-slate-700 */
    color-scheme: light !important;
}

/* 3. TRANSICIÓN SUAVE DE FONDO (Evita el cambio brusco) */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* ============================================================
   === EL MARTILLO: FORZAR CONSISTENCIA DE TEMA ===
   ============================================================ */

/* --- 1. FORZAR MODO OSCURO (Cuando activas la luna) --- */
html.dark-theme body {
    background-color: #111827 !important; /* Fondo general oscuro */
    color: #e2e8f0 !important;            /* Texto general claro */
}

/* Forzamos las tarjetas de texto (que usan bg-white) a volverse oscuras */
html.dark-theme .bg-white {
    background-color: #1f2937 !important; /* Gris oscuro (Slate-800) */
    color: #e2e8f0 !important;            /* Texto claro */
    border-color: #374151 !important;     /* Bordes oscuros */
}

/* Forzamos los títulos a ser claros */
html.dark-theme h1, 
html.dark-theme h2, 
html.dark-theme h3, 
html.dark-theme h4,
html.dark-theme .text-slate-800,
html.dark-theme .text-slate-700 {
    color: #f1f5f9 !important; /* Blanco hueso */
}

html.dark-theme .text-slate-500,
html.dark-theme .text-slate-600 {
    color: #94a3b8 !important; /* Gris medio claro */
}

/* --- 2. FORZAR MODO CLARO (Cuando desactivas la luna) --- */
/* Esto arregla el problema si tu computadora es Oscura pero pones la web en Claro */
html:not(.dark-theme) body {
    background-color: #f5f5f4 !important; /* Stone-100 */
    color: #334155 !important;            /* Slate-700 */
}

html:not(.dark-theme) .bg-white {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #e5e7eb !important;
}

html:not(.dark-theme) h1, 
html:not(.dark-theme) h2, 
html:not(.dark-theme) h3, 
html:not(.dark-theme) h4 {
    color: #1e293b !important; /* Slate-800 */
}
/* FIX FINAL: Forzar título principal a blanco en modo claro (Vence al Martillo) */
html:not(.dark-theme) h2.main-section-title {
    color: #ffffff !important;
}
/* ============================================================
   === ESTILO CRISTAL PARA LAS TARJETAS DEL HOMESCREEN ===
   ============================================================ */

/* 1. EL CONTENEDOR (La Tarjeta Principal) */
#homescreen .collapsible-instruction {
    /* Fondo blanco translúcido (Igual que el Header) */
    background-color: rgba(255, 255, 255, 0.65) !important;
    
    /* El efecto de borrosidad (Blur) */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Bordes y Sombras */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* NOTA: El border-top de color (rojo/azul/etc.) se mantiene gracias a tus reglas anteriores */
    
    border-radius: 16px !important; /* Bordes más redondeados y modernos */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
    
    margin-bottom: 1rem; /* Espacio entre tarjetas */
    overflow: hidden; /* Asegura que el contenido interno respete las curvas */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto al pasar el mouse sobre toda la tarjeta */
#homescreen .collapsible-instruction:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15);
}

/* 2. LOS BOTONES INTERNOS (Corregido para líneas laterales) */
#homescreen .collapsible-instruction .homescreen-service-button {
    background-color: transparent !important;
    border: none !important; /* Quitamos bordes viejos */
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative; /* Necesario para que la línea se posicione bien */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-left: 1.25rem; /* Espacio para que el texto no toque la línea */
}

/* --- REGLAS PARA RESTAURAR LAS LÍNEAS (Estilo Unificado) --- */

/* 1. Quitamos explícitamente el border-left antiguo para evitar duplicados */
#homescreen .collapsible-instruction .homescreen-service-button.unity,
#homescreen .collapsible-instruction .homescreen-service-button.brahot,
#homescreen .collapsible-instruction .homescreen-service-button.prayer,
#homescreen .collapsible-instruction .homescreen-service-button.netivot {
    border-left: none !important;
}

/* 2. Creamos la línea lateral usando '::before' para Unity (Rojo) */
#homescreen .collapsible-instruction .homescreen-service-button.unity::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #b91c1c; /* Rojo Unity */
    z-index: 10;
}

/* 3. Creamos la línea lateral usando '::before' para Brachot (Azul) */
#homescreen .collapsible-instruction .homescreen-service-button.brahot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #2563eb; /* Azul Brahot */
    z-index: 10;
}

/* (Prayer y Netivot ya tienen sus propias reglas ::before en tu CSS original, así que se verán bien automáticamente) */

/* 4. Ajustes de color para MODO OSCURO */
.dark-theme #homescreen .collapsible-instruction .homescreen-service-button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
}

.dark-theme #homescreen .collapsible-instruction .homescreen-service-button.unity::before {
    background-color: #f87171; /* Rojo Claro */
}
.dark-theme #homescreen .collapsible-instruction .homescreen-service-button.brahot::before {
    background-color: #60a5fa; /* Azul Claro */
}

/* 5. Efecto Hover Sutil */
#homescreen .collapsible-instruction .homescreen-service-button:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}
.dark-theme #homescreen .collapsible-instruction .homescreen-service-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 3. MODO OSCURO */
.dark-theme #homescreen .collapsible-instruction {
    /* Fondo oscuro translúcido */
    background-color: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Mantenemos el border-top de color definido en tus reglas de tema oscuro */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

.dark-theme #homescreen .collapsible-instruction .homescreen-service-button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important; /* Texto claro */
}

/* 4. EFECTO HOVER INTERNO */
/* Cuando pasas el mouse sobre un botón específico dentro de la tarjeta */
#homescreen .collapsible-instruction .homescreen-service-button:hover {
    background-color: rgba(255, 255, 255, 0.3) !important; /* Un poco de brillo blanco */
}
.dark-theme #homescreen .collapsible-instruction .homescreen-service-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Un poco de brillo sutil en oscuro */
}

/* 5. ARREGLO PARA EL ÍCONO (FLECHA) */
/* Aseguramos que el ícono tenga el color correcto en este nuevo fondo */
#homescreen .collapsible-instruction svg {
    opacity: 0.7;
}
.dark-theme #homescreen .collapsible-instruction svg {
    color: #cbd5e1 !important;
}
/* --- FIX DEFINITIVO DE ALINEACIÓN --- */

/* 1. Título superior (instruction-text): SIEMPRE CENTRADO */
.congregation-instruction .instruction-text {
    text-align: center !important;
}

/* 2. Cajas de traducción (Español/Inglés): ALINEADAS A LA IZQUIERDA */
.congregation-instruction .text-spanish,
.congregation-instruction .text-english {
    text-align: left !important;
}
/* ============================================================
   === ESTILO DE CONVERSACIÓN (LÍDER vs TZIBUR) ===
   ============================================================ */

/* 1. CLASE BASE (El "Globo" de texto) */
/* Hereda la estética de .congregation-instruction pero con ancho reducido */
.conversation-step {
    width: 85%; /* Deja espacio para el efecto escalonado */
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    
    /* Estilos copiados de tus instrucciones para mantener consistencia */
    background-color: #fdfbf6; 
    border: 1px solid #e0e0e0;
    color: #2c3e50;
    font-size: 1.1em; /* Un poco más grande para lectura fácil */
    line-height: 1.5;
    
    /* Sombra suave para que flote un poco */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    
    /* Asegura que no floten uno al lado del otro */
    clear: both;
    display: block;
}

/* 2. EL LÍDER (Alineado a la Izquierda) */
.conversation-step.leader {
    margin-right: auto; /* Empuja el bloque a la izquierda */
    margin-left: 0;
    text-align: left;   /* Texto alineado a la izquierda */
    
    /* Borde de acento Dorado (Tu color de acento) */
    border-left: 4px solid var(--color-accent-gold, #a89a74);
    
    /* Detalle visual: Esquina inferior izquierda cuadrada (efecto globo) */
    border-bottom-left-radius: 2px;
}

/* 3. LA CONGREGACIÓN (Alineada a la Derecha) */
.conversation-step.assembly {
    margin-left: auto;  /* Empuja el bloque a la derecha */
    margin-right: 0;
    text-align: right;  /* Texto alineado a la derecha para enfatizar respuesta */
    
    /* Borde de acento usando el COLOR DEL SERVICIO (Rojo/Azul/Gris) */
    border-right: 4px solid var(--service-color, #475569);
    
    /* Detalle visual: Esquina inferior derecha cuadrada */
    border-bottom-right-radius: 2px;
    
    /* Opcional: Un fondo sutilmente diferente para diferenciar voces */
    background-color: #ffffff; 
}


/* --- MODO OSCURO --- */

.dark-theme .conversation-step {
    background-color: #283141; /* Mismo fondo que tus instrucciones oscuras */
    border-color: #374151;
    color: #e0e6f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dark-theme .conversation-step.leader {
    border-left-color: var(--color-accent-gold, #c7b894);
}

.dark-theme .conversation-step.assembly {
    /* En modo oscuro, el fondo de la asamblea puede ser un poco más claro/oscuro para contraste */
    background-color: #1f2937; 
    border-right-color: var(--service-color, #9ca3af);
}

/* Ajuste de tipografía interna */
.conversation-step p {
    margin: 0;
    padding: 0;
}
.conversation-step strong {
    font-weight: 700;
    opacity: 0.9;
}
/* ============================================================
   === FIX ALINEACIÓN DE TEXTO (ASAMBLEA) ===
   ============================================================ */

/* Forza que los textos de lectura (Español, Inglés y Fonética) 
   se alineen a la izquierda, aunque la caja esté a la derecha */
.conversation-step.assembly .text-spanish,
.conversation-step.assembly .text-english,
.conversation-step.assembly .text-transliteration {
    text-align: left;
}
/* ============================================================
   === FIX DEFINITIVO: EFECTO "C" + INDENTACIÓN RESTAURADA ===
   ============================================================ */

/* Seleccionamos TODAS las líneas verticales indicadoras */
a.sidebar-link.active::before,              /* Sidebar */
[class*="indicator-"]::before,              /* Top Bar */
.menu-item-indicator,                       /* Menú Opciones */
.homescreen-service-button::before,         /* Homescreen */
.text-spanish i::before,                    /* Traducciones */
.text-english i::before 
{
    /* 1. LA FORMA DE "C" / "ABRAZO" */
    /* Izquierda (Espalda): 8px -> Curva fuerte y redonda */
    /* Derecha (Cara): 2px -> Curva pequeña para cerrar la punta suavemente */
    border-radius: 8px 2px 2px 8px !important; 
    
    /* 2. TAMAÑO FLOTANTE */
    height: 100% !important; 
    top: 0 !important;
    transform: none !important;
    
    /* 3. ANCHO */
    width: 5px !important;  
    
    /* 4. POSICIÓN */
    left: 0 !important; 
    position: absolute !important;
    bottom: 0 !important;
}

/* --- AJUSTES DE ESPACIADO (CORREGIDO) --- */

/* 1. Sidebar: ¡BORRADO! */
/* Eliminé la regla "a.sidebar-link { padding-left... }" para que 
   tu barra lateral use su indentación original (H2, H3, H4) sin que yo la aplaste. */

/* 2. Top Bar */
#program-title-container { padding-left: 1rem !important; }
#program-title-container [class*="indicator-"]::before { left: 0 !important; }

/* 3. Homescreen */
.homescreen-service-button { overflow: visible !important; }

/* ============================================================
   === FIX: LÍNEAS DE TRADUCCIÓN (CURSIVAS) CON PUNTA AFINADA ===
   ============================================================ */

/* 1. RESETEAR EL ESTILO ANTIGUO (Quitar el borde cuadrado) */
.text-spanish i,
.text-english i {
    border-left: none !important; /* Adiós rectángulo */
    position: relative !important; /* Necesario para posicionar la nueva línea */
    padding-left: 1.5rem !important; /* Un poco más de espacio para la línea flotante */
    background-color: transparent !important; /* Limpieza opcional */
}

/* 2. CREAR LA LÍNEA CON LA GEOMETRÍA "AFINADA" (Igual al Sidebar) */
.text-spanish i::before,
.text-english i::before {
    content: '';
    position: absolute;
    left: 0;
    
    /* GEOMETRÍA EXACTA QUE TE GUSTA */
    width: 4px !important;
    border-radius: 6px 0 0 6px !important; /* La forma asimétrica afilada */
    
    /* FLOTACIÓN (Centrada y al 70% de la altura del texto) */
    /* Si el texto es largo, la línea quedará centrada elegantemente */
    height: 100% !important; 
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    
    /* COLOR BASE (Usa la variable del tema: Rojo, Azul, Gris, etc.) */
    background-color: var(--service-color, #d1d5db) !important;
}

/* 3. MANEJO DE GRADIENTES (GAAVAH y NETIVOT) 
   Como ::before usa background, necesitamos re-aplicar los gradientes aquí. */

/* Gaavah (Multicolor) */
body[data-service-theme="gaavah"] .text-spanish i::before,
body[data-service-theme="gaavah"] .text-english i::before {
    background: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082) !important;
}
/* Gaavah Oscuro */
.dark-theme body[data-service-theme="gaavah"] .text-spanish i::before,
.dark-theme body[data-service-theme="gaavah"] .text-english i::before {
    background: linear-gradient(to bottom, #f87171, #fb923c, #facc15, #34d399, #60a5fa, #a78bfa) !important;
}

/* Netivot (Gris-Amarillo) */
body[data-service-theme="netivot"] .text-spanish i::before,
body[data-service-theme="netivot"] .text-english i::before {
    background: linear-gradient(to bottom, #808080, #FBBF24) !important;
}
/* Netivot Oscuro */
.dark-theme body[data-service-theme="netivot"] .text-spanish i::before,
.dark-theme body[data-service-theme="netivot"] .text-english i::before {
    background: linear-gradient(to bottom, #9ca3af, #FCD34D) !important;
}