:root {
            --bg-color: #121212;
            --card-bg: #1e1e1e;
            --text-primary: #ffffff;
            --text-secondary: #aaaaaa;
            --accent-color: #3759a3;
            --bottom-nav-bg: #1a1a1a;
            --border-color: #2c2c2c;
            --modal-overlay: rgba(0, 0, 0, 0.85);
            /* Variables para la biblia */
            --bg: #121212;
            --card: #1e1e1e;
            --text: #ffffff;
            --muted: #98989d;
            --accent: #ffffffcc;
            --radius: 18px;
        }

        /* === TARJETA VERSICULO DEL DIA === */
        .verse-card {
            border-radius: 16px;
            padding: 24px 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            border: 1px solid var(--border-color);
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .verse-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85));
            z-index: 1;
        }
        .verse-content-wrapper { 
            position: relative; 
            z-index: 2; 
        }
        .verse-card-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 16px; 
        }
        .verse-card-header h3 { 
            font-size: 12px; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            color: var(--accent-color); 
            font-weight: 700; 
        }
        .verse-card p.text {
            font-size: 19px; 
            font-weight: 500; 
            line-height: 1.45; 
            margin-bottom: 14px;
            display: -webkit-box; 
            -webkit-line-clamp: 4; 
            -webkit-box-orient: vertical; 
            overflow: hidden;
        }
        .verse-card p.reference {
            
        }
        .verse-actions { 
            display: flex; 
            justify-content: space-between; 
            border-top: 1px solid rgba(255,255,255,0.1); 
            padding-top: 14px; 
        }
        .action-btn { 
            background: none; 
            border: none; color: var(--text-primary); 
            font-size: 13px; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            cursor: pointer; 
        }
        .action-btn i { 
            color: var(--text-secondary); 
        }
        .action-btn.active i { 
            color: var(--accent-color); 
        }
        

        /* === GUARDADOS === */
        .saved-section { 
            margin-top: 10px; 
            display: flex; 
            flex-direction: column; 
            gap: 12px; 
        }
        .saved-card {
            background-color: #181818; 
            -left: 4px solid var(--accent-color);
            padding: 14px; 
            border-radius: 8px; 
            position: relative;
        }
        .saved-card p.saved-text { 
            font-size: 15px; 
            font-weight: 500; 
            line-height: 1.4; 
            margin-bottom: 6px; 
            padding-right: 24px; 
        }
        .saved-card p.saved-ref { 
            font-size: 12px; 
            color: var(--accent-color); 
            font-weight: 600; 
        }
        .delete-saved-btn { 
            position: absolute; 
            top: 12px; 
            right: 12px; 
            background: none; 
            border: none; 
            color: #cc3333; 
            cursor: pointer; 
            font-size: 16px; 
        }


        /* --- MODAL DE VERSÍCULO (MÁXIMA COMPRESIÓN PARA CAPTURA) --- */
.home-verse-modal-content { 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    min-height: auto; /* Eliminado el min-height que inflaba el modal */
    display: flex; 
    flex-direction: column; 
    padding: 20px 14px 12px 14px; /* Espaciados hiper-compactos */
}
.home-verse-modal-content::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.94)); 
    z-index: 1; 
}

.home-verse-modal-body { 
    position: relative; 
    z-index: 2; 
    text-align: center; 
    overflow: visible !important; /* Forzamos a que no intente scrollear internamente */
    max-height: none !important; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Tipografías y Títulos compactos */
.modal-title {
    text-align: center;
    font-size: 17px; 
    margin-bottom: 8px; 
    font-weight: 900;
    letter-spacing: 0.5px;
}
.home-verse-modal-body p.full-text { 
    font-size: 17px;
    font-weight: 400; 
    line-height: 1.35; 
    margin-bottom: 6px; 
    padding: 0 10px;
}
.home-verse-modal-body p.full-reference { 
    color: var(--accent-color); 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 12px;
}

/* DISTRIBUCIÓN HORIZONTAL / COMPACTA DE CAJAS */
/* Convertimos las cajas en un entorno flexible que consume menos espacio vertical */
.reflection-box, .prayer-box {
    text-align: left;
    background: rgba(255, 255, 255, .04);
    padding: 12px 14px; 
    border-radius: 12px;
    margin-top: 8px;
}

.reflection-box {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.reflection-box h3, .prayer-box h3 {
    margin-bottom: 4px; 
    font-size: 14px; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.reflection-box h3 { color: #f6d365; }
.prayer-box h3 { color: #6ec6ff; }

.reflection-box p, .prayer-box p {
    line-height: 1.4; 
    font-weight: 600;
    font-size: 13px; /* El estándar para lecturas compactas en capturas */
    color: #e0e0e0;
    white-space: pre-line;
}

/* Marca de agua integrada sutilmente */
.watermark {
    margin-top: 14px; 
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .25);
    letter-spacing: 1px;
    user-select: none;
}

/* TOAST */
        .toast {
            position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%) translateY(100px);
            background-color: #22c55e; color: white; padding: 12px 24px; border-radius: 20px;
            font-size: 14px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 2000; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none; opacity: 0;
        }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

        /* === SHARE SHEET iOS === */
        .share-sheet {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .share-sheet-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(3px);
            animation: fadeInShare 0.2s ease;
        }
        @keyframes fadeInShare { from { opacity: 0 } to { opacity: 1 } }
        .share-sheet-content {
            position: relative;
            background: #1c1c1e;
            border-radius: 24px 24px 0 0;
            padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
            animation: slideUpShare 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        }
        @keyframes slideUpShare {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .share-sheet-title {
            text-align: center;
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            margin-bottom: 14px;
        }
        .share-sheet-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .share-sheet-option {
            background: transparent;
            border: none;
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 4px;
            border-radius: 14px;
            transition: background 0.15s;
        }
        .share-sheet-option:active { background: rgba(255,255,255,0.1); }
        .share-sheet-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: #3759a3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .share-sheet-option span {
            font-size: 11px;
            color: var(--text-primary);
            font-weight: 500;
        }
        .share-sheet-cancel {
            width: 100%;
            padding: 14px;
            border-radius: 14px;
            border: none;
            background: #3a3a3c;
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }
        .share-sheet-cancel:active { background: #48484a; }

        /* === BOTON IR A VERSICULO EN GUARDADOS/RESALTADOS === */
        .goto-verse-btn {
            position: absolute;
            top: 12px;
            right: 40px;
            background: none;
            border: none;
            color: var(--accent-color);
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
        }

        /* === MODAL iOS MEJORADO === */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: none;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }
        .modal-overlay.active .modal-content {
            transform: translateY(0) scale(1);
        }
        .modal-content {
            transform: translateY(30px) scale(0.96);
            transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        }